Bonjour , je suis actuellement en train de faire un jeu de memory sous js mais j'ai quelques problèmes que je n'arrive pas à résoudre, notamment lorsque je veux retourner deux cartes qui ne sont pas identiques. Voici mon code html tout d'abord :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<style>
                .img{
                  background-repeat: no-repeat;
                  background-position: center center;
                  border: 0px solid gray;
                  cursor: pointer;
                  height: 200px;
                  width: 150px;
                }
        </style>
	<script type="text/javascript">
                document.oncontextmenu = new Function("return false");
                document.onmousemove = suitsouris;
        function suitsouris(evenement){
            if(navigator.appName=="Microsoft Internet Explorer")
                {
                    var x = event.x+document.body.scrollLeft;
                    var y = event.y+document.body.scrollTop;
                }else{
                    var x =  evenement.pageX;
                    var y =  evenement.pageY;
                }
                document.getElementById("image_suit_souris").style.left = (x+1)+'px';
                document.getElementById("image_suit_souris").style.top  = (y+1)+'px';
                }
        </script>
	<script type="text/javascript" src="memory.js"></script>
  <body>
    <input id="Rejouer" type="button" value="Jouer" onclick="distribuer()"><br/>
	<img id="c1" class="cartes" src="dos.png"></img><img id="c2" class="cartes" class="cartes" src="dos.png"></img><img id="c3" class="cartes" src="dos.png"></img><img id="c4" class="cartes" src="dos.png"><img id="c5" class="cartes" src="dos.png"></img><br/>
	<img id="c6" class="cartes" src="dos.png"></img><img id="c7" class="cartes" class="cartes" src="dos.png"></img><img id="c8" class="cartes" src="dos.png"></img><img id="c9" class="cartes" src="dos.png"><img id="c10" class="cartes" src="dos.png"></img><br/>
	<img id="c11"class="cartes" src="dos.png"></img><img id="c12" class="cartes" class="cartes" src="dos.png"></img><img id="c13" class="cartes" src="dos.png"></img><img id="c14" class="cartes" src="dos.png"><img id="c15" class="cartes" src="dos.png"></img><br/>
	<img id="c16" class="cartes" src="dos.png"></img><img id="c17" class="cartes" class="cartes" src="dos.png"></img><img id="c18" class="cartes" src="dos.png"></img><img id="c19" class="cartes" src="dos.png"><img id="c20" class="cartes" src="dos.png"></img><br/>
	<img src="image.png" alt="Image qui suit la souris" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" />
  </body>
</html>

Puis voici mon javascript:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
var cmpt=0;
var derniere;
var paires=0;
 
function distribuer(){
	var i;
	var j;
	var img=document.getElementById("c1");
	var alea;
	var alea2;
	var echange;
	derniere=img;
	derniere.setAttribute("onclick","src='dos.png';verif()");
	for (i=1;i<=20;i++){
		img=document.getElementById("c"+i);
		img.src="dos.png";
		switch(i){
		 case 1:
			img.setAttribute("onclick","src='As_carreau.png';verif(this)");			
			break;
		 case 2:
			img.setAttribute("onclick","src='As_carreau.png';verif(this)");
			break;
		 case 3:
			img.setAttribute("onclick","src='As_coeur.png';verif(this)");
			break;
		 case 4:
			img.setAttribute("onclick","src='As_coeur.png';verif(this)");
			break;
		 case 5:
			img.setAttribute("onclick","src='As_pique.png';verif(this)");
			break;
		 case 6:
			img.setAttribute("onclick","src='As_pique.png';verif(this)");
			break;
		 case 7:
			img.setAttribute("onclick","src='As_trefle.png';verif(this)");
			break;
		 case 8:
			img.setAttribute("onclick","src='As_trefle.png';verif(this)");
			break;
		 case 9:
			img.setAttribute("onclick","src='2_carreau.png';verif(this)");
			break;
		 case 10:
			img.setAttribute("onclick","src='2_carreau.png';verif(this)");
			break;
		 case 11:
			img.setAttribute("onclick","src='2_coeur.png';verif(this)");
			break;
		 case 12:
			img.setAttribute("onclick","src='2_coeur.png';verif(this)");
			break;
		 case 13:
			img.setAttribute("onclick","src='2_pique.png';verif(this)");
			break;
		 case 14:
			img.setAttribute("onclick","src='2_pique.png';verif(this)");
			break;
		 case 15:
			img.setAttribute("onclick","src='2_trefle.png';verif(this)");
			break;
		 case 16:
			img.setAttribute("onclick","src='2_trefle.png';verif(this)");
			break;
		 case 17:
			img.setAttribute("onclick","src='3_carreau.png';verif(this)");
			break;
		 case 18:
			img.setAttribute("onclick","src='3_carreau.png';verif(this)");
			break;
		 case 19:
			img.setAttribute("onclick","src='3_coeur.png';verif(this)");
			break;
		 case 20:
			img.setAttribute("onclick","src='3_coeur.png';verif(this)");
			break;
		}
	}
	for (j=0;j<5000;j++){
		alea=Math.floor((Math.random()*19)+1);
		alea2=Math.floor((Math.random()*19)+1);
		echange=document.getElementById("c"+alea).getAttribute("onclick");
		document.getElementById("c"+alea).setAttribute("onclick",document.getElementById("c"+alea2).getAttribute("onclick"));
		document.getElementById("c"+alea2).setAttribute("onclick",echange);
	}
}
 
function sleep(n){
	d=new Date();
	while(1){
		d2=new Date();
		diff=d2-d;
		if (diff > n){
			break;
		}
   }
}
function retourner(img){
	img.src="dos.png";
}
 
function verif(img){
	cmpt++;
	if (cmpt%2==0 && derniere.getAttribute("onclick")!=img.getAttribute("onclick")){
		setTimeout(retourner,1000,derniere);
		derniere.setAttribute("onclick",img.getAttribute("onclick"));
		setTimeout(retourner,1000,img);
	}
	if (cmpt%2==0 && derniere.getAttribute("onclick")!=img.getAttribute("onclick")){
		paires++;
	}
	if (paires>=10 && cmpt<=100){
		alert("gagné");
		distribuer();
	}
	if (cmpt>100){
		alert("perdu");
		distribuer();
	}	
}
En esperant que vous pourrez me guider pour résoudre ces problèmes (je tiens juste à préciser que les solutions toutes faîtes ne m'interressent pas, le but ici est de mettre en pratique les peu de connaissances que j'ai en js afin de m'améliorer).

N.B : euhh, je me rend compte qu'avec js et GSAP, je sais faire des animations 3D et je ne suis même pas capable de faire un jeu de memory XD mdr.