See you again friends :-)
Well, this time we’re going to create a little memory game... it can be a stand-alone game but also, especially thanks to his small dimensions ( < 2 kb!) it can also be an "interactive preloader" for bigger movies... and I think that this is his ideal use :-)
But stop talk... let’s go!

1 – The concept

First of all, we must establish what the player can or can’t do during the game, and how the game will interact with the user and his input. The general lines, and the general concept of this game, is simple

1) user click on a card
2) the card turn and show her symbol
3) user click on the 2nd card
4) the 2nd card show her symbol

Here the game must execute a control... if the cards are equals, the score must increase and the two cards must disappear, otherwise the score doesn’t increase and the cards turn again on their "backface". We must also put some "limitations" to the player... more specifically

- Once selected the 1st card, user can’t click again on it before next turn
- User can’t click on the 2nd card before the 1st has turned
- User must wait the control between 2 cards, he can’t discover more then 2 cards for turn

Those limitations are useful especially for avoid some "mistakes" or problems during the game... we’ll see more in detail during this tutorial.

Well, now we’ve established the general points, inputs and limitations of the game... it’s time to create it, come on!

2 – Setting up, what we need

All we need is love... ops... no, not for this game... now we need

- Flash
- A graphic program (for the "cards contents" creation)

Before start coding (yes, just coding... I haven’t yet told you that the game will be entirely in actionscript ? ;-)), we must create the cards images. In this example, I used 80x90 cards, with 70x80 images... you can make cards at every size you want... in fact the game will be entirely dynamic! It will automatic establish how many cards can be placed on the playground following the size we’ll specify in the code... it’s nice, isn’t it? :-)

Now place the images in "imgs" folder, at the same level of the .fla... the image can explain better the directory and file structure.

Well, in the "imgs" folder we have all the necessary images... now we can pass to flash... we’ve a lot to do with actionscript this time, are you ready? ;-)

3 – Flash and actionscript, the hearth of our game

As I said before, this game will be entirely made in actionscript... all the game will be composed of 130-140 lines of code. In fact, it’s a simple game with a simple structure and interaction... I’ll try to explain why we must put some limitations in this game (seen at point 1), also if the code tells almost all :-)
Let’s start!
First of all, set the canvas size at 550x400, and the framerate at 25 fps.
NOTE: When you test this movie, DON’T show the bandwidth profiler, because when it’s shown in the "test movie" window, the Stage.height action return wrong values (eg 300 instead 400, in our situation).

Ok ok don’t escape... now we’ll see it in smart pieces
First of all, the generateGameField() function also if it’s the last function in the code, it’s the "main function", in fact is the only that we call directly... here the same code with some comment for explain better...

It establish the X and Y position of the first card. Then, using a for() loop, it create (calling the createCard() function) all the cards, and place it on the gamefield... then it call the placeImages() function. Not hard, really?

Now the real core of the gamefield generation... createCard() and placeImages() functions.

Excluding the first line ( empty.push(n) ), that simply add at the "empty" array a number, that will be useful for the images placing (see it later), this function draw a card... We can’t use 4 simple lineTo(), because in that mode the movieclip center will be at the corner high left... while we want the center... at the center! (it’s necessary for the right card rotation). Than we use a more complex structure. Every card is structured as

- card
- front
- background
- container

Card is the movieclip the user will click and see at the start of the game... the "backface", we can call. While front has background (the "frontface" background) and container (where we’ll load the image). At the end, this function is simple... it create the backface and the frontface of every card... I think it isn’t useful explain every line, because they’re simply lineTo()... you can imagine what they do :-)

As we seen, the generateGameField() function calls the placeImages() function once the cards are created... as the name says, this function put the images into cards....we use the empty array (into we inserted data in the createCard() function, as said before) for know how cards are yet "empty".
The "mechanism" is simple. We take a number (eg 1), and put the image in "imgs/img"+n+".jpg" (eg imgs/img1.jpg) into two cards... and remove that cards from the "empty" array.

