Déterminer qui a gagné au jeu de hex

Version imprimable

1 pièce(s) jointe(s)

Bonjour.
J'ai codé un jeu de Hex. Il fonctionne!!! C'est même assez simple finalement a faire.
Le problème c'est que je ne sais pas comment faire en sorte d'afficher qui a gagné ou perdu c'est embêtant.

Je stock dans un tableau les couleurs des cases et leur positions:
1_1: x y et color
1_2: …
Le premier chiffre de la clé étant la ligne et le second la colone. Donc la case tout a en bas droite c'est 9_9 et tout en bas a gauche 1_9…

J'y réfléchis depuis un petit moment et je n'ai pas de solution surtout que si vous connaissez ce jeu on peut partir dans toute les directions c'est donc pas facile.

Dans un premier temps, je pensais vérifier les bord pour déterminer si déjà un joueurs a posé un pions au debut et a la fin, car si il y en a pas il ne peut pas avoir gagné.
Ensuite je pensais faire une fonction qui bouclerais sur la première ligne pour recup le chaque pions du joueur posé et lancé ma fonction qui descendrait sur la grille.

Voila ce que j'ai fait pour le moment:
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 function test() { for (var i=1;i<=NombreBloc;i++) { log(pions); // log(pions[i + "_1"]); key = i + "_1"; data = pions[i + "_1"]; if(data['couleur'] == joueur_couleur['joueur_1']) { text = "test: " + key + " " + data['couleur']; // log(data); if(key == "1_1") { log(text + " - On est tout a gauche"); } else if((key >= "1_1") && (key <= "8_1")) { log(text + " - On est pas sur les bord"); } else if(key == "9_1") { log(text + " - On est tout a droite"); } else { } } else { } } log("-----"); }
mais j'ai peur de partir dans une boucle infinie, comment faire ?

Exemple de chemin du joueur blanc:
Pièce jointe 368107

Vu qu'il peut partir dans toute les directions, je vois pas trop comment faire.

Bonjour !

Comme il s’agit d’un problème relativement classique, je ne vais pas te donner une solution toute faite, mais plutôt des indices et des pistes.

Pour commencer, tu auras probablement besoin d’une fonction qui, pour un pion donné, te renvoie les 6 pions qui sont dans son voisinage.
Pour faire ça, tu dois d’abord trouver un moyen de dire si deux pions sont voisins ou non. Étant donné deux pions A et B, il faut donc utiliser les positions x_A, y_A, x_B et y_B, et trouver les conditions que ces positions doivent remplir pour que les pions soient voisins. Il faudra probablement mettre des +1 ou des -1 quelque part.

Ensuite tu as un concept de « chaîne de voisins » qu’il faut que tu arrives à mettre en œuvre. Personnellement j’utiliserais une file (structure FIFO, First In = First Out).

Pour mettre en œuvre une file en JavaScript, on utilise Array avec un couple de méthodes : l’une pour insérer, l’autre pour retirer. Par exemple le couple push / shift :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var queue = []; queue.push(3); queue.push(24); queue.push(7); // à ce moment la file contient [ 3, 24, 7 ] queue.shift(); // renvoie 3 // la file contient [ 24, 7 ] queue.push(150); // la file contient [ 24, 7, 150 ]
Alternativement il y a le couple unshift / pop qui fait circuler le contenu de la file dans l’autre sens. C’est selon ta préférence.

Le principe est le suivant :

je commence par retirer les marqueurs « pion traité » de tous les pions du plateau ;
je choisis une couleur et un des deux bords de cette couleur ;
je prends tous les pions de la couleur attendue qui se trouvent sur ce bord, et je les mets dans la file.
Ensuite, je retire un pion de la file et :

je vérifie si le pion se trouve sur l’autre bord. Si c’est le cas, victoire !
Sinon, pour chaque voisin du pion donné, si ce voisin n’a pas été marqué comme traité, et s’il a la couleur attendue, je l’ajoute à la file.
Je marque le pion comme traité.
je recommence tant qu’il y a des pions dans la file.

Le fait de regarder tous les voisins à chaque fois nous permet de vérifier toutes les directions que peut prendre le chemin. L’ajout du marqueur « pion traité » nous assure que le script ne va pas partir en boucle infinie.

C’est une forme simple d’algorithme de recherche de chemin.

10/04/2018, 18h31
eleydet

Bonjour,

Une autre formulation, peut-être? Imaginons que les cases soient métalliques :
- La première rangée de cases, celles du haut, sont reliées au 5 V.
- La dernière rangée de cases, celles du bas, sont reliées au 0 V.
- Les autres cases sont, au début, à un potentiel indéterminé.
Le courant électrique peut-il passer?
Passons en revue chaque case, rangée après rangée, en commençant par le haut. Si une case métallique est à proximité d'une case au potentiel 5 V, alors son potentiel est de 5 V.
On passe en revue plusieurs fois l'ensemble des cases jusqu'à ce qu'aucun changement de potentiel ne soit constaté.
12/04/2018, 21h54
Lprofessionnelle

Je demande rien de tout prêt juste une façon de faire, bref juste une idée.

J'ai fait une méthode qui retourne tous les pions autour du pions posé comme dit plus haut.

Je pensais que ma méthode était parfaite: quand je pose un pion, je regarde si il touche un pion de la même couleur et ainsi de suite... et a la fin je regarde si ça touche les bords. Mais je n'avais pas pensé a un truck: je testais en reliant les cases, mais on peut jouer en faisant plusieurs chemin et les relié plus tard et donc la chaine serait rompu et ça je ne sais pas comment le tester!!!

Donc je n'ai pas avancé plus loin.
13/04/2018, 20h27
Watilin

Je ne sais pas si j’ai bien compris ce que tu veux dire, mais si tu as un « début de chemin » associé à chaque pion, alors il faut gérer le cas où un nouveau pion est posé près d’un ou plusieurs autres pions qui font déja partie d’un chemin. Et dans le cas où ça relie deux chemins différents, alors il faut « fusionner » ces deux chemins, en notant d’une façon ou d’une autre le fait qu’ils sont équivalents.
15/04/2018, 11h08
Lprofessionnelle

En gros j'ai un tableau qui contient chaque case: les positions et le statut de la case...
Quand je touche une case je regarde autour si il y en a une de la même couleur et donc qu'elle se touche.
Donc je pensais qu'il me restait plus qua voir si je touchais les bord mais ça me garantie pas que la chaine soit entière et donc sans coupure!

Il faudrait peut être que je boucle sur toute les cases de la même couleur et que je vois si j'arrive de l'autre côté ?
15/04/2018, 11h59
Watilin

Tout cela est assez vague.
Quel est ton algorithme actuellement ?

J'ai une méthode qui lance la méthode testBloc qui test la couleur des blocs autour:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
// On regarde les cases autour:
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x-1, keyRecus_y-1, couleurRecus);
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x, keyRecus_y-1, couleurRecus);
 
		// centre
		// testBloc(keyRecus[0], keyRecus[1], "#FF0000");
 
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x+1, keyRecus_y, couleurRecus);
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x-1, keyRecus_y, couleurRecus);
 
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x+1, keyRecus_y+1, couleurRecus);
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x, keyRecus_y+1, couleurRecus);

