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 .