Dungeon Raid iPhone game engine made with Flash and AS3 – collecting items

Read all posts about "" game

Here we are with the 3rd step of the tutorial. Today we will let the player collect items if he selects at least three of them with the same color.

The changes to be made to the script are very simple. First we need another property in tileObject object called val, an integer which will range from 1 to 6.

This will allow us to create six different kind of tiles, which must be represented by as may frames in Tile symbol. I used six different colors.

Then, a valid move is defined as a move which groups at least three tiles oft he same color, so if the player performs a valid move, selected tiles are removed from the stage and new ones appear, this way:

Tiles do not fall down like in the original game, but you should be able to do it since it’s the same concept used during the making of Bejeweled.

Here is the source code:

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	public class Main extends Sprite {
		private var fieldWidth:int=8;// field width, in tiles
		private var fieldHeight:int=6;// field height, in tiles
		private var tileSize:int=80;// tile size, in pixels
		private var tileVector:Vector.;
		private var visitedVector:Vector.;// vector to store all visited tiles, as Point as it's easy to store x and y coordinate
		private var colorSelected:int=0;// the color selected by the player
		public function Main() {
			// adding tiles on stage and initializing tile vector
			tileVector=new Vector.();
			for (var i:int=0; i();
				for (var j:int=0; j();
			visitedVector.push(new Point(i,j));
			// highlighting the tile and setting it as "taken";
			tileVector[i][j].tile.alpha=0.5;
			tileVector[i][j].taken=true;
			// saving the color we just selected
			colorSelected=tileVector[i][j].val;
			// updating listeners, removing mouse down, adding mouse move and mouse up;
			stage.removeEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,drawing);
			stage.addEventListener(MouseEvent.MOUSE_UP,stopDrawing);
		}
		private function drawing(e:MouseEvent):void {
			// getting tile
			var i:int=Math.floor(mouseX/tileSize);
			var j:int=Math.floor(mouseY/tileSize);
			// checking if we are inside the sensible area
			var distX:Number=mouseX-(i*tileSize+tileSize/2);
			var distY:Number=mouseY-(j*tileSize+tileSize/2);
			// 1225 is 35^2, where 35 is the radius of the sensible area
			if (distX*distX+distY*distY<1225) {
				// now checking if we moved from the last tile visited
				if (i!=visitedVector[visitedVector.length-1].x || j!=visitedVector[visitedVector.length-1].y) {
					// now, let's see if we moved to an adjacent tile. we don't want the player to jump here and there
					if (Math.abs(i-visitedVector[visitedVector.length-1].x)<=1 && Math.abs(j-visitedVector[visitedVector.length-1].y)<=1) {
						// ok we moved, now let's see if we are backtracking:
						if (visitedVector.length>1&&i==visitedVector[visitedVector.length-2].x&&j==visitedVector[visitedVector.length-2].y) {
							// we are backtracking, so we have to remove the last element from visitedVector and turn off the tile
							var backtrackPoint:Point=visitedVector.pop();
							tileVector[backtrackPoint.x][backtrackPoint.y].tile.alpha=1;
							tileVector[backtrackPoint.x][backtrackPoint.y].taken=false;
							removeChild(tileVector[backtrackPoint.x][backtrackPoint.y].path);
							// the infamous bug line
							tileVector[backtrackPoint.x][backtrackPoint.y].path=null;
							// adding the arrow to latest path
							if (visitedVector.length>=2) {
								tileVector[visitedVector[visitedVector.length-1].x][visitedVector[visitedVector.length-1].y].path.gotoAndStop(tileVector[visitedVector[visitedVector.length-1].x][visitedVector[visitedVector.length-1].y].path.currentFrame+8);
							}
						}
						else {
							// we aren't backtracking, let's see if the new tile was already taken (illegal move;// moreover we have to check if we are moving over tiles of the same color;
							if (! tileVector[i][j].taken&&tileVector[i][j].val==colorSelected) {
								// it's a new tile, let's insert it into the vector and highlight it
								visitedVector.push(new Point(i,j));
								tileVector[i][j].tile.alpha=0.5;
								tileVector[i][j].taken=true;
								// then place the path movieclip
								tileVector[i][j].path=new Path();
								tileVector[i][j].path.x=visitedVector[visitedVector.length-2].x*tileSize+tileSize/2;
								tileVector[i][j].path.y=visitedVector[visitedVector.length-2].y*tileSize+tileSize/2;
								// showing the right frame with arrow
								var iDiff:int=i-visitedVector[visitedVector.length-2].x;
								var yDiff:int=j-visitedVector[visitedVector.length-2].y;
								switch (iDiff) {
									case -1 :
										tileVector[i][j].path.gotoAndStop(Math.abs(yDiff)*(4+3*yDiff)+1+8);
										break;
									case 0 :
										tileVector[i][j].path.gotoAndStop(5+2*yDiff+8);
										break;
									case 1 :
										tileVector[i][j].path.gotoAndStop(5+yDiff+8);
										break;
								}
								addChild(tileVector[i][j].path);
								// removing arrow from previous path
								if (visitedVector.length>=3) {
									tileVector[visitedVector[visitedVector.length-2].x][visitedVector[visitedVector.length-2].y].path.gotoAndStop(tileVector[visitedVector[visitedVector.length-2].x][visitedVector[visitedVector.length-2].y].path.currentFrame-8);
								}
							}
							else {
								// invalid move, stop drawing;
								stopDrawing(null);
							}
						}
					}
				}
			}
		}
		private function stopDrawing(e:MouseEvent):void {
			// updating listeners
			stage.addEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawing);
			stage.removeEventListener(MouseEvent.MOUSE_UP,stopDrawing);
			// removing and adding tiles if it's a valid move
			if (e!=null && visitedVector.length>2) {
				for (var i:int=0; i0) {
						removeChild(tileVector[visitedVector[i].x][visitedVector[i].y].path);
					}
					// adding a new tile
					var tileObject:Object=new Object();
					tileObject.taken=false;
					tileObject.path=null;
					// assigning a random value from 1 to 6 to each tile
					tileObject.val=Math.ceil(Math.random()*6);
					tileObject.tile=new Tile();
					tileObject.tile.x=visitedVector[i].x*tileSize;
					tileObject.tile.y=visitedVector[i].y*tileSize;
					// displaying the proper frame
					tileObject.tile.gotoAndStop(tileObject.val);
					addChild(tileObject.tile);
					tileVector[visitedVector[i].x][visitedVector[i].y]=tileObject;
				}
			}
			else {
				// turning off all tiles
				for (i=0; i

And you can download the entire project here.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 2048
// Dots
// Maze
// Pool
// Poux
// Pudi
// qomp
// Turn
// Zhed