Comment faire un 'photo memory' ?

Comment créer un jeu de paires (ou photo memory) sur son site ?
 

Il suffit de copier/coller ce code javascript sur son site (dans un message par exemple) et de remplacer back.gif par l'adresse http:// de l'image qui servira de couverture des cartes et de changer img0.gif, img1.gif, img2.gif , img3.gif , ... , img14.gif par les adresses des images que vous souhaitez utiliser sur les cartes (les images à trouver). La taille des images est réglée sur 100 pixels de large par 100 pixels de haut par défaut. Il est possible de changer la taille des cartes en changeant les attributs width et height (présents deux fois) mis en évidence dans le code ci-dessous:

<script type="text/javascript">
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="100" height="100" 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="100" height="100" 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);}

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>');
</script>

Démonstration