Add the Concentration Memory Game to Your Web Page

The classic Concentration game in easy-to-add JavaScript code

Here is a version of the classic memory game that allows visitors to your web page to match images in a grid pattern using JavaScript.

Supplying the Images

You will have to supply the images, but you can use whatever images you like with this script as long as you own the rights to use them on the web. You will also have to resize them to 60 pixels by 60 pixels before you start.

You will need one image for the back of the "cards" and fifteen for the "fronts." 

Make sure that the image files are as small as possible or the game may take too long to load. With this version I have limited the script to 30 cards as all of the images will make the page a lot slower to load. The more cards and images the page has the slower the page is going to load. This may not be a problem for those with good broadband connections, but those with slower connections may become frustrated by the time it takes.

What Is the Concentration Memory Game?

If you haven't played this game before, the rules are very simple. There are 30 squares, or cards. Each card has one of 15 images, with no image appearing more than twice—these are the pairs that will be matched.

The cards begin "face down," concealing the images on the 15 pairs.

The object is to turn up all of the matching pairs in as short a time as possible. 

Play starts by you selecting one card, and then selecting a second.

If they are a match, they remain face up; if they do not match, the two cards are turned back over, face down. As you play, you will need to rely on your memory of previous cards and their locations in order to make successful matches.

How This Version of Concentration Works

In this JavaScript version of the game, you select cards by clicking on them.

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.

There is a time counter at the bottom that 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 tableau will be reshuffled and you can start again.

The images used in this sample do not come with the script, so as mentioned, you will have to provide your own. If you don't have images to use with this script and are unable to create your own, you can search for suitable clipart that is free to use.

Adding the Game to Your Web Page

The script for the memory game is added to your web page in five steps. 

Step 1: Copy the following code and save it in a file named memoryh.js. 

// Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice

var back = 'back.gif';
var tile = ['img0.gif','img1.gif','img2.gif','img3.gif','img4.gif','img5.gif',
'img6.gif','img7.gif','img8.gif','img9.gif','img10.gif','img11.gif',
'img12.gif','img13.gif','img14.gif'];

function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im = []; for
(var i = 0; i < 15; i++) {im[i] = new Image(); im[i].src = tile[i]; tile[i] =
'<img src="'+tile[i]+'" width="60" height="60" alt="tile" \/>'; tile[i+15] =
tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML =
'<div onclick="disp('+i+');return false;"><img src="'+back+'" width="60"
height="60" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload=start; function start() {for (var i = 0; i <= 29 ;i++)
displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd
);cntr(); tid = setInterval('cntr()', 1000);} function cntr() {var min =
Math.floor(tmr/60);var sec = tmr%60;document.getElementById('cnt').value =
min+':'+ (sec<10 ? '0' : '') + sec;tmr++;} function disp(sel) {if (tno>1)
{clearTimeout(cid); conceal();}document.getElementById('t'+sel).innerHTML =
tile[sel];if (tno==0) ch1 = sel;else {ch2 = sel;  cid = setTimeout('conceal()',
900);}tno++;} function conceal() {tno = 0; if (tile[ch1] != tile[ch2])
{displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15)
clearInterval(tid);}

You will replace the image file names for back and tile with the file names of your images.

Remember to edit your images in your graphics program so that they are all 60 pixels square so that they don't take too long to load (the combined size of the 16 images used for my example is just 4758 bytes so you should have no problem keeping the total under 10k).

Step 2: Select the code below and copy it into a file called memory.css.

.blk {width:70px;height:70px;overflow:hidden;}

Step 3: Insert the following code into the head section of your web page's HTML document to call the two files you just created.

<script type="text/javascript" src="memoryh.js">
</script>
<link rel="stylesheet" href="memory.css" type="text/css" />

Step 4: Select and copy the code below, and then save it into a file called memoryb.js.

// Concentration Memory Game with Images - Body Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice

document.write('<div align="center"><table cellpadding="0" cellspacing="0"
border="0">');for (var a = 0; a <= 5; a++) {document.write('<tr>');for (var b =
0; b <= 4; b++) {document.write('<td align="center" class="blk"
id="t'+((5*a)+b)+'"></td>');}document.write('<\/tr>');}document.write('<\/table>
<form name="mem"><input type="button" id="cnt" value="0:00"
onclick="window.start()" \/><\/form><\/div>');

Step 5: Now all that remains is to add the game onto your web page where you want it to appear by inserting the following code into your HTML document.

<script type="text/javascript" src="memoryb.js">
</script>