Jeu de Memory en js

**papabury59** · 24/01/2015, 17h15

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.

**SylvainPV** · 25/01/2015, 13h02

Bonjour,

Je ne comprends la ligne de code :
derniere.setAttribute("onclick",img.getAttribute("onclick"));

Pourquoi changer la carte apr�s une erreur ? Aussi tu as deux if qui s'encha�nent avec la m�me condition, je ne comprends pas bien le but. N'oublie pas le mot-cl� "else" quand il est n�cessaire. Tu as deux cas, un o� une seule carte est retourn�e: pas de v�rification et on stocke une r�f�rence � "derniere" ; et l'autre o� la seconde carte est retourn�e, l� il faut comparer l'image cliqu�e et la r�f�rence "derniere". Il faudrait bien isoler les cas car l� j'ai l'impression que tu fais les deux � la fois et qu'il y a une erreur dans la logique.

Sinon pour ta fonction sleep utilise setTimeout plut�t qu'une comparaison de dates. La comparaison de dates avec une boucle infinie fait monter le processeur en fl�che, c'est la pire fa�on de faire pour un d�lai d'attente.

**lysandro** · 25/01/2015, 15h26

Il faudra aussi penser � r�initialiser avant un nouveau jeu les variables cmpt et paires.
Et quand on clique sur une carte d�j� retourn�e, cela incr�mente quand m�me cmpt, l� aussi c'est � revoir.

**papabury59** · 30/01/2015, 16h43

Bonsoir, merci de votre aide , malgr� tous mes efforts je n'ai pas r�ussi � r�soudre mon probl�me et j'ai d�cid� de recommencer et mon code fonctionne !

Le voici :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
<style>
 
div#memory_board > div{
	border:#000 1px solid;
	width:50px;
	height:50px;
	float:left;
	margin:10px;
	padding:20px;
	font-size:64px;
	cursor:pointer;
	text-align:center;
}
</style>
<script>
var memory_array = ['A','B','C','D','E','F','G','H','I','J'];
memory_array=memory_array.concat(memory_array);
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
    var i = this.length, j, temp;
    while(--i > 0){
        j = Math.floor(Math.random() * (i+1));
        temp = this[j];
        this[j] = this[i];
        this[i] = temp;
    }
}
function newBoard(){
	tiles_flipped = 0;
	var output = '';
    memory_array.memory_tile_shuffle();
	for(var i = 0; i < memory_array.length; i++){
		output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
	}
	document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
	if(tile.innerHTML == "" && memory_values.length < 2){
		tile.style.background = '#FFF';
		tile.innerHTML = val;
		if(memory_values.length == 0){
			memory_values.push(val);
			memory_tile_ids.push(tile.id);
		} else if(memory_values.length == 1){
			memory_values.push(val);
			memory_tile_ids.push(tile.id);
			if(memory_values[0] == memory_values[1]){
				tiles_flipped += 2;
				memory_values = [];
            	memory_tile_ids = [];
				if(tiles_flipped == memory_array.length){
					document.getElementById('memory_board').innerHTML = "";
					alert ("Bravo , vous avez gagné !");
					newBoard();
				}
			} else {
				function flip2Back(){
				    var tile_1 = document.getElementById(memory_tile_ids[0]);
				    var tile_2 = document.getElementById(memory_tile_ids[1]);
            	    tile_1.innerHTML = "";
            	    tile_2.innerHTML = "";
				    memory_values = [];
            	    memory_tile_ids = [];
				}
				setTimeout(flip2Back, 700);
			}
		}
	}
}
</script>
</head>
<body>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html>

Je passe la discussion en r�solue. Encore merci

Jeu de Memory en js

JavaScript

Discussions similaires

Partager

Partager