Flash Tutorials
Flash Memory Game Tutorial 4 Back
Start Over
Core Game Functionality. Now that we have the basic mechanics of the classes down, it's time to string it all together and make the game work.
We need a class variable in the class Table to indicate if a tile being clicked
is the first one or the second. We'll also need the position of the previously
clicked tile with row and column. Let's declare 3 variables, first, prevR, prevC.
The first one can be declared as a Boolean (true/false) and the two others as
int:
var first:Boolean;
Before doing anything else, initialize this variable to true in the function
create_tiles. It is better to do it in this function because if we want to play
the game again without restarting the app, this function will be called but not
the constructor.
Next we'll declare a function in the class Table that the tile can call when it
is clicked. It will need to pass to the table its row and column. The case where
the first tile is clicked is easy. We just need to set the value of the three
new variables appropriately. But when the second tile is clicked, we need to check
if it matches the first one. If they do, we leave them both open - but we still
have to change the color of the frame. If they don't, we need to close them both.
Here it is:
public function click_tile(row:int, col:int) {
if (first) {
prevR = row;
prevC = col;
first = false;
} else {
first = true;
if (table[row][col] == table[prevR][prevC]) {
tiles[row][col].show_found();
tiles[prevR][prevC].show_found();
} else {
tiles[row][col].show_back();
tiles[prevR][prevC].show_back();
}
}
}
Then this function needs to be called. Go back to the Tile class and add this line to the function click_open: the_table.click_tile(row, col);
You can test the program now and it should pretty much be working. Note that the second tile is closing too fast to see what it is. To make it stay open a while longer, we need to introduce a Timer.
Timer. A timer is a class that allows us to do something repeatedly at specific intervals, and it's also the only way to delay something in Flash (or at least that I know of). We'll only need to declare one timer object in the Table class for this, and then start it and stop it as needed.
Before we do that, though, we have to declare two more variables in the class for the current row and column of the tile being clicked. Since the function click_tile will not close the tiles itself but only start the timer, and the times function doesn't allow for extra parameters to be passed to it, we'll store this information in the class variables. Let's call then secondR and secondC.
Now let's add the function to be called after a given amount of time (to be
determined):
public function close_tiles(event:TimerEvent) {
tiles[secondR][secondC].show_back();
tiles[prevR][prevC].show_back();
}
Then replace the two lines that close the tiles in the function click_tile with
an assignment of row and col to the variables secondR and secondC.
Go back to the beginning of the class and declare a new variable called
tile_timer with the type Timer. In the constructor we need to initialize the timer
with a parameter representing the delay in milliseconds, and attach a function
to this timer to be called when it is activated. This can be done like this:
tile_timer = new Timer(700);
tile_timer.addEventListener(TimerEvent.TIMER, close_tiles);
You can adjust the delay when you test the program.
What is left to do is to start and stop this timer. The timer needs to be
started in the function click_tile after the variables secondR and secondC have
been assigned their values:
tile_timer.start();
The timer needs to be stopped inside its own function close_tiles, after the whole
content of its body:
tile_timer.stop();
Test the game to make sure it's working. We can now focus on some GUI details next to complete the application.
Button. Let's add a button at the top that can be used to restart the game. Go back to the .fla file. From the Window menu open Components. Drag a button from the dialog that opens to the stage and place it in the middle above the area of the tiles. From the Window menu again, open the Component Inspector dialog and make sure that the button is selected. Click on the first tab called Parameters and change its label to Restart. Then in the Properties area, find Color Effects, change it from None to Tint, and then choose the color that you want for the button. Finally, at the top of the Properties area, you'll see something called Instance Name. Edit that field and give it the name start_button. This is a unique identifier for the button that will allow us to manipulate it in the code.
Let's go back to the tile class and add a function that restarts the game without
re-building the tiles. All we need to change in this case is the image sprite. First
we have to remove it from the stage and hide it, and then we can replace it with a new
one:
public function replay(option) {
var posx = image_sprite.x;
var posy = image_sprite.y;
image_sprite.visible = false;
parent.removeChild(image_sprite);
choose_bmp(option);
move_to(image_sprite, posx, posy);
image_sprite.visible = false;
}
With this function written, we can write another one in the class Table with the
same purpose. This function will be somewhat similar to the constructor, so we can
add it right after it, but many operations don't need to be redone, like the array
allocation. The last line in the function below is a call to the garbage collector
that hopefully will recycle the memory used by the image sprites that we have
disposed of.
public function replay() {
fill_table(sizeR, sizeC, 15);
for (var i=0; i < sizeR; i++) {
for (var j=0; j < sizeC; j++) {
tiles[i][j].replay(table[i][j]);
tiles[i][j].show_back();
}
}
System.gc();
}
The functionality of restarting the game is now ready. Let's go back to the .fla file. Open the Actions dialog while still in the .fla file. We'll add one function here that will restart the game when called that we can attach to the button. Note that if the code doesn't show up when you switch to the file, you have to click on Layer 1: Frame 1 in the Actions dialog.
Win The Game. usually when the player wins a game, something should happen to mark it out. You can refine this later any way you want (a timed animation can help) but for now let's just make a short and sweet message pop up over the tiles when the game is won. But first we need to figure out when that happens.
In the class Table, add a variable called tile_count and initialize it in the constructor as rows*cols/2. Then in the function click_tile, in the case where the tiles match, decrease this variable by 1 (like, count_tile--; for example).
Go back to the .fla file, in the stage. Add text area using the tool labeled T and place it in the middle of the screen and type whatever your winning message is going to be ("you win", "well done", "!!!", etc.). Make the type of the text "Dynamic Text" in the properties. Adjust its size, font, color - it should be fairly big and visible. When you're happy with it, right-click on the text and do Convert to Symbol. Give it a symbol name easy to identify and a class name that you can remember. Once you close that dialog, write down the coordinates X and Y on the stage of the object. After that you can delete it from the stage. Click on the Library button (to the left of the properties area) and make sure the symbol you created is there.
In the Table class, add another variable called won_text. Go back to the
function click_tile. Here we'll add a test after decreasing the
variable count_tile that will check if the counter is 0. In that case we want to
create an instance of the class just defined and place it at the position you wrote
down. For example, for me this class is called Win_text, so the code will look this
way:
count_tile--;
if (count_tile == 0) {
won_text = new Win_text();
parent.addChild(won_text);
won_text.x = 130;
won_text.y = 160;
}
What is left to do is to remove this symbol when the game is restarted. Let's
go to the function replay in the Table class. Add the following lines before the
call to the garbage collector:
won_text.visible = false;
parent.removeChild(won_text);
won_text = null;
Test the program to see that it is working properly.
Sound. The last step int the program will be to add some sound effects to
it. The first one will be a small sound that should be heard whenever a tile is
clicked. The second one will be a cheering sound for when the game is won. You can
get some sound files in mp3 format of your own, and if not, these are the ones I'll
be using myself:
tap2.mp3
cheer.mp3
Whichever way you acquire these sound files, save them in the same folder as the rest
of the game.
In the .fla file, go the the File menu, and find Import - To Library. Select the mp3 files you copied before. Then open the library, right-click on their names, and choose Properties. Check the button Export for ActionScript and give each of them a class name that you can remember. Let us suppose that the classes are called Cheer_sound and Tap_sound.
In the table class we need two variables to reference these sounds, let's call
them tap and cheer. Declare them at the top, then add these lines to the constructor
to define them.
tap = new Tap_sound();
cheer = new Cheer_sound();
Go to the function click_tile in the same class and add
tap.play();
at the beginning. Then in the same function, down inside the test for count_tiles
being 0, add
cheer.play();
On Your Own. Here are a couple of suggestions for things to add on your own:
- make the tap sound different when the tiles match;
- add a little button at the top to turn the sound on and off;
- prevent the user from clicking several tiles in a row before the timer function can turn them off.