Email

Filed In:

JavaScript

Concentration Memory Game With Images

2. Get the Script

More of this Feature

The script for the memory game is in three parts. The first two part go in the head section of your web page. The first step is to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called memoryiu.js.

// Unobtrusive Concentration Memory Game with Images
// copyright Stephen Chapman, 28th February 2006, 29th December 2008
// you may copy this script provided that you retain the copyright notice

var back = 'graphics\/back.gif';
var tile = ['graphics\/img0.gif','graphics\/img1.gif','graphics\/img2.gif',
'graphics\/img3.gif','graphics\/img4.gif','graphics\/img5.gif',
'graphics\/img6.gif','graphics\/img7.gif','graphics\/img8.gif',
'graphics\/img9.gif','graphics\/img10.gif','graphics\/img11.gif',
'graphics\/img12.gif','graphics\/img13.gif','graphics\/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=begin1; function begin1() {createGame('memory'); begin();} function begin() {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);} function createGame(nm) {var d = document.createElement('div');d.align = 'center';var t = document.createElement('table');t.cellpadding = 0;t.cellspacing = 0;t.borders = 0;for (var a = 0; a <= 5; a++) {t.insertRow(a);for (var b = 0; b <= 4; b++) {t.rows[a].insertCell(b);t.rows[a].cells[b].className = 'blk';t.rows[a].cells[b].id = 't'+((5*a)+b);t.rows[a].cells[b].align = 'center';}}d.appendChild(t);var f = document.createElement('form');f.id = 'mem';var bt = document.createElement('input');bt.type = 'button';bt.id = 'cnt';bt.value = '0.00';bt.onclick = begin;f.appendChild(bt);d.appendChild(f);document.getElementById(nm).appendChild(d);}

Next select the code from the text box below and copy it into a file called memoryi.css.

You next attach these into the head section of your page.

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

Now all that remains is to add the following HTML into the body of your page where you want the game to appear.

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

Stephen Chapman

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

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 >

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

All rights reserved.