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

July 24, 2012 • Actionscript 3, Flash, Game design by Emanuele Feronato • 10 Comments

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.<Object>;
		private var visitedVector:Vector.<Point>;// 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.<Object>();
			for (var i:int=0; i<fieldWidth; i++) {
				tileVector[i]=new Vector.<Object>();
				for (var j:int=0; j<fieldHeight; j++) {
					// each tile is an object
					var tileObject:Object=new Object();
					tileObject.taken=false;
					// 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=i*tileSize;
					tileObject.tile.y=j*tileSize;
					// displaying the proper frame
					tileObject.tile.gotoAndStop(tileObject.val);
					addChild(tileObject.tile);
					tileObject.path=null;
					tileVector[i][j]=tileObject;
				}
			}
			// trigger mouse down to catch starting tile
			stage.addEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
		}
		private function startDrawing(e:MouseEvent):void {
			// getting starting tile
			var i:int=Math.floor(mouseX/tileSize);
			var j:int=Math.floor(mouseY/tileSize);
			// initializing and pushing tile into the vector
			visitedVector=new Vector.<Point>();
			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; i<visitedVector.length; i++) {
					// removing old tile
					removeChild(tileVector[visitedVector[i].x][visitedVector[i].y].tile);
					// removing old path
					if (i>0) {
						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<fieldWidth; i++) {
					for (var j:int=0; j<fieldHeight; j++) {
						tileVector[i][j].tile.alpha=1;
						tileVector[i][j].taken=false;
						if (tileVector[i][j].path!=null) {
							removeChild(tileVector[i][j].path);
							tileVector[i][j].path=null;
						}
					}
				}
			}
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

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.<Object>;

private var visitedVector:Vector.<Point>;// 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.<Object>();

for (var i:int=0; i<fieldWidth; i++) {

tileVector[i]=new Vector.<Object>();

for (var j:int=0; j<fieldHeight; j++) {

// each tile is an object

var tileObject:Object=new Object();

tileObject.taken=false;

// 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=i*tileSize;

tileObject.tile.y=j*tileSize;

// displaying the proper frame

tileObject.tile.gotoAndStop(tileObject.val);

addChild(tileObject.tile);

tileObject.path=null;

tileVector[i][j]=tileObject;

}

// trigger mouse down to catch starting tile

stage.addEventListener(MouseEvent.MOUSE_DOWN,startDrawing);

}

private function startDrawing(e:MouseEvent):void {

// getting starting tile

var i:int=Math.floor(mouseX/tileSize);

var j:int=Math.floor(mouseY/tileSize);

// initializing and pushing tile into the vector

visitedVector=new Vector.<Point>();

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; i<visitedVector.length; i++) {

// removing old tile

removeChild(tileVector[visitedVector[i].x][visitedVector[i].y].tile);

// removing old path

if (i>0) {

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<fieldWidth; i++) {

for (var j:int=0; j<fieldHeight; j++) {

tileVector[i][j].tile.alpha=1;

tileVector[i][j].taken=false;

if (tileVector[i][j].path!=null) {

removeChild(tileVector[i][j].path);

tileVector[i][j].path=null;

}

And you can download the entire project here.

Rate this post: 1 Star

(5 votes, average: 5.00 out of 5)

Loading ...

Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 10 comments

kalekip1

on July 24, 2012 at 6:44 pm

You always make nice tutorials, I have 2 questions.

First of all, people learn better by watching movies (YouTube tutorials for example).

And did you make this feedback form yourself? I’d like to get the source, or at least a tutorial on how to make it using PHP.

Thanks, your tutorials are awesome, even that I don’t use AS, I like them.
lewis

on July 24, 2012 at 7:47 pm

I am going do download myself the project and see more closely how it works.
Dungeon Raid iPhone game engine made with Flash and AS3 – collecting items – Emanuele Feronato « eaflash

on July 25, 2012 at 11:32 am

[...] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:LikeBe the first to like [...]
Andy C

on July 26, 2012 at 12:47 pm

Fantastic code, thanks for sharing. Not having played Dungeon Raid, I am wondering how to add new coins once a group has been collected that means the game doesn’t eventually stop because there are no more groups of three – or does that happen in Dungeon Raid too?
Hebert P

on July 28, 2012 at 5:52 am

Hi emanuele,

Any news about your box2D book?
When is the release?
I’m crazy to read this book (really, I’m crazy!).
Giochi di guerra flash online

on July 30, 2012 at 11:23 am

Great code! I’m starting studying it right now, loving it! Thanks for the great share!
Emanuele Feronato

on July 30, 2012 at 11:38 pm

@Hebert: currently it’s under technical review, I think it will be released before summer ends
New Guy

on September 3, 2012 at 3:33 am

I can use this source to make my own game ?
Emanuele Feronato

on September 3, 2012 at 11:33 am

Sure you can!
Andrew

on September 9, 2012 at 4:10 pm

Thanks for the code. It’s great. I’m studying it right now.

Emanuele Feronato

italian geek and PROgrammer

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

This post has 10 comments

kalekip1

lewis

Dungeon Raid iPhone game engine made with Flash and AS3 – collecting items – Emanuele Feronato « eaflash

Andy C

Hebert P

Giochi di guerra flash online

Emanuele Feronato

New Guy

Emanuele Feronato

Andrew