Creation of a matching game with Flash and AS3

May 2, 2008 by Emanuele Feronato
Filed Under Actionscript 3, Flash, Game design • 23 Comments 

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 4.64 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

23 Responses to “Creation of a matching game with Flash and AS3”

  1. Grifo on May 2nd, 2008 11:09 pm

    Good work.
    I believe there are some people who wish to see the conclusion of some “already-running” tutorials.
    Anyway, I aprecciate how frequently the blog’s being updated, it gives me a reason to come back and check things out almost daily. Keep it up.

  2. JJ on May 3rd, 2008 9:45 am

    Thanks, great tutorial Emanuele.
    Keep up the good work!

  3. Edward on May 3rd, 2008 10:18 am

    How do you make a movieclip on Flex Development cause I made all the actionscript stuff but I can’t make the moveiclip so when I ry to run it, it says Error Please do…… cause I don’t have a movieclip and there’s no place where it says make new movieclip or anything like that.

  4. JDog on May 3rd, 2008 11:38 am

    I’m on here so often, mainly because your tutorials are great ! I also enjoy the people on the forum !

  5. SRR on May 5th, 2008 11:21 am

    Edward, you could alter the code to dynamically draw the squares, the fill colour could be held in the array and you just redraw the squares with the appropriate fill after the click.

  6. MrPhil on July 12th, 2008 12:04 am

    Like Edward I’m confused by the fla or movieclip part. I haven’t bought the Adobe tools so I’m kind of in the dark as to how this part is created.

  7. widged on September 2nd, 2008 3:39 am

    For the ones who don’t have Flash CS3, the code for a Flex version can also be found (developed independently).

    See under Memory Game @ Flex labs. No explanation or tutorial though, only the source

  8. Mnyghtee on December 29th, 2008 12:41 pm

    I have tweaked your game design slightly so that each matching pair is a picture and the word for that picture. (I used Math.floor / 2)

    Also, I made it a 5X5 board with a wild card.

    I have been trying and failing to make the wild card work. Any suggestions?

    Basically, I need a function that will find the other match when the wild card is picked then remove all three cards.

    Thanks

  9. Gaz on January 29th, 2009 6:57 pm

    I was wondering how it would be possible to create a seperate AS file for different amount of colors.
    F.E. I want to create 3 different difficulties, I’d create 3 actionscript files that link to the corresponding movieclip. And then in the main AS file that is linked to the document class I’d be able to click on the difficulty.

    How would I go about doing this?

  10. aimy on February 6th, 2009 7:32 am

    how to match 2 different objects,like color box and its name.how i can use ths to create matching game in flash8.
    Thanks

  11. RmPR on March 12th, 2009 8:13 am

    Does anyone know how I could insert video into the game… I was hoping to assign a video to each of the 8 cards and for each time the cards were matched the corresponding video would appear and afterwards return to the game.

    Thanks

  12. Jessie on April 7th, 2009 7:40 pm

    Great tutorial, I downloaded the source files and I started working from scratch. I am trying to make the tiles bigger. When I make them all the same size & then play the movie they are all different sizes. How do I make sure they are all 150×150 regardless?

  13. stephen on April 16th, 2009 5:37 pm

    Awesome Scripting for the Card Game…nice and simple Emanuelle!

    ~Any feedback on how I can remove all the cards?…I created a function with this code but it only removes the one card?

    tried:

    removeChild(tile);

    ~any ideas much appreciated!

    sincerely Stephen!

  14. Lehoa on May 6th, 2009 6:11 pm

    Wow this is amazing Emanuele!
    (Not sure if you will read this :-(

    I’ve been trying desperately to make a matching interaction that only matches cards across a row. I’ve got text underneath the tiles which I have set an alpha to so that I can stress to my students that reading across the row is very important.

    That is, I would like to change this var

    var random_card = Math.floor(Math.random()*colordeck.length);

    and it’s functions to state tiles in row 1 only, tiles in row 2 only, etc. Can I somehow do this using your code by specifying the row?

    Can you or anyone else help with this?

    Thank you dearly,

    Lehoa

  15. Paul on May 28th, 2009 3:11 pm

    I downloaded the Fla file, but when i open it in Flash CS4 I am upable to edit it and often it will crash flash. How to I edit the fla file?

  16. Andy on July 10th, 2009 7:00 pm

    I was just wondering, what steps would I take if I wanted to move the entire array to a different position on the stage? (I wanted to use this class as part of a larger interface, 1024×768) The positioning loop is confusing me, I figured I would just change the x and y position of the first tile, but it just seems to push all subsequent tiles off the screen. Thanks.

  17. Carlos Zambrano on July 13th, 2009 6:06 pm

    Hi, you work its amazing, thanks for sharing them. How can i do to show a message after u choise a pair? i like to show a different message for each color… Thanks for sharing your work and for your time.

  18. Andy on July 15th, 2009 5:30 pm

    Nevermind on my question, I am new to actionscript and my math is pretty terrible, but I figured it out!

  19. Karen on September 15th, 2009 4:04 am

    Thank you for this script, it’s really great. I wanted to make a memory game, but I’ve only used Flash a little and never really done any actionscript. I tried several other tutorials before this one and I couldn’t figure them out. But your code was so clean and straight-forward I was able to make the game and tweak it to feed my needs. (I made it as a vocabulary exercise for foreign language study.)

  20. Karen on September 15th, 2009 4:30 am

    I would like to add a scoring device to it, though. Have you got any tutorials that could help me with that?

    Thanks again for the great tutorial.

  21. Rebecca on September 23rd, 2009 1:10 pm

    Thanks for a great tutorial! Its simple and easy to do! I’m creating a series of games for primary school children so I put in pictures instead of colour and added sound so that there’s an applause everytime they make a correct match. Thanks again!

  22. Lisa on November 16th, 2009 2:13 am

    Yet one more question. How would one add individual sound to each card? As in when the yellow card shows, the audio “yellow” would play, then play “red” for the red color, etc?

    Thanks for this tutorial. It’s very helpful!

  23. wendy on January 5th, 2010 8:08 am

    please help me? im experiencing some problem. i should copy the actionscript code to where? i tried creating a new folder for the code. but when i play the document i couldnt get the output.

Leave a Reply




flash games company