Jeux du Morpion détecter les cases gagnantes
Bonjour, c'est encore moi ^^
J'essaye toujours de faire un morpion, et j'en suis au stade où on peut cliquer sur les cases, et où les ronds et les croix apparaissent en alternance (comme dans un vrai morpion finalement).
Voici le tableau qui me sert de grille de jeu :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <table id="grille">
<tr>
<td id="A1" nowrap="nowrap" onclick="placerSigne(id)"></td>
<td id="B1" nowrap="nowrap" onclick="placerSigne(id)"></td>
<td id="C1" nowrap="nowrap" onclick="placerSigne(id)"></td>
</tr>
<tr>
<td id="A2" nowrap="nowrap" onclick="placerSigne(id)"></td>
<td id="B2" nowrap="nowrap" onclick="placerSigne(id)"></td>
<td id="C2" nowrap="nowrap" onclick="placerSigne(id)"></td>
</tr>
<tr>
<td id="A3" nowrap="nowrap" onclick="placerSigne(id)"></td>
<td id="B3" nowrap="nowrap" onclick="placerSigne(id)"></td>
<td id="C3" nowrap="nowrap" onclick="placerSigne(id)"></td>
</tr>
</table> |
Et le js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var tourCroix = true; /* Afin de savoir quel symbole est "en train de jouer", et donc quelle image placer */
var sourceImage; /* Sera modifiée selon l'image que l'on souhaite utiliser (rond / croix) */
var image; /* Variable qui contiendra la source complète de l'image à afficher. On l'utilisera lorsque on voudra placer un des signes */
function placerSigne(id) {
var sourceImage = 'Rond.png'; /* On prédéfini la source de l'image comme étant le rond */
if (tourCroix === true) {
sourceImage = 'Croix.png'; } /* Si c'est le tour du J1 on défini la source comme étant la croix, sinon on laisse le rond pour le J2 */
image = '<img src="' + sourceImage + '"/>'; /* On attribut à "image" la source complète de l'image à afficher */
document.getElementById(id).innerHTML = image; /* On affiche dans la case cliquée l'image */
tourCroix = !tourCroix; } /* Toggle la variable entre true et false pour faire alterner les tours */ |
Le problème que j'ai maintenant, est que je ne sais pas vraiment comment détecter lorsque quelqu'un gagne.
J'ai cherché sur internet, et j'ai trouvé plus où moins ce que je cherchais mais je ne comprenais pas vraiment le code, de plus il ne correspondait pas vraiment à ce que je veux faire.
Il me faut détecter lorsque 3 images de rond ou de croix sont alignées dans les 3 lignes verticales et les 3 lignes horizontales ainsi que dans les 2 diagonales.
Auriez vous une idée ?
Merci :)
