Emanuele Feronato

italian geek and PROgrammer

Talking about Gem Sweeper game, and Flash.

You all may know the casual game called Gem Sweeper, an evolution of the famous Minesweeper game included with early Windows distributions.

If you don’t know the game already, play a bit for free with the trial version to know what I am going to reproduce with this simple Flash prototype.

The mechanics of the game can be coded in less than 100 lines… and if you add some cute graphics and some features that will distinguish this prototype from the original game, maybe you can find it useful to join the Armor Games competition.

Let’s examine the four (!) objects involved in this game:

Cursor: the cursor you will move with the mouse, selecting the tiles to break

Tile: the tile itself. It has two frames: one with a green tile and one with a red one. Both frames have a Stop(); action.

Horizontal: a movieclip with an horizontal text area instanced as writing

Vertical: a movieclip with a vertical text area instanced as writing

Now, time to write the code, on the first frame in the main scene

num_columns = 5;
num_rows = 5;
bombs = 15;
bombs_placed = 0;
level = new Array();
for (x=0; x0) {
				string += consecutive_vert_bombs+"\n";
			}
			consecutive_vert_bombs = 0;
		}
	}
	if (consecutive_vert_bombs>0) {
		string += consecutive_vert_bombs+"\n";
	}
	str = attachMovie("vertical", "vertical"+x, _root.getNextHighestDepth(), {_x:x*20, _y:num_rows*20});
	str.writing.text = string;
}
for (x=0; x0) {
				string += consecutive_horiz_bombs+" ";
			}
			consecutive_horiz_bombs = 0;
		}
	}
	if (consecutive_horiz_bombs>0) {
		string += consecutive_horiz_bombs+" ";
	}
	str = attachMovie("horizontal", "horizontal"+x, _root.getNextHighestDepth(), {_x:num_columns*20+2, _y:x*20+2});
	str.writing.text = string;
}
attachMovie("horizontal", "bleft", _root.getNextHighestDepth(), {_x:470, _y:380});
bleft.writing.text = bombs;
attachMovie("cursor", "cursor", _root.getNextHighestDepth());
cursor.onEnterFrame = function() {
	column = Math.floor(_root._xmouse/20);
	if (column>num_columns-1) {
		column = num_columns-1;
	}
	row = Math.floor(_root._ymouse/20);
	if (row>num_rows-1) {
		row = num_rows-1;
	}
	this._x = 20*column;
	this._y = 20*row;
};
function onMouseDown() {
	column = Math.floor(_root._xmouse/20);
	if (column>num_columns-1) {
		column = num_columns-1;
	}
	row = Math.floor(_root._ymouse/20);
	if (row>num_rows-1) {
		row = num_rows-1;
	}
	num = column*num_columns+row;
	if (level[column][row] == 0) {
		unloadMovie(_root["tile_"+num]);
	} else {
		_root["tile_"+num].gotoAndStop(2);
	}
}

Line 1: Defining the number of columns of the mine field. Unlike Gem Sweeper, the field can only be rectangular. I’ll show you how to create different types of fields in a future tutorial.

Line 2: Defining the number of rows of the mine field

Line 3: Amounts of bomb to be placed in the field

Line 4: Bombs already placed. It always starts at zero, of course, because no bombs are placed at the beginning of the game

Line 5: Declaring level as an array. It’s the game field itself

Line 6: Beginning of the loop that will create the columns. Notice that starts from 0 and ends at num_columns-1. This is because the first element of a Flash array is indexed with 0

Line 7: Creating a sub-array at the x-th element of the array. This array will contain the row

Line 8: Loop creating the rows

Line 9: Creating an empty cell at level[x][y]. We define an empty cell as a cell marked with a 0.

Recap: Lines 6-11 create an matrix of 20×15 elements with all values to zero. This is the game field.

Line 12: Beginning of a loop that will cycle while the number of placed bombs is smaller than the number of the bombs to be placed

Lines 13-14: Generation of random x and y values

Line 15: Controlling if the cell at x,y position is empty (marked with zero)

Line 16: Setting that cell to 1 (placing a bomb)

Line 17: Increase the number of bombs placed

Recap: Lines 12-19 place bomb bombs into the game field. A while loop and an if condition assure we don’t place a bomb over another bomb.

Lines 20-21: Scanning all the matrix like in lines 6 and 8

Line 22: Assigning a unique number to the matrix element according to its x and y position

Line 23: Attaching the tile on the stage, placing it in the right position according to x and y values

Recap: Lines 20-25 draw the level on the stage

Line 26: Loop scanning through all columns

Line 27: Setting the number of consecutive vertical bombs found to zero (you may need to play a bit the original game to understand what I mean)

Line 28: Declaring an empty string called… string…

Line 29: Scanning through all rows

Line 30: Checking if the level has a bomb at x,y position

Line 31: If true, add 1 to the number of consecutive bombs found

Lines 32-36: If false, add the number of consecutive bombs found (if any) to the string and set the number of consecutive bombs found to zero again

Lines 39-40: Add again the number of consecutive bombs. This may seem redundant but it’s necessary because we are outside the cycle started at line 29, and without these two lines you won’t be able to write the last value of consecutive bombs if you have a bomb in the last (num_rows-1) row.

Line 42: Attaching the movieclip with the vertical string, according to its column position

Line 43: Write the content of string variable inside the textarea

Recap: Lines 26-44 calculate and write the numbers of consecutive bombs of every column

Lines 45-63: Same thing, writing the horizontal consecutive bombs. I could do this in the previous cycle together with the vertical consecutive bombs, but I think this way the script is cleaner

Lines 64-65: Adding another string with the value of the amount of bombs in the game

Line 66: Attaching the cursor movie

Line 67: Beginning of the actions to be performed by the cursor at every frame

Line 68: finding the column dividing the _xmouse position by 20. 20 is the length of the side of a tile

Lines 69-71: Adjusting column number in case it should exceed the number of existing columns

Lines 72-75: Same thing with the rows

Lines 76-77: Placing the cursor exactly over the tile under the mouse pointer

Recap: Lines 67-78 place the cursor over the tile under the mouse pointer. We check if the game pointer is outside the game field, and in this case we place the cursor over the closest tile to mouse pointer. Notice that I check only if the mouse pointer leaves the game field from the right or from the bottom because the game field is aligned on the top left of the movie. If you want to center the game field, you have to add controls for left and upper limits too.

Line 79: Routine to be executed when the player presses the mouse button. This is the last routine of this prototype

Lines 80-87: Finding whick row and colum your mouse is over in the same way as I did onlines 68-75

Line 88: Calculating the unique number of the tile you are on in the same way as in line 22

Line 89: If there isn’t a bomb…

Line 90: Remove the tile movieclip

Lines 91-92: If there is a bomb, show it to the player stopping the tile to the frame where it’s red

Recap: Lines 79-94 manage player clicks: if the player clicks on an empty tile, remove the tile. If the player clicks on a “bomb”, then show it.

That’s all. I will make a second tutorial about finishing the game with some more features very soon.

Meanwhile try these two games: an easy one and a very hard one. You win when the number of green tiles on the stage is the same of the number displayed in the bottom right corner. You lose if you spot a red square. Refresh this page to play again.

Easy

Hard

This is the source code for the hard game… download it and give me feedback.