Act_img establish what image load... we start from img0.jpg, and go on since img is < imgs_n (that, as saw, it’s the number of images we need).

The loop for(k=0;k<2;k++) is useful for full TWO cards...it select a random card from that avaibles (empty.length tell us how many cards are avaible yet), than assign img_id at the card, and load the image into cardN.front.container.
The enterFrame() tell us when the image is loaded, then we can center the image in the card (see centerImage() function)
The onRelease() function is what the card will do once clicked by the user... and what it do? It call another function... rotateCard, then disable all the movieclips on the scene (in fact we said that once a card is clicked, the user must wait that it’s turned on her frontface before he can click the 2nd card). Well... see the rotateCard function...

How to explain it... hmm... simpy tell that when we pass 0,0 at the function, the image turn on her frontface, while we pass 1,1 she turn on her backface (we’ll pass 1,1 if the 2 cards selected by the user won’t be equals). At the end of the turning, all movieclips on the stage are enabled (then the user can select other cards).

Last (but absolutely not least!) function is checkCards(), that we call when selected.length > 1 (it simply means that the checkCards() function is called when the user has selected the 2 cards).
NOTE : this function wasn’t in the "big amount" of code before, you must paste it after the generateGameField() function :-)

It’s very simple... it check if the img_id of the 2 selected cards are equal. If true, it means that two cards contain the same image, then they can became invisible and the score must increase. Otherwise, the cards are different, then they must turn on their backface (in fact we call rotateCard with 1,1) and come back enabled.
In both situations, the array "selcards" (that must always contains only the names of the 2 selected card) is re-setted and all movieclips are enabled.
"punti" is a text field (created using createTextField()) that show the user score.

Well... we created a simple small game... .I haven’t inserted a "game over "events or similar, because I think that this game, for his weight less than 2 kb, is useful as "interactive preloader"... also because if we’d like to create a "standalone" memory we’d use a more beautiful graphics and other elements that will make the movie less light but more attractive

I hope you liked this small tutorial... and I also hope you understood the explanation, even if the code wasn’t too complex
See you next time... byez ;-)

Hello Broly,
Excellent code very clean and compact. However, I am having a little trouble with the rotateCard method. I have noticed within the game, when I click on more than two cards consecutively, one of the cards will often get stuck face up. I can't figure out what is causing this but, I think it is in the rotateCard method. Thank you in advance for you time and I really appreciate you posting the code for the game.
-Jimbo

How can I place some image on background of each card (when I create a card, I would like to place some image, not only colour. I would like to place the same image of each card, before I open that cards)?

In fact, as you can see in the code I posted, I create all the functions and at last I call generateGameField...because she's the "hearth" of the game

OK I see that, but how can I create a loop with generateGameField function so when there are no cards on the screen it starts again ?

Hi Breed, you can control the cards on the field and the number of couples: when you have found all cards, with a simple "if" statement you can start the game again calling the GenerateGameField function and setting all the vars to their initial state

well i'm quite new to flash and to Action Scripts.
i try this code of the memory game with my macromedia flash 8 and it doesn't work (attached is what i tried to do).

can someone please send me a working fla file of this game.

thanks in advance

meshorer.

hameshorer@gmail.com

Hi meshorer, the game is create with Flash Mx2004 and unluckly there are some differences between two versions in actionscript so the game probably doesn't work correctly in Flash 8.
Actually I'm very busy (in fact I'm replying with an huge late and I'm very sorry) but in future I'd try to re-create the game with Flash 8

Hello Broly,
Excellent code very clean and compact. However, I am having a little trouble with the rotateCard method. I have noticed within the game, when I click on more than two cards consecutively, one of the cards will often get stuck face up. I can't figure out what is causing this but, I think it is in the rotateCard method. Thank you in advance for you time and I really appreciate you posting the code for the game.
-Jimbo

You're right Jimbo, unluckly the rotateCard method is not perfect and has some problem, so in some situation it show something wrong.
As I wrote before, actually I'm very busy but in next future I should try to recreate the game improving it and making it compatible with Flash 8, then I'd post the new code