Om het memory spel op jouw website te laten functioneren moet je onderstaande code in de body-sectie van jouw pagina plaatsen. De div dáár waar je het spel wilt laten zien en het javascript zo laag als mogelijk in de body-sectie. De memory-plaatjes zitten in een zip-file. Copy/paste http://kompoos.nl/javascripts/games/memory.zip in jouw browser om ze te downloaden. Gebruik deze plaatjes of maak jouw eigen afbeeldingen. Het script is foutloos volgens de JSLint-validator.
<div id="memory"></div>
<script>
/*global alert: false */
var memory_plaatjes = [],
i, x, z, r, c, y;
for (i = 0; i <= 18; i++) {
memory_plaatjes[i] = new Image();
memory_plaatjes[i].src = 'memory_plaatje_' + i + '.png';
}
var memory_map = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18];
var user = [];
var tijdelijke_array = [];
var klik_array = [0, 0];
var ctr,
id,
klik_toegestaan,
ticker,
seconde,
minuut,
memory_game_klaar;
function memory_scramble() {
for (z = 0; z < 5; z++) {
for (x = 0; x <= 35; x++) {
tijdelijke_array[0] = Math.floor(Math.random() * 36);
tijdelijke_array[1] = memory_map[tijdelijke_array[0]];
tijdelijke_array[2] = memory_map[x];
memory_map[x] = tijdelijke_array[1];
memory_map[tijdelijke_array[0]] = tijdelijke_array[2];
}
}
}
function de_speel_tijd() {
minuut = Math.floor(ticker / 60);
seconde = (ticker - (minuut * 60)) + '';
if (seconde.length == 1) {
seconde = "0" + seconde;
}
ticker++;
document.f.b.value = minuut + ":" + seconde;
id = setTimeout(function() {
de_speel_tijd();
},
1000);
}
function init_memory() {
clearTimeout(id);
for (i = 0; i <= 35; i++) {
user[i] = 0;
}
ticker = 0;
minuut = 0;
seconde = 0;
ctr = 0;
klik_toegestaan = true;
memory_game_klaar = 0;
document.f.b.value = "";
memory_scramble();
de_speel_tijd();
for (i = 0; i <= 35; i++) {
document.f[('img' + i)].src = "memory_plaatje_0.png";
}
}
function geef_terug() {
if ((klik_array[0] == klik_array[1]) && (!user[klik_array[0]])) {
document.f[('img' + klik_array[0])].src = "memory_plaatje_0.png";
klik_toegestaan = true;
} else {
if (memory_map[klik_array[0]] != memory_map[klik_array[1]]) {
if (user[klik_array[0]] === 0) {
document.f[('img' + klik_array[0])].src = "memory_plaatje_0.png";
}
if (user[klik_array[1]] === 0) {
document.f[('img' + klik_array[1])].src = "memory_plaatje_0.png";
}
}
if (memory_map[klik_array[0]] == memory_map[klik_array[1]]) {
if (user[klik_array[0]] === 0 && user[klik_array[1]] === 0) {
memory_game_klaar++;
}
user[klik_array[0]] = 1;
user[klik_array[1]] = 1;
}
if (memory_game_klaar >= 18) {
alert('Je deed het in ' + document.f.b.value + ' !');
} else {
klik_toegestaan = true;
}
}
}
function show_plaatje(knop) {
if (klik_toegestaan) {
klik_toegestaan = false;
document.f[('img' + knop)].src = 'memory_plaatje_' + memory_map[knop] + '.png';
if (ctr === 0) {
ctr++;
klik_array[0] = knop;
klik_toegestaan = true;
} else {
klik_array[1] = knop;
ctr = 0;
setTimeout(function() {
geef_terug();
},
600);
}
}
}
var tekstregel = '<form action="" name="f">';
for (r = 0; r <= 5; r++) {
tekstregel = tekstregel + '<tr>';
for (c = 0; c <= 5; c++) {
tekstregel = tekstregel + '<td align="center">';
tekstregel = tekstregel + '<a href="javascript:show_plaatje(' + ((6 * r) + c) + ')" onClick="document.f.b.focus()">';
tekstregel = tekstregel + '<img src="memory_plaatje_0.png" name="img' + ((6 * r) + c) + '" border="0">';
if (c == 5) {
tekstregel = tekstregel + '<br />';
}
tekstregel = tekstregel + '</a></td>';
}
tekstregel = tekstregel + '</tr>';
}
tekstregel = tekstregel + '<br /><input type="button" class="veldje" value="klik hier om te beginnen" name="b" onClick="init_memory()">';
tekstregel = tekstregel + '</form>';
document.getElementById("memory").innerHTML = tekstregel;
</script>