Jeu de Memory en js

Version imprimable

Jeu de Memory en js

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:

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:

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.

25/01/2015, 13h02
SylvainPV

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.
25/01/2015, 15h26
lysandro

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.

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:

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 :)