Jeu du Quarto

Version imprimable

Jeu du Quarto

Bonjour, je cherche à coder le jeu du Quarto en HTML5, CSS3 et Javascript, après avoir coder deux tableaux, Un pour stocker les pièces, et le deuxième pour les déposer, j'ai utiliser le Jquery.ui pour utiliser le Drag and Drop, cependant je ne sais pas comment faire reconnaitre que les pièces sont alignés après les avoir posé sur le plateau de Jeu

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
 <div id="status"></div>
 
 
<table class="t1" id="tableau1">  
	<tr class="ligne" id="A">     
		<td class="cell" id="a1"> a1  	</td>
		<td class="cell" id="b1"> b1  	</td>
		<td class="cell" id="c1"> c1     </td>
		<td class="cell" id="d1"> d1     </td>
	</tr>
	<tr class="ligne" id="B">     
		<td class="cell"  id="a2"> a2   	</td>
		<td class="cell" id="b2"> b2  	</td>
		<td class="cell" id="c2"> c2     </td>
		<td class="cell" id="d2"> d2     </td>
	</tr>
	<tr class="ligne" id="C">     
		<td class="cell" id="a3"> a3   	</td>
		<td class="cell" id="b3"> b3  	</td>
		<td class="cell" id="c3"> c3     </td>
		<td class="cell" id="d3"> d3     </td>
	</tr>
	<tr class="ligne" id="D">     
		<td class="cell" id="a4"> a4   	</td>
		<td class="cell" id="b4"> b4  	</td>
		<td class="cell" id="c4"> c4     </td>
		<td class="cell" id="d4"> d4     </td>
	</tr>
</table>
 
 
<-!TABLEAU STOCK DES PIONS---->
<table class="t2" id="tableau2"> 
	<tr>     
		<td id="e1"> a1  <img src="p1.jpg" id="move1" >	</td>
		<td id="f1"> b1  <img src="p2.jpg" id="move2" > </td>
		<td id="g1"> c1  <img src="p3.jpg" id="move3" >	</td>
		<td id="h1"> d1  <img src="p4.jpg" id="move4" >	</td>
	</tr>
	<tr>     
		<td id="e2"> a2  <img src="p5.jpg" id="move5" >	 </td>
		<td id="f2"> b2  <img src="p6.jpg" id="move6" >	 </td>
		<td id="g2"> c2  <img src="p7.jpg" id="move7" >	 </td>
		<td id="h2"> d2  <img src="p8.jpg" id="move8" >	 </td>
	</tr>
	<tr>     
		<td id="e3"> a3  <img src="p9.jpg" id="move9" >	 </td>
		<td id="f3"> b3  <img src="p10.jpg" id="move10" > </td>
		<td id="g3"> c3  <img src="p11.jpg" id="move11" > </td>
		<td id="h3"> d3  <img src="p12.jpg" id="move12" > </td>
	</tr>
	<tr>     
		<td id="e4"> a4  <img src="p13.jpg" id="move13" > </td>
		<td id="f4"> b4  <img src="p14.jpg" id="move14" > </td>
		<td id="g4"> c4  <img src="p15.jpg" id="move15" > </td>
		<td id="h4"> d4  <img src="p16.jpg" id="move16" > </td>
	</tr>
</table>

Voici pour l'HTML

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
$(function(){
 
 
    $("#move1").draggable({
	revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
 
 
}); // appel du plugin
 
	$("#move2").draggable({
	revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
 
 
}); // appel du plugin
 
	$("#move3").draggable({
	revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
 
}); // appel du plugin
 
	$("#move4").draggable({
	revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
 
}); // appel du plugin
 
	$("#move5").draggable({
	revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
 
}); // appel du plugin
 
	$("#move6").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move7").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move8").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move9").draggable({
   revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move10").draggable({
   revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move11").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move12").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move13").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move14").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move15").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
	$("#move16").draggable({
    revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop
}); // appel du plugin
 
 
	$("#a1").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16', // je n'accepte que le bloc ayant "drag" pour id
		drop : function(){
			alert('Tour de jeu terminé!');
		}
 
	}); 
 
	$("#b1").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
		}
 
	}); 
 
	$("#c1").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#d1").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#a2").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#b2").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#c2").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#d2").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#a3").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#b3").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
	}); 
 
	$("#c3").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
		}); 
 
	$("#d3").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
		}); 
 
	$("#a4").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
		}); 
 
	$("#b4").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
		}); 
 
	$("#c4").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
		}); 
 
	$("#d4").droppable({
	accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16',
		drop : function(){
			alert('Tour de jeu terminé!');
			}
		});

et pour le Javascript

En vous remerciant

