Vérification de la victoire dans le jeu du morpion en JavaScript

Il est maintenant temps d'écrire le code qui déterminera la victoire et affichera le nom du gagnant.

Après réflexion sur la tâche, on peut comprendre que la vérification de la présence d'une victoire doit être effectuée à chaque coup :

function init(selector) {
	let cells = document.querySelectorAll('#field td');
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function step() {
			this.textContent = ['X', 'O'][i % 2];
			this.removeEventListener('click', step);
			
			// ici nous devons vérifier la victoire ou le match nul
			
			i++;
		});
	}
}

Créons une fonction isVictory, qui prendra en paramètre un tableau de cellules et retournera true si sur le plateau il y a une victoire, et false sinon. Nous utiliserons cette fonction de la manière suivante :

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function step() {
			this.textContent = ['X', 'O'][i % 2];
			this.removeEventListener('click', step);
			
			if (isVictory(cells)) {
				alert('nom du gagnant');
			}
			
			i++;
		});
	}
}

Comment connaissons-nous le nom du gagnant ? Évidemment, son nom est stocké dans chacune des cellules gagnantes. Je précise : si nous avons une victoire, cela signifie que certaines 3 cellules horizontalement, verticalement ou en diagonale contiennent la même valeur : soit une croix, soit un rond.

Évidemment, la valeur de n'importe laquelle de ces cellules est le nom du gagnant. Mais on peut aussi procéder d'une autre manière, moins évidente : comme nous déterminons la présence d'une victoire à chaque coup, il est logique que le gagnant soit le joueur ayant effectué le dernier coup. Le nom de ce joueur est contenu dans le texte de la cellule cliquée :

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function step() {
			this.textContent = ['X', 'O'][i % 2];
			this.removeEventListener('click', step);
			
			if (isVictory(cells)) {
				alert(this.textContent); // affiche le nom du gagnant
			}
			
			i++;
		});
	}
}

Implémentation de isVictory

Comment déterminer techniquement la présence d'une victoire sur le plateau ? Si on y réfléchit bien, on peut arriver à la conclusion qu'il y a un nombre limité de triplets de cellules.

Autrement dit, pour vérifier la victoire, on peut simplement vérifier tous ces triplets. Il faut vérifier que les triplets ont des valeurs identiques non vides (c'est-à-dire qu'il y ait soit une croix, soit un rond).

Créons un tableau à deux dimensions, dans chaque sous-tableau duquel se trouveront les numéros des cellules d'un des triplets :

let combs = [
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	[0, 4, 8],
	[2, 4, 6],
];

Écrivons la détection de la victoire à l'aide de ce tableau :

function isVictory(cells) {
	let combs = [
		[0, 1, 2],
		[3, 4, 5],
		[6, 7, 8],
		[0, 3, 6],
		[1, 4, 7],
		[2, 5, 8],
		[0, 4, 8],
		[2, 4, 6],
	];

	for (let comb of combs) {
		if (
			cells[comb[0]].textContent == cells[comb[1]].textContent &&
			cells[comb[1]].textContent == cells[comb[2]].textContent &&
			cells[comb[0]].textContent != ''
		) {
			return true;
		}
	}
	
	return false;
}

Indépendamment, sans regarder mon code, implémentez ce qui est décrit. Vérifiez le fonctionnement du processus de jeu.

Essayez d'implémenter la vérification du match nul. La prochaine leçon sera consacrée à l'explication de cette partie.