Talking about Actionscript 3, Flash and Game development.
This tutorial was inspired by the one written at chapter 3 in ActionScript 3.0 Game Programming University, but I changed some mechanics because I did not like some choices made by the author.
Anyway, this is not a “mine is better”, just a tutorial that I did not write completely on my own.
Do you know what is a matching game?
In this version, you have 16 grey tiles. You can flip two tiles at a time by clicking on them. If colors of the flipped tiles match, they will be removed from the table. If colors don’t match, they turn grey again.
Having 16 matchable tiles means having 8 different colors, and a “void” color to represent the unclicked tile.
The only object used in this movie is this movieclip:
The movieclip is linked as colors and has 9 frames: the ones from 1 to 8 represent the eight colors, while frame number 9 represents the grey tile.
The .fla file is called color_match.as and in its properties window the document class is color_match
Then, in the color_match.as file, the actionscript is:
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class color_match extends Sprite {
private var first_tile:colors;
private var second_tile:colors;
private var pause_timer:Timer;
var colordeck:Array = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
public function color_match() {
for (x=1; x<=4; x++) {
for (y=1; y<=4; y++) {
var random_card = Math.floor(Math.random()*colordeck.length);
var tile:colors = new colors();
tile.col = colordeck[random_card];
colordeck.splice(random_card,1);
tile.gotoAndStop(9);
tile.x = (x-1)*82;
tile.y = (y-1)*82;
tile.addEventListener(MouseEvent.CLICK,tile_clicked);
addChild(tile);
}
}
}
public function tile_clicked(event:MouseEvent) {
var clicked:colors = (event.currentTarget as colors);
if (first_tile == null) {
first_tile = clicked;
first_tile.gotoAndStop(clicked.col);
}
else if (second_tile == null && first_tile != clicked) {
second_tile = clicked;
second_tile.gotoAndStop(clicked.col);
if (first_tile.col == second_tile.col) {
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
pause_timer.start();
}
else {
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
pause_timer.start();
}
}
}
public function reset_tiles(event:TimerEvent) {
first_tile.gotoAndStop(9);
second_tile.gotoAndStop(9);
first_tile = null;
second_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
}
public function remove_tiles(event:TimerEvent) {
removeChild(first_tile);
removeChild(second_tile);
first_tile = null;
second_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
}
}
}
Lines 2-5: importing the required libraries
Line 6: declaration of the main class
Line 7: declaration of the variable that will save the value of the first tile clicked. Its type is colors because colors is the linkage name of the movieclip with all tiles
Line 8: Same thing for the second tile clicked
Line 9: Declaring a Timer variable that will be useful when I'll need to pause the game. I am going to pause the game when the player clicked two cards. If I don't pause the game, the player won't be able to see the second card clicked
Line 10: Initializing the colordeck array: it's an array containing all possible tiles value. Every value represent a color, and a frame where to stop the color movieclip
Line 11: Main function
Lines 12-13 : Loops to place 4 rows of 4 tiles each. Let's say four rows and four columns
Line 14: Choosing a random number between zero and the length of colordeck array -1. This means "choose a random tile"
Line 15: Creation of the tile. The type of the tile is colors, of course.
Line 16: Assigning an attribute to the tile called col that represent the color f the tile
Line 17: Removing the element at the position found at line 14 from the colordeck array. It feels just like we drawn a tile
Line 18: Showing the 9th frame in the tile timeline. The 9th frame is the grey tile
Lines 19-20: Defining the x and y position of the tile on the stage
Line 21: Adding an even listener to the tile: when the player will click on it, the function tile_clicked will be called
Line 22: Physically placing the tile on the stage
Line 26: Beginning of the tile_clicked function, the function to call every time the player clicks on a tile
Line 27: Assigning to a variable called clicked the value of the tile just clicked, the one that called the function
Line 28: If this is the first of two tiles clicked...
Line 29: Define this tile as the first of two tiles clicked
Line 30: Show the tile color by stopping at the proper frame in the timeline
Line 32: If we already clicked on a tile and we are clicking on another tile, the second one...
Line 33: Define this tile as the second of two tiles clicked
Line 34: Show the tile color by stopping at the proper frame in the timeline
Line 35: If the colors of the two clicked tiles match...
Line 36: Defining a variable containing a one second timer
Line 37: Adding a listener that will call the function remove_tiles once the amount of time defined at the previous line has passed. It means: "wait a second, then remove the cards from the table"
Line 38: Start the timer
Line 40: If the colors of the two clicked tiles don't match...
Lines 41-43: Same thing as lines 36-38, just calling a function to reset the tiles
Line 47: Beginning of the function that will reset the tiles
Lines 48-49: Turning both tiles grey
Lines 50-51: Turning the variables that store the first and second clicked tiles to null (empty)
Line 52: Remove the time listener
Line 54: Beginning of the function that will remove the tiles
Lines 55-56: Removing both tiles
Lines 57-58: Same thing as lines 50-51
Line 59: Remove the time listener
And this is the result:
Download the source and turn it into a complete game, if you want.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.