1. Home
  2. Computing & Technology
  3. JavaScript

Concentration Memory Game

1. Introduction and Sample

clr gif
More of this Feature

Head Script Body Script

Have you heard of a game called "Concentration"? Perhaps you know it as the "Memory Game". You know the one where you have so many pairs of cards face down on the table and you turn over two of them at a time trying to match them up.

Now you can add a similar game onto your web page. Since there is only one player we can't determine a winner by who gets the most pairs so instead we will play against the clock.

There are other versions of this game elsewhere on the web but what makes this one different from the others is that it doesn't require any images, the whole thing is done using nothing more than HTML, a stylesheet, and a few Javascript statements.

Here is the memory game (Concentration) for you to try for yourself.

If you haven't played this game before the rules are very simple. There are 36 squares that conceal 18 pairs. You just select two squares. If the two you select match then they will remain visible, if they don't then they will disappear again after a second or so. The counter button at the bottom tracks how long it takes you to match all of the pairs. If you want to start over just press the counter button and the whole thing will be randomized for you to start over.

To add this game to your page you first need to obtain the head script.

Sample Page | Head Script | Body Script
Explore JavaScript
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.