La méthode testBloc qui test si les deux cases pour voir si elles sont de la même couleur:

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
	// Case d'origine, case testé
	function testBloc(xO , yO, x, y, couleurRecus) {
 
		// On regarde si on est sur la grille:
		if( ((x > 0) && (x <= NombreBloc)) && ((y > 0) && (y <= NombreBloc)))
			{		
				x_t = x.toString();
				y_t = y.toString();
 
				data_color = pions[x + "_" + y]['couleur'];
 
				// log(x_t + " " + y_t + " " + data_color + " " + joueur_couleur['joueur_1']);
 
				// log(data_color + " " + joueur_couleur['joueur_1']);
				if(data_color == couleurRecus)
					{
						if(couleurRecus == joueur_couleur['joueur_1'])
							{
								pions[x + "_" + y]["bord"] = 1;
								pions[xO + "_" + yO]["bord"] = 1;
							}
						else
							{
								pions[x + "_" + y]["bord"] = 2;
								pions[xO + "_" + yO]["bord"] = 2;
							}
						// canvas.animateLayer(data, { "fillStyle": "#C1C1C1"});
					}
				else
					{
					}
			}
		else
			{
				// log("erreur " + x_t + " " + y_t);
			}
	}

A la fin je pensais juste vérifier si j'arrive bien au bord de chaque coté, mais je dois aussi voir si la chaine est bien "entière"

16/04/2018, 00h22
Watilin
Je crois que je comprends la logique que tu as voulu mettre dans ta fonction testBloc. Mais pour « propager » la propriété bord d’un pion à son voisin, il faut d’abord tester si le pion donné a déjà la propriété.
Code:

