Győzelem ellenőrzése tic-tac-toe játékban JavaScriptben

Most eljött az ideje, hogy megírjuk a kódot, amely megállapítja a győzelmet és kiírja a győztes nevét.

A feladat átgondolása után arra következtethetünk, hogy a győzelem ellenőrzését minden lépésnél el kell végezni:

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);
			
			// itt kell ellenőriznünk a győzelmet vagy döntetlent
			
			i++;
		});
	}
}

Készítsünk egy isVictory függvényt, amely paraméterként egy tömböt fogad a mezőkről, és true értéket ad vissza, ha a pályán van győzelem, és false értéket, ha nincs. A függvényt a következőképpen fogjuk használni:

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('a győztes neve');
			}
			
			i++;
		});
	}
}

Hogyan tudjuk megtudni a győztes nevét? Nyilvánvaló, hogy a neve minden győztes mezőben tárolódik. Megmagyarázom: ha van győzelem, akkor ez azt jelenti, hogy bizonyos 3 mező vízszintesen, függőlegesen vagy átlósan tartalmaz azonos értéket: vagy X, vagy O.

Nyilvánvaló, hogy ezen mezők bármelyikének értéke maga a győztes neve. De vehetünk egy másik, kevésbé nyilvánvaló utat is: mivel minden lépésnél megállapítjuk a győzelem jelenlétét, logikus, hogy a győztes az a játékos lesz, aki az utolsó lépést tenne. Ennek a játékosnak a neve a kattintott mező szövegében található:

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); // kiírjuk a győztes nevét
			}
			
			i++;
		});
	}
}

Az isVictory megvalósítása

Hogyan állapíthatjuk meg technikailag a győzelem jelenlétét a pályán? Ha jól átgondoljuk, arra a következtetésre juthatunk, hogy a pályán korlátozott számú mezőhármas van.

Vagyis a győzelem ellenőrzéséhez egyszerűen ellenőrizni kell ezeket a hármasokat. Ellenőrizni kell, hogy a hármasoknak azonos nem üres értékeik vannak-e (vagyis X vagy O).

Készítsünk egy kétdimenziós tömböt, amelynek minden résztömbje az egyik hármas mezőszámait tartalmazza:

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

Írjuk meg ezzel a tömbbel a győzelem meghatározását:

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

Önállóan, az én kódom belenézés nélkül valósítsd meg a leírtakat. Ellenőrizd, hogyan működik a játékmenet.

Próbáld meg megvalósítani a döntetlen ellenőrzését. A következő leckében ezt a részt vesszük.