Concentration Game With Images

The memory game (sometimes also called "concentration") involves people taking it in turn to flip over two cards and showing them to everyone. If the two cards match they get to keep them and have another turn. If the cards don't match they put them back face down and the next person has a go. The idea is to remember where the cards previously turned over are so that when you turn over a new card that matches one already turned over that you can match them up. The person with the most cards at the end wins.

With this JavaScript version of the game you don't play against other people, you play against the clock, attempting to solve all the matches as quickly as possible. When you are ready to start just press the button at the bottom of the game and it will display the elapsed time since the start, with the timer stopping once all the cards are matched. As not everyone wanted to use the variant that I wrote that didn't require images and so this version works using whatever images you have that you want it to use. You can either have the script use two copies of each image to match the pairs of images or you can alternatively supply a second set of related images so as to require that each image be matched to a second different but related image.

To copy this game to use on your own web page involves just four simple steps. First simply copy the following CSS and attach it into the head of your page:

#memory .blk {overflow:hidden;}
#memory .card {margin:5px;padding:5px;}
#memory .back {cursor:pointer;}

Next place the following HTML where you want the game to appear in your page:

<div id="memory"></div>

Third, copy the following JavaScript and attach it to the bottom of your page immediately prior to the </body> tag:


Finally upload your images and update the entries at the end of the script to reference them. You can use whatever images you like with this script as long as you own the right to use them on the web and provided that you resize them all to the same size before you start (the ones shown above are 60 by 60).. You will need one image for the back of the "cards" and eighteen for the "fronts", if you want a related images version then you will need a second set of 18 images that are somehow each related to one of the images in the first set of eighteen. The image for the backs goes in the first parameter and the eighteen images for the fronts are entered as an array via the second parameter. For the related image version enter a third parameter as another array containing the related images in the order where each is related to the image at the corresponding position in the first set of images. Make sure that the image files are as small as possible or the game may take too long to load. If you want a different number of images instead of 18 then you may need to change the value assigned to 'wd' within the script so as to display a different number of images across the page.

That's all you need to do. The game should now work on your page for anyone with JavaScript enabled.

Note that this latest version of the game is not only unobtrusive, it also uses the new strict version of JavaScript.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow