Memory game with jQuery and PHP

memory-game-02

In this example I'm going to shows you how to create a game of memory in which you will have to find 2 or more matching cards.
The idea is to use jQuery and PHP, jQuery to create the affects and handle the game it self , and php as server language to track the game.
I've also included a sqlite to save the scores and names.

The idea of the game is pretty simple, you will be able to choose from differents cards, every time you select one card, the card flip leting see an image on the other side , when you choose two cards on a roll with the same image you get a match and the cards disappear getting points for it. If the images are not the same , the cards flip again back, in that way you have to remember the images you saw in order to find the maching card at other place.
In future levels you need to match more that two cards, and the numbers of cards increase incrementing the dificulty.

About the code

The javascript code is the main part on this game, we need a several functions to address the games operations.
We defined the GAME variable as our namespace to put inside all the methods and properties needed by the game.

The main methods are :

GAME.start This method allows us to start the game , sending to the server a request in order to get a new set of random cards, we also se to 0 the score and others values at the end we draw the cards on the main page.

GAME.showCards Once the level is finished we need to show the images for every card, in that way you can see the final result as a clear flag you have finish the level.

GAME.deleteCards Every time you match two o more cards we need to remove the cards from the main page, in that way we reduce the number of visible cards that are selectable by the user.

GAME.backCards It put the cards back to the original state.

GAME.revertFlip It put the cards back using a revert effect.

GAME.saveName this function is used to save the user name when the user reach the top score.

GAME.showScoresList function used to show the top score list, just It take the list from the server and then it draw it on the page.

The function is executed when the user click over the card, in that case we are going to need to identify the card press, send a request to server, flip the card and check the results.
this function is attached to the click event on every card, you can see the function inside this declaration

$('.imagebox').live('click' ...

We use live instead of bind due we need to attach the method to future cards we are going to add on next levels.

For the flip effect , the best option is to use a very popular jQuery plugin (jQuery.flip) that is perfect for this problem , all we need to flip the card is just call the plugin an thats all.

When the users select two equals cards we need to show them something to indicate they get a match , so I decided to use an "OK" image that blink using and special plugin I made to this purpouse.

check the demo, download the code, and enjoy it.

Leave a comment


seven − = 1