Voici une version du jeu de mémoire classique qui permet aux visiteurs de votre page Web de faire correspondre des images en quadrillage à l'aide de JavaScript.
Fourniture des images
Vous devrez fournir les images, mais vous pouvez utiliser toutes les images que vous aimez avec ce script tant que vous possédez les droits de les utiliser sur le Web. Vous devrez également les redimensionner à 60 pixels par 60 pixels avant de commencer.
Vous aurez besoin d'une image pour le dos des "cartes" et quinze pour les "fronts".
Assurez-vous que les fichiers image sont aussi petits que possible ou le jeu peut prendre trop de temps à charger. Avec cette version, j'ai limité le script à 30 cartes car toutes les images rendront la page beaucoup plus lente à charger. Plus la page contient de cartes et d'images, plus la page sera lente à charger. Cela peut ne pas être un problème pour ceux qui ont de bonnes connexions à large bande, mais ceux qui ont des connexions plus lentes peuvent être frustrés par le temps qu'il faut.
Qu'est-ce que le jeu de mémoire de concentration?
Si vous n'avez jamais joué à ce jeu auparavant, les règles sont très simples. Il y a 30 carrés ou cartes. Chaque carte a l'une des 15 images, aucune image n'apparaissant plus de deux fois - ce sont les paires qui seront appariées.
Les cartes commencent «face cachée», dissimulant les images sur les 15 paires.
Le but est de faire apparaître toutes les paires correspondantes en un temps aussi court que possible.
Le jeu commence en sélectionnant une carte, puis en sélectionnant une seconde. S'ils correspondent, ils restent face visible; s'ils ne correspondent pas, les deux cartes sont retournées, face cachée. Pendant que vous jouez, vous devrez vous fier à votre mémoire des cartes précédentes et à leur emplacement pour réussir les matchs.
Fonctionnement de cette version de concentration
Dans cette version JavaScript du jeu, vous sélectionnez des cartes en cliquant dessus. Si les deux que vous sélectionnez correspondent, ils resteront visibles, sinon, ils disparaîtront à nouveau au bout d'une seconde environ.
Il y a un compteur de temps en bas qui suit le temps qu'il vous faut pour faire correspondre toutes les paires.
Si vous voulez recommencer, appuyez simplement sur le bouton du compteur et l'ensemble du tableau sera remanié et vous pourrez recommencer.
Les images utilisées dans cet exemple ne sont pas fournies avec le script, donc comme mentionné, vous devrez fournir les vôtres. Si vous ne disposez pas d'images à utiliser avec ce script et que vous ne parvenez pas à créer les vôtres, vous pouvez rechercher des images clipart appropriées et gratuites.
Ajout du jeu à votre page Web
Le script du jeu de mémoire est ajouté à votre page Web en cinq étapes.
Étape 1: Copiez le code suivant et enregistrez-le dans un fichier nommé memoryh.js.
// Jeu de mémoire de concentration avec images - Head Script
// copyright Stephen Chapman, 28 février 2006, 24 décembre 2009
// vous pouvez copier ce script à condition de conserver l'avis de copyright
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'];
fonction randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; pour
(var i = 0; i <15; i ++) {im [i] = new Image (); im [i] .src = tile [i]; tuile [i] =
''; tuile [i + 15] =
tile [i];} function displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; fonction 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 ++;} fonction disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
tuile [sel]; if (tno == 0) ch1 = sel; else {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} fonction conceal () {tno = 0; if (tuile [ch1]! = tuile [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; si (cnt> = 15)
clearInterval (tid);}
Vous allez remplacer les noms des fichiers image pour retour et tuile avec les noms de fichiers de vos images.
N'oubliez pas de modifier vos images dans votre programme graphique afin qu'elles soient toutes de 60 pixels carrés afin qu'elles ne prennent pas trop de temps à charger (la taille combinée des 16 images utilisées pour mon exemple n'est que de 4758 octets donc vous ne devriez avoir aucun problème à garder le total sous 10k).
Étape 2: Sélectionnez le code ci-dessous et copiez-le dans un fichier appelé memory.css.
.blk {largeur: 70px; hauteur: 70px; débordement caché;}
Étape 3: Insérez le code suivant dans la section d'en-tête du document HTML de votre page Web pour appeler les deux fichiers que vous venez de créer.
Étape 4: Sélectionnez et copiez le code ci-dessous, puis enregistrez-le dans un fichier appelé memoryb.js.
// Jeu de mémoire de concentration avec images - Body Script
// copyright Stephen Chapman, 28 février 2006, 24 décembre 2009
// vous pouvez copier ce script à condition de conserver l'avis de copyright
document.write (''); pour (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
Étape 5: Il ne reste plus qu'à ajouter le jeu sur votre page Web où vous souhaitez qu'il apparaisse en insérant le code suivant dans votre document HTML.