Creation of a matching game with Flash and AS3

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers