Comment faire un jeu de mémoire en javascript ?

 

par meltech1 |

     

Dans cet article nous allons faire un jeu de mémoire pour votre site Internet. La programmation, c'est aussi se détendre avec des jeux que vous pouvez faire vous-même. Avec javascript c'est un langage qui sert même à faire des jeux. Le but de ce jeu de mémoire est de retouver les paires d'images jusqu'à ce que vous ayez découvert toutes les cartes. Voici comment faire.

Quelles sont les fournitures nécessaires ?

  • 12 images .gif
  • Une image neutre .gif
  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet pour en obtenir le code source. C'est dans ce programme qu'il y a les balises. Veuillez y chercher la balise <head>. Vous devez enregistrer vos images sous le nom mem_0.gif à mem_11.gif pour qu'elles soient compilées par le programme. L'image neutre qui sert à afficher l'autre face d'une image doit se nommer couple_cache.gif. Ce doit donc être une simple image sans rien dessus du même format que les autres. D'ailleurs toutes les images doivent être du même format. Mettez toutes les images dans un répertoire / images.

2.

Dans la balise <head> veuillez insérer le script suivant :
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
imgLoaded = 0;
CountAffichImg = new Array;
PathImg = new Array;
PassVerif = 0;
ImgRecord = new Array;
a1 = new Image;
a2 = new Image;
a2.src = 'images/couple_cache.gif';
function loadImg()
{
a1.src = "images/mem_1.gif";
CountImg();
a1.src = "images/mem_2.gif";
CountImg();
a1.src = "images/mem_3.gif";
CountImg();
a1.src = "images/mem_4.gif";
CountImg();
a1.src = "images/mem_5.gif";
CountImg();
a1.src = "images/mem_6.gif";
CountImg();
a1.src = "images/mem_7.gif";
CountImg();
a1.src = "images/mem_8.gif";
CountImg();
a1.src = "images/mem_9.gif";
CountImg();
a1.src = "images/mem_0.gif";
CountImg();
a1.src = "images/mem_10.gif";
CountImg();
a1.src = "images/mem_11.gif";
CountImg();
RandomMem('i11',11);
RandomMem('i12',12);
RandomMem('i13',13);
RandomMem('i14',14);
RandomMem('i15',15);
RandomMem('i16',16);
RandomMem('i21',21);
RandomMem('i22',22);
RandomMem('i23',23);
RandomMem('i24',24);
RandomMem('i25',25);
RandomMem('i26',26);
RandomMem('i31',31);
RandomMem('i32',32);
RandomMem('i33',33);
RandomMem('i34',34);
RandomMem('i35',35);
RandomMem('i36',36);
RandomMem('i41',41);
RandomMem('i42',42);
RandomMem('i43',43);
RandomMem('i44',44);
RandomMem('i45',45);
RandomMem('i46',46);
document.messMem.mess.value = "Maintenant, retrouvez les paires...";
}
function CountImg()
{
PathImg[imgLoaded] = a1.src;
CountAffichImg[imgLoaded] = 0;
CountAffichImg[imgLoaded+12] = 0;
imgLoaded++;
return(true)
}
function RandomMem(imgName,ImgNb)
{
ImgTemp = Math.round(Math.random() * 11);
while (CountAffichImg[ImgTemp]>=2)
{
ImgTemp = Math.round(Math.random() * 11);
}
ImgRecord[ImgNb] = PathImg[ImgTemp];
CountAffichImg[ImgTemp]++;
return(true);
}
count = 0;
gagne=0;
function AddClic(ImgNb,ImgName)
{
if (PassVerif == 0)
{
if (ImgName.src != a2.src)
{
alert('Cette images est déja retournée');
}
else
{
ImgName.src = ImgRecord[ImgNb];
count++;
ImgNamey = ImgName;
if (count == 1)
{
ImgNb1=ImgNb;
ImgNamex=ImgNamey;
ImgURL1=ImgRecord[ImgNb];
}
else
{
PassVerif=1;
if (ImgRecord[ImgNb] == ImgURL1)
{
gagne++;
if (gagne > 1) s="s";
else s="";
document.messMem.mess.value = gagne + ' paire' + s + ' trouvée';
PassVerif = 0;
count=0;
if (gagne==12)
{
document.messMem.mess.value = "Bravo, vous avez gagné!!!!"
}
}
else
{
document.messMem.mess.value = "Ce n'est pas une paire";
tempoMem2 = setTimeout("ImgNamey.src='images/couple_cache.gif';ImgNamex.src='images/couple_cache.gif';document.messMem.mess.value = 'Trouvez les paires';PassVerif = 0;", 1200);
count=0;
}
}
}
}
}
ThisPage = location.href;
</SCRIPT>
<!-- FIN DU SCRIPT -->.

3.

Maintenant veuillez enregistrer le script suivant dans la balise <body> :
<!-- DEBUT DU SCRIPT -->
<CENTER><A HREF="#" onClick="AddClic(11,i11);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i11 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(12,i12);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i12 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(13,i13);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i13 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(14,i14);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i14 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(15,i15);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i15 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(16,i16);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i16 HSPACE=15 VSPACE=5 BORDER=0></A><BR>
<A HREF="#" onClick="AddClic(21,i21);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i21 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(22,i22);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i22 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(23,i23);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i23 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(24,i24);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i24 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(25,i25);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i25 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(26,i26);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i26 HSPACE=15 VSPACE=5 BORDER=0></A><BR>
<A HREF="#" onClick="AddClic(31,i31);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i31 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(32,i32);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i32 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(33,i33);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i33 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(34,i34);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i34 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(35,i35);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i35 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(36,i36);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i36 HSPACE=15 VSPACE=5 BORDER=0></A><BR>
<A HREF="#" onClick="AddClic(41,i41);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i41 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(42,i42);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i42 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(43,i43);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i43 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(44,i44);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i44 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(45,i45);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i45 HSPACE=15 VSPACE=5 BORDER=0></A><A HREF="#" onClick="AddClic(46,i46);return(false)"><IMG SRC="images/couple_cache.gif" WIDTH=60 HEIGHT=50 NAME=i46 HSPACE=15 VSPACE=5 BORDER=0></A><BR>
<FORM NAME="messMem"><INPUT TYPE=text SIZE=60 NAME="mess" VALUE="Chargement de jeu. Veuillez patienter..."><INPUT TYPE="button" NAME=reco VALUE="Recommencer" onClick="location.href=ThisPage"></FORM></CENTER>
<SCRIPT LANGUAGE="JavaScript">
loadImg()
</SCRIPT>.

4.

Pour terminer enregistrez le tout avec "bloc notes" et ouvrez avec IE. Maintenant amusez-vous bien !

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on