First game: Memory

I decided to make games with Phaser and document my journey all the way. In my previous article I wrote that the first game should be a cards game. My first game with Phaser was a cards game, but I thought that for a newbie my first game can be too hard to understand, so today I would like to present to you another card game, much more simple.

But at first let me give you a question: can games teach you a foreign language?

I believe that they can.

I guess, that you all played memory game atleast once in your life. Just to be clear. There are a lot of cards on the table. There is always an even number of the cards. First, you open one card and then you open the second card. If cards mach some magic effect happens, if cards are different they are closed (reverted to the previous state). The game is played till all cards are matched. It is hard to think of the simpler rules for the game.

Before diving into code, I want you to think about one more thing. What if we add words to the cards? The images on the cards are the same, but the words are different. On one card the words are in your native language, on the second card the words are in the language you want to learn. Would that help to learn the language?



At this point I am hoping that you know what is Phaser (already downloaded it) and want to write your first game.

There are several ways to define the main function and I like the one you can find in the official tutorial:

There are a few important things to know.

First: 288, 394 is the size of the game. You can choose the size you want.


Second: 'game' is the id of HTML div in which the game will be loaded. It is wise to load game into div and not the whole page for many reason e.g. you want to place a banner above and below the game, of course, you can think of better reasons for placing game into div.

Third: { preload: preload, create: create} are standard functions of the framework that we will use. There are more than two functions in the framework, but in such small game we do not need more.

We start with preload function and the first thing we want to do is to load background image.

I guess there is no need for more explanation here. Now lets load the cards:


See the difference? Let me explain. Instead of loading each cards as a separate object (that would be a pain), I load all cards in one sprite-sheet. The size of one card is 72, 96. I can access each card in the similar manner as array values: the first card in the file will have index 0; second 1 and so on.

I also use SVG instead PNG. Why? Because I can. There is no practical advantages as far as I know.

Do you want to make games only for Desktop or for Desktop and Mobile? If you have different screen sizes, you want your game automatically to adapt to them.

These two lines do the trick.

So we loaded images, now we have to show them and that is done in the create function.


This is straightforward: write coordinates where you want to place the object and the name of the object. Don’t forget that 0, 0 means top left corner. The same is done with the cards only we do it in cycle because there a lot of them.

Now lets talk some specifics about game logic. In the sample I made, the game is 4x4, so total 16 cards or 8 pairs. (Remember, all cards go in pairs?) But I drew 10 of them. So, at first we need randomly select which 8 of 10 will be displayed, then we have to mix the card that they would be displayed differently every time. This is boring stuff, if you know a little bit of coding, you can do this part yourself. Lets get to the interesting part, I called this function addHit.

frame is an image that is shown to the player; if card is not open, we want to show him a cover.

alpha means that the card is visible; it will be important later.

inputEnabled – user can click the card.


input.useHandCursor – we change the cursor style to indicate for the user that he can click it.

And the last line is most interesting: what happens when user clicks? We call another function.

As we have a function to add click, we also have a function to remove it. Basically it does the same only in reverse (not reverse order).


There is one more function I want to talk about. What happens if both cards are the same? A blink effect is shown.

This is done with the help of tween. tween is a library of various effects. As you can see in the code we change card visibility to zero. When blinking action is complete, we change card frame to empty card and remove ability to click the card.

So that’s all for the Phaser part of the game.




You can try demo here and download all the code here. Of course, it’s just a demo and not a complete game, it has no start screen, no scoring system, no levels.

If you have any questions feel free to email me pea@gopgames.eu and support me on Patreon.