Überprüfung des Gewinns im Spiel Tic-Tac-Toe mit JavaScript

Nun ist es an der Zeit, Code zu schreiben, der den Gewinn feststellt und den Namen des Gewinners ausgibt.

Nachdem wir die Aufgabe durchdacht haben, können wir feststellen, dass die Überprüfung auf einen Gewinn bei jedem Zug erfolgen sollte:

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);
			
			// hier sollten wir auf Gewinn oder Unentschieden prüfen
			
			i++;
		});
	}
}

Lassen Sie uns eine Funktion isVictory erstellen, die als Parameter ein Array von Zellen entgegennimmt und true zurückgibt, wenn auf dem Spielfeld ein Gewinn vorliegt, andernfalls false. Wir werden diese Funktion wie folgt verwenden:

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('Name des Gewinners');
			}
			
			i++;
		});
	}
}

Wie finden wir den Namen des Gewinners heraus? Offensichtlich steht sein Name in jeder der gewinnenden Zellen. Um es zu erklären: Wenn wir einen Gewinn haben, dann bedeutet das, dass einige 3 Zellen in horizontaler, vertikaler oder diagonaler Reihe das gleiche Symbol enthalten: entweder ein X oder ein O.

Offensichtlich ist der Wert einer beliebigen dieser Zellen der Name des Gewinners. Man kann aber auch einen anderen, weniger offensichtlichen Weg gehen: Da wir die Anwesenheit eines Gewinns bei jedem Zug überprüfen, ist es logisch, dass der Gewinner der Spieler ist, der den letzten Zug gemacht hat. Der Name dieses Spielers steht im Text der angeklickten Zelle:

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); // geben den Namen des Gewinners aus
			}
			
			i++;
		});
	}
}

Implementierung von isVictory

Wie können wir technisch das Vorliegen eines Gewinns auf dem Feld feststellen? Wenn man alles gut durchdenkt, kann man zu dem Schluss kommen, dass es auf dem Feld eine begrenzte Anzahl von Zieldrillingen gibt.

Das heißt, zur Überprüfung des Gewinns kann man einfach alle diese Drillinge überprüfen. Man muss prüfen, ob die Drillinge die gleichen, nicht-leeren Werte haben (also entweder X oder O).

Erstellen wir ein zweidimensionales Array, in jedem Subarray davon stehen die Nummern der Zellen eines der Drillinge:

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],
];

Schreiben wir mit Hilfe dieses Arrays die Gewinnüberprüfung:

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

Implementieren Sie das Beschriebene selbständig, ohne in meinen Code zu schauen. Testen Sie, wie der Spielablauf funktioniert.

Versuchen Sie, die Überprüfung auf Unentschieden zu implementieren. In der nächsten Lektion wird dieser Teil besprochen.