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:
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).
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(); } }
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.
Partager