Provera pobede u igri Iks-Oks na JavaScript

Sada je došlo vreme da napišemo kod koji će određivati pobedu i ispisivati ime pobednika.

Nakon razmišljanja o zadatku, može se smisliti da proveru na prisustvo pobede treba izvršiti u svakom potezu:

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);
			
			// ovde treba da proveravamo pobedu ili nerešen rezultat
			
			i++;
		});
	}
}

Napravimo funkciju isVictory, koja će kao parametar primati niz ćelija i vraćati true, ako na tabli postoji pobeda, i false, ako ne postoji. Mi ćemo koristiti ovu funkciju na sledeći način:

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('ime pobednika');
			}
			
			i++;
		});
	}
}

Kako da saznamo ime pobednika? Očigledno je da se njegovo ime nalazi u svakoj od pobedničkih ćelija. Da pojasnim: ako imamo pobedu, to znači da određene 3 ćelije horizontalno, vertikalno ili dijagonalno sadrže istu vrednost: ili iks, ili oks.

Očigledno je da je vrednost bilo koje od tih ćelija zapravo ime pobednika. Ali možemo ići i drugim, manje očiglednim putem: pošto određujemo prisustvo pobede svakim potezom, onda je logično da pobednik bude igrač koji je izvršio poslednji potez. Ime tog igrača se nalazi u tekstu kliknute ćelije:

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); // ispisujemo ime pobednika
			}
			
			i++;
		});
	}
}

Implementacija isVictory

Kako tehnički da odredimo prisustvo pobede na tabli? Ako dobro sve razmislimo, možemo doći do zaključka da na tabli postoji ograničen broj trojki ćelija.

To znači da za proveru pobede možemo jednostavno proveriti sve te trojke. Potrebno je proveriti da li trojke imaju iste, ne prazne vrednosti (to jest tamo je ili iks, ili oks).

Napravićemo dvodimenzionalni niz, u svakom podnizu kojeg će biti brojevi ćelija jedne od trojki:

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

Napišimo pomoću ovog niza određivanje pobede:

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

Sami, bez gledanja u moj kod, implementirajte opisano. Proverite kako funkcioniše proces igre.

Pokušajte da implementirate proveru nerešenog rezultata. U sledećoj lekciji će biti razjašnjenje ovog dela.