Kontrola výhry v hre piškvorky na JavaScripte

Teraz prišiel čas napísať kód, ktorý bude určovať výhru a zobrazovať meno víťaza.

Po premyslení úlohy môžeme usúdiť, že kontrolu na prítomnosť výhry by sme mali vykonávať v každom ťahu:

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);
			
			// tu by sme mali kontrolovať výhru alebo remízu
			
			i++;
		});
	}
}

Urobme funkciu isVictory, ktorá ako parameter bude prijímať pole buniek a vráti true, ak na hracom poli je výhra, a false, ak nie. My budeme používať túto funkciu nasledujúcim spôsobom:

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('meno víťaza');
			}
			
			i++;
		});
	}
}

Ako však zistíme meno víťaza? Je zrejmé, že jeho meno je uložené v každej z víťazných buniek. Vysvetlím: ak máme výhru, tak to znamená, že niektoré 3 bunky v horizontálnom, vertikálnom alebo diagonálnom smere obsahujú rovnakú hodnotu: buď X, alebo O.

Je zrejmé, že hodnota akejkoľvek z týchto buniek je menom víťaza. Ale môžeme ísť aj inou, menej zrejmou cestou: keďže určujeme prítomnosť výhry v každom ťahu, tak je logické, že víťazom bude hráč, ktorý vykonal posledný ťah. Meno tohto hráča je obsiahnuté v texte kliknutej bunky:

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); // zobrazíme meno víťaza
			}
			
			i++;
		});
	}
}

Implementácia isVictory

Ako technicky určíme prítomnosť výhry na hracom poli? Ak si to dobre premyslíme, môžeme dospieť k záveru, že na poli je obmedzené množstvo trojíc buniek.

To znamená, že na kontrolu výhry môžeme jednoducho skontrolovať všetky tieto trojice. Musíme kontrolovať, či trojice majú rovnaké neprázdne hodnoty (čiže tam je buď X, alebo O).

Vytvorme dvojrozmerné pole, v každom podpoli ktorého budú čísla buniek jednej z trojíc:

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

Pomocou tohto poľa napíšme definíciu výhry:

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

Samostatne, bez nahliadnutia do môjho kódu, implementujte opísané. Skontrolujte, ako funguje herný proces.

Skúste implementovať kontrolu remízy. V nasledujúcej lekcii bude rozbor tohto miesta.