Preverjanje zmage v igri križci-krožci v JavaScript

Zdaj je čas, da napišemo kodo, ki bo določala zmago in izpisala ime zmagovalca.

Po premisleku lahko ugotovimo, da preverjanje za prisotnost zmage moramo izvajati ob vsakem potezi:

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);
			
			// tukaj moramo preveriti zmago ali neodločen rezultat
			
			i++;
		});
	}
}

Naredimo funkcijo isVictory, ki bo kot parameter sprejela polje celic in vrnila true, če je na igrišču prišlo do zmage, in false, če ni. To funkcijo bomo uporabljali na naslednji 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 zmagovalca');
			}
			
			i++;
		});
	}
}

Kako lahko ugotovimo ime zmagovalca? Očitno je, da je njegovo ime shranjeno v vsaki od zmagovalnih celic. Naj pojasnim: če imamo zmago, to pomeni, da nekatere 3 celice vodoravno, navpično ali diagonalno vsebujejo isto vrednost: bodisi križec bodisi krog.

Očitno je, da je vrednost katere koli od teh celic ime zmagovalca. Lahko pa gremo tudi po drugi, manj očitni poti: ker določamo prisotnost zmage ob vsaki potezi, je logično, da bo zmagovalec igralec, ki je opravil zadnjo potezo. Ime tega igralca je vsebovano v besedilu kliknjene celice:

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); // izpišemo ime zmagovalca
			}
			
			i++;
		});
	}
}

Implementacija isVictory

Kako lahko tehnično določimo prisotnost zmage na igrišču? Če dobro premislimo, lahko pridemo do zaključka, da je na igrišču omejeno število trojic celic.

To pomeni, da za preverjanje zmage lahko preprosto preverimo vse te trojice. Preveriti moramo, da imajo trojice enake neprazne vrednosti (to je bodisi križec bodisi krog).

Naredimo dvodimenzionalno polje, v vsakem podpolju katerega bodo številke celic ene od trojic:

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

Z uporabo tega polja napišimo določitev zmage:

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

Samostojno, brez zaganjanja v mojo kodo, implementirajte opisano. Preverite, kako deluje igralni proces.

Poskusite implementirati preverjanje neodločenega rezultata. V naslednji lekciji bo razčlenitev tega mesta.