ton code peut se factoriser ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $("[id^=move").draggable({ revert : 'invalid' // sera renvoyé à sa place s'il n'est pas déposé dans #drop }); // appel du plugin $("#a1, #a2, #a3, #a4, #b1, #b2, #b3, #b4, #c1, #c2, #c3, #c4, #d1, #d2, #d3, #d4").droppable({ accept : '#move1 , #move2 , #move3 , #move4 , #move5 , #move6 , #move7 , #move8 , #move9 , #move10 , #move11 , #move12 , #move13 , #move14 , #move15 , #move16', // je n'accepte que le bloc ayant "drag" pour id drop : function(){ alert('Tour de jeu terminé!'); } });
bien que pour les droppable ce serait plus simple de passer par un selecteur de class commun ...

Pour ce qui est des combinaison gagnantes ..
Perso au drop je modifierais un data- dans la cellule de destination,
puis je ferais des teste sure les combinaisons de data- en parsant le tableau ..

19/05/2015, 13h45
yarispel

Merci pour votre réponse

Mes capacités en Javascript (et en codage en général étant limité :?) je ne comprend pas très bien ce que vous entendez par "-data" ?
19/05/2015, 13h57
SpaceFrog
un attribut personnalisé ...

Par exemple sur les td tu colle un attribut perso nommé piece :

Code:

<td data-piece="... " >

manipulable en jquery avec:
Code:

1 2 $('selecteur').data('piece')
19/05/2015, 14h02
yarispel

Voilà j'ai ajouté un data, je dois ensuite utiliser la fonction parseInt() pour pouvoir tester les combinaisons ?
19/05/2015, 15h25
SpaceFrog

non tu dois parcourir ton table pour récupérer les data de chaque cellule dans un array.
Puis trouver un système pour le comparer a des combinaison gagnantes ..

Est-ce que parcourir le tables correspond à ceci ?
Code:

1 2 3 4 5 6 7 8 var table = ["a1","a2","a3","a4","b1","b2","b3","b4","c1","c2","c3","c4","d1","d2","d3","d4",]; for (i=0;i<table.length;i++) { for (var i=0; i<table.length; i++){ if (table[i]=="...") { alert("il y a un \"...\" à table["+i+"]."); } } }
Sachant que je n'ai pas encore vu cela en cours, je ne sais pas trop comment utiliser la fonction "array"

19/05/2015, 17h29
SpaceFrog

Sasn passer par les data- ...
tu peux faire un truc comme ça

http://fiddle.jshell.net/2cxrxaop/
19/05/2015, 18h10
yarispel

Ok, donc j'ai appliqué les changement, et je vous en remercie ça m'a fait gagner de la place et la lisibilité.

Je me poser également la question de savoir si je devais déclarer dans les variables les caractéristique des pièces(Carré, Rond, Petit, Grand, Creux, Plein, Marron, Jaune). Par exemple:

Carré = 1
Grand = 2
Plein = 3
Marron = 4

p1 = 1 + 2 +3 + 4.

Pour après vérifier les alignements ?
20/05/2015, 08h41
SpaceFrog
Il te faut en effet associer à ton image de pièce l'ensemble de ses caractéristiques

je verrais cela sous la forme d'un array ou d'un json ..mais pas pour en faire une somme il faudra boucler pour comparer les propriétés
Code:

1 2 3 4 5 typepiece= { "forme": "c", // ou "r" "taille":"g", // ou "p" "densite": "p", // ou "c" "couleur": "m" // ou "b" }
que tu peux stocker dans un data-propriete de chaque image.

Il ne te reste plus qu'a comparer ensuite ces json pour les 8 lignes et 2 diagonales en parcourant le tableau

en créant par exemple un array qui incrémente une valeur lorsque tu as une égalité de propriété sur une ligne ou une diagonale. Si dans ton array final tu arrive à un item de l'array == 4 c'est gagné

Donc je mets un data-propriété différent pour chaque image ? comme ceci ?

Code:

<td data-propriété="c,g,p,m" class="cell" id="a1"> a1 </td>

Que je mets sous Array et que je compare entre elles, car c'est exactement le système que j'avais pensé mais le JSON est assez nouveau pour moi, donc je test différentes choses et vait tenter d'obtenir un résultat

après plusieurs test je n'obtient pas de résultats satisfaisant, je ne comprend pas le maniement du JSON

J'ai donc tenté de mettre les caractéristique des pièce en Javascript comme ceci

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
    var g = 1; // Prpriété grand
	  var p = 2; // Propriété petit
	  var r = 3; // Propriété rond
	  var c = 4; // propriété carré
	  var pl = 5; // propriété pleine
	  var cr = 6; // propriété creuse
	  var j = 7; // propriété jaune
	  var m = 8; // propriété marron
 
      var p1 = document.getElementById("move1"); // pièce 1
	  var p2 = document.getElementById("move2"); // pièce 2
	  var p3 = document.getElementById("move3"); // pièce 3
	  var p4 = document.getElementById("move4"); // pièce 4
	  var p5 = document.getElementById("move5"); // pièce 5
	  var p6 = document.getElementById("move6"); // pièce 6
	  var p7 = document.getElementById("move7"); // pièce 7
	  var p8 = document.getElementById("move8"); // pièce 8
	  var p9 = document.getElementById("move9"); // pièce 1
	  var p10 = document.getElementById("move10"); // pièce 2
	  var p11 = document.getElementById("move11"); // pièce 3
	  var p12 = document.getElementById("move12"); // pièce 4
	  var p13 = document.getElementById("move13"); // pièce 5
	  var p14 = document.getElementById("move14"); // pièce 6
	  var p15 = document.getElementById("move15"); // pièce 7
	  var p16 = document.getElementById("move16"); // pièce 8
 
	  p1 == 1&&4&&5&&8;
	  p2 == 2&&4&&5&&8;
	  p3 == 1&&4&&6&&8;
	  p4 == 2&&4&&6&&8;
	  p5 == 1&&3&&5&&8;
	  p6 == 2&&3&&5&&8;
	  p7 == 1&&3&&6&&8;
	  p8 == 2&&3&&6&&8;
	  p9 == 1&&4&&5&&7;
	  p10 == 2&&4&&5&&7;
	  p11 == 1&&4&&6&&7;
	  p12 == 2&&4&&6&&7;
	  p13 == 1&&3&&5&&7;
	  p14 == 2&&3&&5&&7;
	  p15 == 1&&3&&6&&7;
	  p16 == 2&&3&&6&&7;

Du coup il faudrait que lorsque je drope une pièce sur une cellule du tableau celle-ci prenne une valeur mais je ne voit pas du tout comment faire

23/05/2015, 16h47
yarispel

Je ne trouve toujours pas de solution malgré plusieurs choses essayé :(