ACCUEIL
Contact
Rechercher
Insérez dans vos
  favoris

ACCUEIL DES
  VISITEURS

DATE & HEURE
EFFETS DE TEXTE
FENETRES
FORMULAIRES
IMAGES
MENUS
PRATIQUE
POP UP
DIVERS

Cours de javascript
Générer vos Fichiers
  CSS

Générer vos Meta-Tags
Description des Balises
  Meta

Les Codes Couleur
L'objet Math
Lissage De Prêt
Tableau d'Amortissement
un Multi-Moteurs de recherche sur Votre Site
Cryptez votre e-mail
  pour contrer le Spam

Cryptez vos Scripts
Moteurs de recherches
Référencement
Je Crée Mon Site
L'éditeur JavaScript


Le Jeu de Memory

Un jeu bien connu, qui consiste à retrouver des paires dans un jeu de cartes dont la face est cachée.

Le jeu indexant les images dans l'ordre où elles sont affiché sur la page, La page ne doit pas contenir d'autre image (à la rigueur après le jeu).

Par contre, vous pouvez l'intégrer dans une autre page (comme ici) en l'ouvrant dans une IFRAME :
<IFRAME src="memory.htm" name="memory" height="500" width="560"></IFRAME>

Vous pouvez aussi l'ouvrir dans une Pop Up.

Quelques exemples ici

Insérez le code ci-dessous dans l'entête de votre page (entre les balises<head> ... </head>)

<script language="JavaScript">
<!--
//PLF- /
function nb_aleatoire(nb)
{
nombre= Math.floor(Math.random() * nb)+1;
}

// variables*********
nbc=12 //nombre de cartes multiple de 4
non_im="imag" //début du nom des image => nomimage(n°).gif
// n°= 00 image vide ou transparente - 0 dos carte - de 1 à 6 pour 12 cartes (6 paires)
// il faut aussi une image gagne.gif

tirage = new Array;//tirage aléatoire
place = new Array;
choix=0;nbim2=0;nbim3=0;
choixim=1
gain=0;
nombres="";
divs=nbc/2;
nb=nbc+1;
cpt=0;

for (i=1 ;i<nb ;i++)
{
nb_aleatoire(nbc);
tirage[i]= nombre;
for (t=1 ; t<i ;t++){
if (tirage[t]==nombre)
{
i=i-1;
}}}
for (i=1 ;i<nb ;i++)
{
if (tirage[i]>divs) nbtire=tirage[i]-divs;
else nbtire=tirage[i];
place[i]=nbtire;
}


function change_im(nbim) { //
if (place[nbim] !=0) {
if (nbim==nbim2) nbim=0;
else{
if (nbim==nbim3) nbim=0;
else{
if (choixim==3)
{
if (val1==val2) {efface(nbim2);efface(nbim3);gain++;}
else {no_efface(nbim2);no_efface(nbim3);}
choixim=1;nbim3=0
}
if (choixim==1) {nbim2=nbim;val1=place[nbim];choix++;}
if (choixim==2) {nbim3=nbim;val2=place[nbim];}
choixim++;
}}
document.images[nbim-1].src = non_im+place[nbim]+".gif";
if (choixim==3){if (gain==divs-1) {
setTimeout("efface(nbim2);efface(nbim3);document.images[1].src = 'gagne.gif';",500);gain++;
}}
document.form1.result.value = choix
}}

function efface(eff) {
document.images[eff-1].src = non_im+"00.gif";
place[eff]=0}

function no_efface(eff) {
document.images[eff-1].src = non_im+"0.gif";}

//-->
</script>

nbc=12 : Indiquez le nombre de cartes du jeu (multiple de 4)
Si vous avez 6 images, donc 6 paires, il y a 12 cartes.

non_im="imag" indiquez le début du nom des image, vos images devant toutes avoir le même début suivant de leur numéro. Les images doivent aussi être toutes de la même taille.
Exemple avec imag nomimage(n°).gif
imag00.gif =>image transparente ou couleur du fond de la page
imag0.gif =>image du dos des carte
imag1.gif, imag2.gif, ..., imag6.gif => pour 12 cartes (6 paires).

Il faut aussi une image gagne.gif, qui s'affiche à la fin du jeu.

Vous pouvez récupérez les images du jeu en bas de page.

Ensuite insérez le code ci-dessous dans la balise <body>

<script language="JavaScript">
<!--
//PLF- /
document.write('<table border="0" align="center">');
for (i=1 ;i<(nbc/4)+1 ;i++){
document.write('<tr>');
for (t=1 ;t<5 ; t++){
cpt++;
document.write('<td><a href="#" onClick="change_im('+(cpt)+')"><img src="'+non_im+'0.gif" width="99" height="99" border="0"></a></td>');
}
document.write('</tr>');
}
document.write('</table><p>&nbsp;</p>'+
'<form name="form1">'+
'<table width="520" border="0" align="center" bgcolor="#99FFFF">'+
'<tr><td width="200" align="center">'+
'Nombre de coups '+
'<input name="result" type="text" id="result2" size="5">'+
'</td><td width="100" align="center">'+
'<input type="button" name="Submit" onClick="window.location=\'memory.htm\'" value="Rejouer">'+
'</td><td align="center">'+
'<input type="button" name="Submit" onClick="window.location=\'../index.htm\'" value="Quiter">'+
'</td></tr><tr>'+
'<td colspan="3">Le but du jeu est de retourner '+
'les cartes 2 par 2, afin de trouver les cartes identiques</td>'+
'</tr></table></form>');
//-->
<!--//PLF- / //-->
</script>

memory.htm : Indiquez le nom sous lequel vous avez nommé la page où se trouve le jeux

../index.htm : Indiquez le chemin et le nom du fichier à ouvrir en quittant.
Supprimez la ligne suivante, si vous placez le jeu dans une iframe ou une popup :
'<input type="button" name="Submit" onClick="window.location=\'../index.htm\'" value="Quiter">'+

Faire un clique droit sur chaque image, choix" Enregistrer l'image sous..."

l'image transparente est entre le 1 et le 2

Ce site vous a plu ? Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur votre site

 
 
Mon javascript    08-07-2018