1 2 3 4 5 var pionO = pions[xO + "_" + yO]; var pionVoisin = pions[x + "_" + y]; if (pionO.bord === 1 || pionO.bord === 2) { pionVoisin.bord = pionO.bord; }
N’hésite pas à utiliser des variables intermédiaires, comme je l’ai fait, pour rendre ton code plus lisible.

Note : je ne l’ai pas mis dans mon bout de code, mais c’est aussi à cet endroit que tu dois tester si les deux pions ont une valeur bord. Et si les valeurs sont différentes, cela indique que tu as un chemin qui va d’un bord à l’autre.
19/04/2018, 22h29
Lprofessionnelle

Je me souviens plus comment j'ai fait de tête, mais le nombre bord correspond au joueur: blanc ou noir et comme je vérifie la couleur tout autour du pion je vérifie même pas si il y a déja la variable bord dans le tableau car a ce moment la j'en ai pas besoin.
On pourrait pas boucler dessus et voir si les numéros se suivent ?

PS: on a pas d'alert mail ?
20/04/2018, 14h07
Watilin
Citation:

Envoyé par Lprofessionnelle

Je me souviens plus comment j'ai fait de tête

Ça c’est un problème. Tu n’as pas prévu ta conception dès le départ ?

J’aimerais mieux comprendre la structure de données que tu utilises. Pour l’instant, je sais que tes pions ont deux propriétés : couleur et bord.

Je sais aussi que tes pions sont contenus dans une structure qui s’appelle pions et qui semble être un objet. Par contre, je n’ai aucune idée de comment tu initialises cet objet, est-ce que chaque « case » de cette structure est définie ou est-ce que tu les remplis¨ au cas par cas ?

Citation:

Envoyé par Lprofessionnelle

On pourrait pas boucler dessus et voir si les numéros se suivent ?

Non, tu ne peux pas boucler dessus, pour plusieurs raisons :

1. D’abord parce que ce n’est pas un vrai tableau : les clés que tu utilises sont des chaînes (type string), et les tableaux JS ne fonctionnent plus correctement quand on y ajoute des clés qui ne sont pas numériques.

Tu pourrais changer ta structure en tableau à deux dimensions :
Code:

