Discussion :

[yarispel]

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

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

[SpaceFrog]

ton code peut se factoriser ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ..

[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" ?

[SpaceFrog]

un attribut personnalisé ...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

manipulable en jquery avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('selecteur').data('piece')

[yarispel]

Voilà j'ai ajouté un data, je dois ensuite utiliser la fonction parseInt() pour pouvoir tester les combinaisons ?

[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 ..

[yarispel]

Est-ce que parcourir le tables correspond à ceci ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"

[SpaceFrog]

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

http://fiddle.jshell.net/2cxrxaop/

[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 ?

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

Sélectionner tout - Visualiser dans une fenêtre à part

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é

[yarispel]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[yarispel]

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