NSI, entrainement js:jeu de memory

• Le mini-projet sera à faire en binôme ou en monôme.
• Il présentera une page html proposant 4 rangées de 5 cartes retournées.
  On pourra cliquer sur les images pour faire apparaître la figure qu’elles cachent.
• Si deux cartes identiques sont retournées successivement, elles restent retournées.
• Le jeu est fini lorsque toutes les cartes sont retournées.
  Barème :
  – une page html et une page css présentant le jeu : 5 points,
  – un fichier js permettant de gérer les interactions et le jeu :
  – 5 points : si lorsque l’on clique sur une image, on fait apparaître la figure cachée,
  – 5 points : si l’on clique successivement sur 2 images identiques, les figures restent retournées. Un compteur affiche le nombre de tours ( un tour consiste à retourner 2 cartes ),
  – 5 points : les cartes seront placées de manière aléatoire à chaque début de partie.

Aide :

Pour laisser un certain temps les cartes affichées avant de les retourner, on pourra utiliser la fonction js :

setTimeout(nom_fonction, 2000)
// 2000 désigne le temps en ms avant d'appeler la fonction nom_fonction() sous la forme d'une fonction anonyme

// on declare la disposition initiale du memory
var cartes=[1,2,0,1,3,3,4,8,9,2,7,4,5,6,6,5,8,9,0,7];
// on installe une variable pour savoir si on a cliqué
// sur la première carte ou la seconde
var carte=1;
// on installe une variable empechant de tricher
var bloque=false;
// un compteur de tour
var tour=0;
// on recupère des élèments par leurs id
var texte=document.getElementById("texte");
var mon_plateau=document.getElementById("plateau");
// on crée les images en leur attribuant une source
// et une id
for ( var i=0;i<20;i++){
	// on crée un elt image
	var mon_image=document.createElement("img");
	// on attribue source et id
mon_image.src="images/dos.jpg";
mon_image.id=i;
// on ajoute un ecouteur d'evenements
mon_image.addEventListener("mousedown",changer_image,false)
// on ajoute l'elt image au plateau
	mon_plateau.appendChild(mon_image);
}


function changer_image(evt){
	// on verifie si on peut cliquer sur la carte
	if ((this.getAttribute("src")=="images/dos.jpg")&&(bloque==false)){
		// si on clique sur une premiere carte
		if (carte==1){
			// on change la source de l'image
			this.src="images/"+cartes[this.id]+".jpg";
			// on memorise l'id de la carte
			id_image1=this.id;
			// on passe à la carte 2
			carte=2;
		}
		// si on a cliqué sur une seconde image
		else {
			// on modifie le nombre de tours
			tour=tour+1;
			// on modifie le texte dans le html
			texte.innerText="Tour : "+tour;
			// on retourne la carte en modifiant la source
			this.src="images/"+cartes[this.id]+".jpg";
			// on recupere l'image 1 et sa source
			img1=document.getElementById(id_image1);
			src_image1=img1.getAttribute("src");
			// si les deux images sont différentes
			// on empêche de cliquer et on attend 2000 ms avant
			// de les retourner
			if (src_image1!=this.getAttribute("src")){
				id_image2=this.id;
				bloque=true;
				setTimeout(on_retourne_image, 2000)
			}
			// on revient à la première carte
			carte=1;
		}
	}
}
// on retourne les deux images
function on_retourne_image() {
	img1=document.getElementById(id_image1);
	img2=document.getElementById(id_image2);
	img1.src="images/dos.jpg";
	img2.src="images/dos.jpg";
	bloque=false;
	
	
}