1 2 3 4 5 6 7 8 let pions = []; for (let i = 0; i < n; i++) { // n = nombre de cases par ligne pions[i] = []; } // ... let data_color = pions[x][y]['couleur'];
Cette dernière ligne peut s’écrire également comme ceci :

Code:

let data_color = pions[x][y].couleur;

2. Ensuite, parce que ta structure est hexagonale et que ça introduit des décalages. Ça ne rend pas l’itération impossible mais ça complique les choses, il faut rajouter un certain nombre de tests dans la boucle, et je pense qu’il vaut mieux trouver une méthode plus simple.

3. Enfin, parce que comme tu l’as dit toi-même, le chemin peut partir dans n’importe quelle direction, et lorsque tu as des « retours en arrière », ta boucle ne peut pas les détecter. C’est pourquoi, il y a quelques jours, je te suggérais une solution basée sur une file.

Citation:

Envoyé par Lprofessionnelle

PS: on a pas d'alert mail ?

Normalement si, dans ton tableau de bord il doit y avoir un lien « Options générales » dans la colonne de gauche. Ensuite, dans la rubrique « Messagerie et notification », cherche « Mode de suivi par défaut ».

J'aime pas donner le code entier quand je n'ai pas terminé sauf dans un tuto^^.

Il est en partie commenté et parfois certaine parties sont un peut brouillon. J'espère que ça sera clair. Par exemple je n'ai pas encore réussi a positionner le texte autour de la grille, c'est à se demander si il y a pas un bug, car j'ai tracé un cercle pour être sur des coordonnées que j'utilise pour tracer mon texte et ça fait n'importe quoi.

J'ai essayé de stocker mes data dans le tableau pions comme tu as dit, mais parfois je me trompais dans les cases donc j'ai tout stocké "une seul clé" .

Voila tout mon code:

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
 
$(document).ready(function() {
 
	// Raccourcis pour avoir des log^^
	function log(param)
	{
		console.log(param);
	}
 
	var alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 
	// Canvas id:
	var canvas = $("#canvas");
 
	// Contient le numéro du joueur qui a joué ou celui qui va jouer, bref on s'en fous ça marche on touche pas:
	var joueur;
 
	// Le nombre total de poins posé:
	NombreClic = 1;
 
	// Couleur de fond de la grille:
	grille_fond = "#D8B784";
 
	// Le nom par défaut des joueurs:
	joueur_name = {
		"joueur_1": "Joueur 1",
		"joueur_2": "Joueur 2",
	};
 
	// Les couleurs des joueurs:
	var joueur_couleur = {
		"joueur_1": "#FFFFFF", // Blanc
		"joueur_2": "#808080", // Gris, normalement c'est noir, mais ça fait moche
	};
 
	// Le qui doit joueur a jouer:
	joueurs_couleur = joueur_couleur['joueur_1'];
 
	// Position pour décaler les grilles correctement sur la hauteur, ça évite que la grille commence au tout début du canvas, car on affiche du texte juste avant:
	var topDefaut = 44;
	var top = 0;
 
	// Permet de décaler sur la droite la grille, si on décale pas assez notre grille le coté gauche ne sera pas affiché:
	var left = 0;
 
	// Contient les tailles pour tracer les différente tailles de grilles:
	var grilles_tailles = {
		"base": 25,
		"moyenne": 35,
		"grande": 50,
		"tres grande": 60,
		"geant": 80,
	};
	// log(grilles_tailles);
 
	// On définit le type qu'on veut utiliser par défaut:
	var grille_taille = 'base';
	// var grille_taille = 'geant';
 
	// Le nombre de bloc par grille qu'on peut généré:
	var grilles = [9, 11, 14, 19];
 
	// Nombre de bloc par défaut:
	var NombreBloc = grilles[0];
 
	// Le nombre total de bloc de la grille: 9*9=81
	var NombreBlocGrille = NombreBloc * NombreBloc;
 
	// On définie le radius par défaut en fonction du type de grille par défaut choisit:
	var radius = grilles_tailles[grille_taille];
 
	// Contient les positions de chaque case ce qui permet d'identifier ou le joueur a cliqué et contient aussi la couleur de la case:
	var pions = new Array();
 
	// Affiche les règles:
	$(document).on('click', ".regles", function(){
		$("#regles").dialog();
	});
 
	// On génère le code HTML qui permet de choisir combien de case on souhaite par grille:
	$("#grille").html('Nombre de bloc sur la grille: ');
	$.each(grilles, function( key, value ){
		if(value == NombreBloc) // On met le type par défaut en valeur
			{
				$("#grille").append('<a href="#" class="grille" style="font-weight:bold;" data-taille="' + value + '">' + value + '</a> - ');	
			}
		else
			{
				$("#grille").append('<a href="#" class="grille" data-taille="' + value + '">' + value + '</a> - ');	
			}	
	});
 
	// On génère le code HTML qui permet de choisir la taille des cases qu'on souhaite utiliser:
	$("#grille_taille").html('Les tailles de grille: ');
	$.each( grilles_tailles, function( key, value ){
		if(key == grille_taille) // On met le type par défaut en valeur
			{
				$("#grille_taille").append('<a href="#" class="grille_taille" style="font-weight:bold;" data-type="' + key + '">' + key + '</a> - ');	
			}
		else
			{
				$("#grille_taille").append('<a href="#" class="grille_taille" data-type="' + key + '">' + key + '</a> - ');	
			}	
	});
 
	// Permet de choisir la taille des cases de la grille voulu:
	$(document).on('click', ".grille_taille", function(){
		grille_taille = $(this).data("type");
		radius = grilles_tailles[grille_taille];
 
		// On enlève tout ce qui est en gras:
		$('.grille_taille').css({'font-weight': ''});
 
		// On met en gras le lien cliqué:
		$(this).css({'font-weight': 'bold'});
 
		// On lance la fonction qui génère la grille:
		create();
	});
 
	// Permet de choisir le nombre de case sur la grille voulu:
	$(document).on('click', ".grille", function() {
		NombreBloc = $(this).data("taille");
 
		// On enlève tout ce qui est en gras:
		$('.grille').css({'font-weight': ''});
 
		// On met en gras le lien cliqué:
		$(this).css({'font-weight': 'bold'});
 
		// On lance la fonction qui génère la grille:
		create();
	});
 
	// On affiche une petite jnotify au clic dans les input des joueurs qui permettent de choisir un pseudo:
	$(document).on('click', ".joueur_name", function() {
		$.jnotify('Vous devez regénérer la grille après avoir choisit un nom pour qu\'il soit utilisé en cliquant sur une taille de grille', 'notice', {timeout: 0});
	});
 
 
	create();
 
	function create() {
		// On détruie le canvas a chaque lancement de la fonction si il existe déja:
		canvas.clearCanvas();
 
		// On enlève les layers:
		canvas.removeLayers();
 
		// Contient la distance pour que le dernier bloc de la première ligne soit a la bonne distance pour que le premier bloc de la dernière ligne soit bien sur le canvas:		
        top = topDefaut + (radius*2);
        left = (NombreBloc*(radius*2))+(radius*NombreBloc)+(radius*2);
		// log(left);
 
		// Contient le nombre de bloc de la grille qu'on va utiliser pour enregistrer la position de chaque bloc:
		blocX = NombreBloc;
        blocY = NombreBloc;
 
		// On calcul la position de chaque bloc: 
		for (var x=1;x<=NombreBloc;x++) {
            centerX = left-((radius*2)*x);
            centerY = top;
 
			// On reset blocY:
            blocY = NombreBloc;
            for (var y=1;y<=NombreBloc;y++) {
				pions[blocX + "_" + y] = new Array();
				// pions[blocX + "_" + y]['bord'] = 0;
				pions[blocX + "_" + y]['x'] = centerX;
				pions[blocX + "_" + y]['y'] = centerY;
				pions[blocX + "_" + y]['couleur'] = grille_fond; // On met la couleur par défaut
 
                centerX -= (radius);
                centerY += (radius*2) - ((radius*2)/100*14);
                blocY--;
            }
            blocX--;
        }
		// log(pions);
 
		// On calcul la taille du canvas en fonction de la grille généré:
		width = (pions[NombreBloc  + '_1']['x'] + (radius*2.5));
		height = (pions['1_' + NombreBloc]['y'] + (radius*2.5));
 
		// On redimensionne le canvas a la bonne taille:
		canvas.attr('width', width + "px");
 
		// Contient la hauteur du canvas pour bien l'afficher:
		canvas.attr('height', height + "px");
 
		// Le nombre de bloc de la grille:
		NombreBlocGrille = NombreBloc * NombreBloc;
 
		// On remet le nombre de clic a 1:
		NombreClic = 1;
 
		joueur = 1;		
 
		// Le joueur qui joue en premier, dans les règles c'est le joueur qui joue avec les blanc:
		joueurs_couleur = joueur_couleur['joueur_1'];
 
		// Si aucun pseudo choisis on met ou remet un nom par défaut:
		if($("#joueur_1_name").val().length == 0)
			{
				joueur_name["joueur_1"] = "Joueur 1";
			}
		else // On met la valeur choisit:
			{
				joueur_name['joueur_1'] = $("#joueur_1_name").val();
			}
 
		// Si aucun pseudo choisis on met ou remet un nom par défaut:
		if($("#joueur_2_name").val().length == 0)
			{
				joueur_name["joueur_2"] = "Joueur 2";
			}
		else // On met la valeur choisit:
			{
				joueur_name['joueur_2'] = $("#joueur_2_name").val();
			}
 
 
 
								// On écrit le texte qui indique a qui c'est de jouer:
						canvas.drawText({
							layer: true,
							fillStyle: '#FFFFFF',
							// strokeStyle: '#FFFFFF',
							strokeWidth: 2,
							x: 10, y: 10,
							fontSize: 15,
							text: 'C\'est au joueur "' + joueur_name['joueur_' + joueur] + '" de jouer.',
							fromCenter: false,
						});
 
<?php
        if(!empty($_GET['fond']))
                {
                }
        else
                {
?>
	fondCadre();
	// texteGrille();
<?php
                }
?>
		// On trace les hexagones:
		for (var x=1;x<=NombreBloc;x++) {
            for (var y=1;y<=NombreBloc;y++) {
				centerX = pions[x + '_' + y]['x']; 
				centerY = pions[x + '_' + y]['y']; 
 
				canvas.drawPolygon({
					layer: true,
					name: x + "_" + y,
					strokeStyle: 'black',
					strokeWidth: 4,
					fillStyle: grille_fond,
					x: centerX, y: centerY,
					radius: radius,
					sides: 6,
					rotate: 90,
					click: function(layer) {
						// console.log(layer);
						$(this).animateLayer(layer, {
							fillStyle: couleur(layer.name)
						});
					}
				});
			}
		}
	texteGrille();
 
	// canvas.drawLine({
		// layer: true,
		// strokeStyle: '#F1F1F1',
		// strokeWidth: 6,
		// x1: pions['3_1']['x'], y1: pions['3_1']['y'],
		// x2:  pions['4_2']['x'], y2: pions['4_2']['y'],
		// x3: pions['5_3']['x'], y3: pions['5_3']['y'],
		// x4: pions['5_4']['x'], y4: pions['5_4']['y'],
		// x5: pions['6_5']['x'], y5: pions['6_5']['y'],
		// x6: pions['5_5']['x'], y6: pions['5_5']['y'],
		// x7: pions['4_5']['x'], y7: pions['4_5']['y'],
		// x8: pions['3_4']['x'], y8: pions['3_4']['y'],		
		// x9: pions['2_4']['x'], y9: pions['2_4']['y'],
		// x10: pions['2_5']['x'], y10: pions['2_5']['y'],
		// x11: pions['3_6']['x'], y11: pions['3_6']['y'],
		// x12: pions['4_7']['x'], y12: pions['4_7']['y'],
		// x13: pions['5_7']['x'], y13: pions['5_7']['y'],
		// x14: pions['6_7']['x'], y14: pions['6_7']['y'],
		// x15: pions['6_8']['x'], y15: pions['6_8']['y'],
		// x16: pions['7_9']['x'], y16: pions['7_9']['y'],
	// });
 
<?php
        if(!empty($_GET['fond']))
                {
?>
	fondCadre();
	// texteGrille();
<?php
                }
        else
                {
                }
?>	
 
		canvas.drawArc({
			layer: true,
			strokeStyle: '#0000FF',
			fillStyle: "#F1F1F1",
			strokeWidth: 5,
			x: 50, y: 150,
			radius: 25,
			click: function(layer) {
				boucle();
			}
		});
 
	}
 
	// function couleur(layer) {
		// log(layer.name + " x: " + layer.x + " y: " + layer.y);
		// return "#808080";
	// }
 
	// Le but premier de cette fonction: retourner la nouvelle couleur de la case cliqué
	// Fonction détourné de son but premier, voir peut être a la simplifier
	function couleur(name)
	{
		data = canvas.measureText(name);
 
		data_name = data.name;
		data_x = data.x;
		data_y = data.y;
		data_couleur = data.fillStyle;
 
		// log("couleur: " + data.name + " " + data.x + " " + data.y + " " + data.fillStyle);
 
 
		if(NombreClic > NombreBlocGrille)
			{
				$("#infos").html("ERREUR!!!");
			}
		else if(data_couleur == grille_fond)
			{
				// log("On change la couleur");
				NombreBlocRestant = (NombreBlocGrille) - NombreClic;
				// log(NombreBlocRestant + "/" + NombreBlocGrille);
 
				///----
				if(joueurs_couleur == joueur_couleur['joueur_2'])
					{
						NombreClic++;
						joueurs_couleur = joueur_couleur['joueur_1'];
						pions[data_name]['couleur'] = joueur_couleur['joueur_2'];
						// position(2, x, y);
						joueur = 1;
						// $.jnotify('C\'est au joueur 1 de jouer.<br>', 'notice', {timeout: 0});
 
						// On trace un rectangle noir sur le canvas pour effacer le texte pour pouvoir écrire a nouveau:
						// OU utiliser la fonction clearCanvas() => Clear a section https://projects.calebevans.me/jcanvas/docs/clearCanvas/
						canvas.clearCanvas({
							layer: true,
							x: 0, y: 0,
							width: 600,
							height: 20,
							fromCenter: false,
						});
 
						// On écrit le texte qui indique a qui c'est de jouer:
						canvas.drawText({
							layer: true,
							fillStyle: '#FFFFFF',
							// strokeStyle: '#FFFFFF',
							strokeWidth: 2,
							x: 10, y: 10,
							fontSize: 15,
							text: 'C\'est au joueur "' + joueur_name['joueur_1'] + '" de jouer.',
							fromCenter: false,
						});
						test(data, joueur_couleur['joueur_2']);
						return joueur_couleur['joueur_2'];
					}
				else
					{
						NombreClic++;
						joueurs_couleur = joueur_couleur['joueur_2'];
						pions[data_name]['couleur'] = joueur_couleur['joueur_1'];
						// position(1, x, y);
						joueur = 2;
						// $.jnotify('C\'est au joueur 2 de jouer.<br>', 'notice', {timeout: 0});
 
						// On trace un rectangle noir sur le canvas pour effacer le texte pour pouvoir écrire a nouveau:
						canvas.clearCanvas({
							layer: true,
							x: 0, y: 0,
							width: 600,
							height: 20,
							fromCenter: false,
						});
 
						// On écrit le texte qui indique a qui c'est de jouer:
						canvas.drawText({
							layer: true,
							fillStyle: '#FFFFFF',
							// strokeStyle: '#FFFFFF',
							strokeWidth: 2,
							x: 10, y: 10,
							fontSize: 15,
							text: 'C\'est au joueur "' + joueur_name['joueur_2'] + '" de jouer.',
							fromCenter: false,
						});
						test(data, joueur_couleur['joueur_1']);
						return joueur_couleur['joueur_1'];
					}
				///----
			}
		else
			{
				$("#infos").append("Joueur " + joueur_name['joueur_' + joueur] + ": Interdit, Pion déja posé!!!<br>");
				$.jnotify('Joueur "' + joueur_name['joueur_' + joueur] + '": Interdit, Pion déja posé!!!', 'error', {timeout: 0});
				// console.log("Interdit, couleur déja changé!!!");
			}
		// return "#808080";
	}
 
	function fondCadre() {
		// Haut gauche
		x1_y1_x = pions['1_1']['x'];
		x1_y1_x_calc = x1_y1_x-(radius*1.5);
 
		x1_y1_y = pions['1_1']['y'];
		x1_y1_y_calc = x1_y1_y-(radius*1.5);
 
		// Haut droite
		x9_y1_x = pions[NombreBloc + '_1']['x'];
		x9_y1_x_calc = x9_y1_x+(radius*2.5);
 
		x9_y1_y = pions[NombreBloc + '_1']['y'];
		x9_y1_y_calc = x9_y1_y-(radius*1.5);
 
		// Bas gauche
		x1_y9_x = pions['1_' + NombreBloc]['x'];
		x1_y9_x_calc = x1_y9_x-(radius*2.5);
 
		x1_y9_y = pions['1_' + NombreBloc]['y'];
		x1_y9_y_calc = x1_y9_y+(radius*1.5);
 
		// Bas droite
		x9_y9_x = pions[NombreBloc + '_' + NombreBloc]['x'];
		x9_y9_x_calc = x9_y9_x+(radius*1.5);
 
		x9_y9_y = pions[NombreBloc + '_' + NombreBloc]['y'];
		x9_y9_y_calc = x9_y9_y+(radius*1.5);
 
		// log("1_1': " + x1 + " " + y1);
 
 
		canvas.drawLine({
			layer: true,
			// strokeStyle: '#FF6600',
			fillStyle: '#FFFFFF',
			strokeWidth: 2,
			x1: x1_y1_x_calc, y1: x1_y1_y_calc,
			x2: x9_y9_x_calc, y2: x9_y9_y_calc,
			x3: x1_y9_x_calc, y3: x1_y9_y_calc,
			x4: x9_y1_x_calc, y4: x9_y1_y_calc,
			closed: true
		});
 
 
		canvas.drawLine({
			layer: true,
			// strokeStyle: '#0000FF',
			fillStyle: '#808080',
			strokeWidth: 2,
			x1: x1_y1_x_calc, y1: x1_y1_y_calc,
			x2: x1_y9_x_calc, y2: x1_y9_y_calc,
			x3: x9_y1_x_calc, y3: x9_y1_y_calc,
			x4: x9_y9_x_calc, y4: x9_y9_y_calc,
			closed: true
		});	
 
		canvas.drawLine({
			layer: true,
			// strokeStyle: '#FF0000',
			fillStyle: '#C1C1C1',
			strokeWidth: 2,
			x1: x1_y1_x, y1: x1_y1_y,
			x2: x9_y1_x, y2:  x9_y1_y,
			x3: x9_y9_x, y3: x9_y9_y,
			x4: x1_y9_x, y4: x1_y9_y,
			closed: true
		});	
	}
 
	// Erreur de positionnement du texte:
	function texteGrille() {
		t = 3;
		for (var i=1;i<=NombreBloc;i++) {
			l  = i-1,
 
			// Première version:
			// centerX = pions[i + '_1']['x'];
			// centerY = pions[i + '_1']['y']-radius*1.5;
 
			// canvas.drawText({
				// layer: true,
				// fillStyle: '#FFFFFF',
				// strokeWidth: 2,
				// x: centerX, y: centerY,
				// fontSize: '15pt',
				// fontFamily: 'Verdana, sans-serif',
				// text: i,
				// fromCenter: false
			// }).drawArc({
				// layer: true,
				// strokeStyle: '#000',
				// strokeWidth: 4,
				// x: centerX, y: centerY,
				// radius: 5,
				// fromCenter: false
			// });
 
			// centerX = pions['1_' + i]['x'];
			// centerY = pions['1_' + i]['y']+20;
 
			// canvas.drawText({
				// layer: true,
				// fillStyle: '#FFFFFF',
				// strokeWidth: 2,
				// x: centerX-(radius*t), y: centerY + (radius*i*1.5),
				// fontSize: '15pt',
				// fontFamily: 'Verdana, sans-serif',
				// text: alpha[l],
				// fromCenter: false
			// }).drawArc({
				// layer: true,
				// strokeStyle: '#000',
				// strokeWidth: 4,
				// x: centerX-(radius*t), y: centerY + (radius*i*1.5),
				// radius: 5,
				// fromCenter: false
			// });			
			// t -= 0.10;
 
 
			//Autre version:
			centerX = pions[i + '_1']['x'];
			centerY = pions[i + '_1']['y'];
 
			canvas.drawText({
				layer: true,
				fillStyle: '#FF0000',
				strokeWidth: 2,
				x: centerX, y: centerY,
				fontSize: '15pt',
				fontFamily: 'Verdana, sans-serif',
				text: i,
			}).drawArc({
				layer: true,
				strokeStyle: '#FF0000',
				strokeWidth: 4,
				x: centerX, y: centerY,
				radius: 4
			});
 
 
			centerX = pions['1_' + i]['x'];
			centerY = pions['1_' + i]['y'];
 
			canvas.drawText({
				layer: true,
				fillStyle: '#0000FF',
				strokeWidth: 2,
				x: centerX, y: centerY,
				fontSize: '15pt',
				fontFamily: 'Verdana, sans-serif',
				text: alpha[l],
			}).drawArc({
				layer: true,
				strokeStyle: '#0000FF',
				strokeWidth: 4,
				x: centerX, y: centerY,
				radius: 8
			});
		}
	}
 
	// Le but était de stocker un bord avec un num spécial pour voir si le chemoin commence au bord des deux coté:
	function boucle() {
		log(pions);
		for (var x=1;x<=NombreBloc;x++) {
            for (var y=1;y<=NombreBloc;y++) {
				key = x + "_" + y;
				p = pions[key];
				if(p['bord'] == 3)
					{
						log(key + " " + p["couleur"]);
					}
				else if(p['bord'] == 1)
					{
						log(key + " " + p["couleur"]);
					}
				else
					{
					}
			}
		}
	}
 
	// bloc cliqué param et ça couleur..., ça couleur
	function test(dataRecus, couleurRecus) {
 
		// key du bloc cliqué
		keyRecus = dataRecus.name.split("_");
		// log(keyRecus);
 
		keyRecus_x = Number.parseInt(keyRecus[0]);
		keyRecus_y = Number.parseInt(keyRecus[1]);
 
 
		// log("-----");
		// log(pions);
		// log(dataRecus);
		// log(couleurRecus);
		// log("-----");	
 
 
		// On regarde les cases autour:
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x-1, keyRecus_y-1, couleurRecus);
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x, keyRecus_y-1, couleurRecus);
 
		// centre
		// testBloc(keyRecus[0], keyRecus[1], "#FF0000");
 
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x+1, keyRecus_y, couleurRecus);
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x-1, keyRecus_y, couleurRecus);
 
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x+1, keyRecus_y+1, couleurRecus);
		testBloc(keyRecus_x , keyRecus_y, keyRecus_x, keyRecus_y+1, couleurRecus);
		log(pions);
	}
 
	// Case d'origine, case testé
	function testBloc(xO , yO, x, y, couleurRecus) {
 
		// On regarde si on est sur la grille:
		if( ((x > 0) && (x <= NombreBloc)) && ((y > 0) && (y <= NombreBloc)))
			{		
				x_t = x.toString();
				y_t = y.toString();
 
				data_color = pions[x + "_" + y]['couleur'];
 
				// log(x_t + " " + y_t + " " + data_color + " " + joueur_couleur['joueur_1']);
 
				// log(data_color + " " + joueur_couleur['joueur_1']);
				if(data_color == couleurRecus)
					{
						if(couleurRecus == joueur_couleur['joueur_1'])
							{
								pions[x + "_" + y]["bord"] = 1;
								pions[xO + "_" + yO]["bord"] = 1;
							}
						else
							{
								pions[x + "_" + y]["bord"] = 1;
								pions[xO + "_" + yO]["bord"] = 2;
							}
						// canvas.animateLayer(data, { "fillStyle": "#C1C1C1"});
					}
				else
					{
					}
			}
		else
			{
				// log("erreur " + x_t + " " + y_t);
			}
	}
 
	// -------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
 
});