Concentration Game

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. This particular variant doesn't use any images but instead uses CSS to generate the"cards" which have a grey back and yellow, blue, and pink fronts with the letters A through F on them.

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

#memory .blk {width:50px; height:50px; overflow:hidden;}
#memory .card {margin:5px ;padding:5px; width:40px; height:40px; border:solid 1px #f00; font:bold 14pt verdana,arial,sans-#memory serif;}
#memory .back {background:#ccc; font;cursor:hand;}
#memory .cf1 {background:#ff0; color:#00f;}
#memory .cf2 {background:#f9f; color:#00f;}
#memory .cf3 {background:#0cf; color:#c00;}

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

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

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


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