theARTboy
where art meets design
AS3 Triple Matching Game
Categories: flash, games

Matching games are a great way to learn about using arrays. I have worked with a number of ways to build the game logic for creating matching games over the years. I found an example of how to construct one in an article by Emaneule Feronato. The challenge that I wanted to explore was how to match three instead of the usual pair match style game. Another complication was that the three items were to not be based on the same artwork, which again violates the standard style of play and construction. When the match items are the same, it is easy to populate the stage and set the property for match comparison. This presented me with a great problem to solve.

The solution that I arrived at was to use an array filled with array objects to represent each card in the deck. The cards had two properties, one to represent the frame number of artwork they will display and the other property to represent the group to which they belong.
[as3]
var deck:Array = new Array([1,"red"],[2,"red"],[3,"red"],[4,"blue"],[5,"blue"],[6,"blue"],[7,"green"],[8,"green"],[9,"green"]);
[/as3]
The second challenge was to integrate a triple comparison instead of the usual pair. I tried setting it with
[as3]
first_tile.matchType==second_tile.matchType==third_tile.matchType
[/as3]
The problem that occurred was that it would never register the match occurring. What I came to realize is that the equality comparison operator is for comparing two items only. I first arrived at a solution to set a temp variable to the matchType of the first card and then compare that to the other two. It worked but I was troubled by the inefficiency of the code. After sleeping on it, I realized I could construct a simple compound comparison without needing the extra variable.
[as3]
first_tile.matchType==second_tile.matchType&& third_tile.matchType==first_tile.matchType
[/as3]
The full game also features a text input for the player’s name. It is more fun if the game knows who is playing.
The game file (CS5.5) is here.Matching Game
The full code for the triple match game.
[as3]
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.events.Event;

var first_tile:Card;
var second_tile:Card;
var third_tile:Card;
var pause_timer:Timer;
var gameTimer:Timer;
var gameTimeDisplay:MovieClip;
var resultsDisplay:MovieClip;
var totalMatches:int;
var score:int;
var totalGameTime:int;
var inputPlayer:MovieClip;
var playButt:MovieClip;
var playerName:String;

var deck:Array = new Array(
[1,"red"],[2,"red"],[3,"red"],[4,"blue"],[5,"blue"],[6,"blue"],[7,"green"],[8,"green"],[9,"green"]);

function init():void
{
inputPlayer=new InputPlayer();
inputPlayer.x=284;
inputPlayer.y=184;
addChild(inputPlayer);
playButt=new PlayButton();
playButt.x=260;
playButt.y=260;
addChild(playButt);
playButt.addEventListener(MouseEvent.CLICK,playClick);
}
function playClick(e:MouseEvent):void
{
playButt.removeEventListener(MouseEvent.CLICK,playClick);
removeChild(playButt);
removeChild(inputPlayer);
playerName=inputPlayer.playerNameField.text;
loadGame();
}
function loadGame():void
{
totalMatches=3;
score=0;
//create the game board
for (x=1; x<=3; x++)
{
for (y=1; y<=3; y++)
{
var random_card = Math.floor(Math.random() * deck.length);
var tile:Card = new Card();
tile.art=deck[random_card][0];
tile.matchType = deck[random_card][1];
trace("matchType: "+tile.matchType+" art: "+tile.art);
deck.splice(random_card,1);
tile.gotoAndStop("cardBack");
tile.x = (x – 1) * 100+5*x;
tile.y = (y – 1) * 100+5*y;
tile.addEventListener(MouseEvent.CLICK,tile_clicked);
addChild(tile);
}
}
//create the game timer
gameTimer=new Timer(1000,0);
gameTimeDisplay=new GameTimeDisplay();
gameTimeDisplay.x=333;
gameTimeDisplay.y=70;
addChild(gameTimeDisplay);
resultsDisplay=new ResultsDisplay();
resultsDisplay.x=333;
resultsDisplay.y=170;
addChild(resultsDisplay);
resultsDisplay.resultsText.text="";
gameTimeDisplay.timeText.text="Time: "+0+" seconds";
gameTimer.addEventListener(TimerEvent.TIMER, updateGameTimer);
gameTimer.start();
}
function updateGameTimer(e:TimerEvent):void
{
gameTimeDisplay.timeText.text="Time: "+gameTimer.currentCount+" seconds";
if(score==totalMatches){
totalGameTime=gameTimer.currentCount;
gameTimer.stop();
resultsDisplay.resultsText.text="Good job, "+playerName+"\nYou completed the game in:\n"+totalGameTime+" seconds";
gameTimeDisplay.timeText.text="";
}
}
function tile_clicked(e:MouseEvent):void
{
var clicked:Card = (e.currentTarget as Card);
if (first_tile == null)
{
first_tile = clicked;
first_tile.gotoAndStop(clicked.art);
}
else if (second_tile == null && first_tile != clicked)//second half of clause prevents double clicking tiles
{
second_tile = clicked;
second_tile.gotoAndStop(clicked.art);
}
else if (third_tile == null && first_tile != clicked && second_tile != clicked)
{
third_tile = clicked;
trace(first_tile.matchType +" "+ second_tile.matchType +" "+ third_tile.matchType);
third_tile.gotoAndStop(clicked.art);
if (first_tile.matchType==second_tile.matchType&& third_tile.matchType==first_tile.matchType)
{
trace("match");
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
pause_timer.start();
score++;

}
else
{
trace("no match");
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
pause_timer.start();
}
}
}
function reset_tiles(e:TimerEvent):void
{
first_tile.gotoAndStop("cardBack");
second_tile.gotoAndStop("cardBack");
third_tile.gotoAndStop("cardBack");
first_tile = null;
second_tile = null;
third_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
}
function remove_tiles(e:TimerEvent):void
{
removeChild(first_tile);
removeChild(second_tile);
removeChild(third_tile);
first_tile = null;
second_tile = null;
third_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
}
init();
[/as3]
Enjoy and have fun coding!

Leave a Reply

You must be logged in to post a comment.