Verificarea victoriei în jocul X și O pe JavaScript

Acum este momentul să scriem codul care va determina victoria și va afișa numele câștigătorului.

După ce am analizat sarcina, putem deduce că verificarea prezenței victoriei ar trebui efectuată la fiecare mutare:

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);
			
			// aici ar trebui să verificăm victoria sau remiza
			
			i++;
		});
	}
}

Să creăm funcția isVictory, care va primi ca parametru un array de celule și va returna true, dacă pe tablă există o victorie, și false, dacă nu. Vom folosi această funcție în felul următor:

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('numele câștigătorului');
			}
			
			i++;
		});
	}
}

Cum putem afla numele câștigătorului? Evident, numele lui este stocat în fiecare dintre celulele câștigătoare. Explic: dacă avem o victorie, atunci asta înseamnă că 3 celule pe orizontală, verticală sau diagonală conțin aceeași valoare: fie X, fie O.

Evident, valoarea oricăreia dintre aceste celule este chiar numele câștigătorului. Dar putem merge și pe un alt, mai puțin evident drum: deoarece determinăm prezența victoriei la fiecare mutare, este logic că câștigătorul va fi jucătorul care a făcut ultima mutare. Numele acestui jucător este conținut în textul celulei pe care s-a dat click:

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); // afișăm numele câștigătorului
			}
			
			i++;
		});
	}
}

Implementarea isVictory

Cum putem determina tehnic prezența unei victorii pe tablă? Dacă analizăm bine totul, putem ajunge la concluzia că pe tablă există un număr limitat de tripleți de celule.

Adică pentru a verifica victoria putem pur și simplu verifica toți acești tripleți. Trebuie să verificăm dacă tripleții au valori identice și negoale (adică fie X, fie O).

Să creăm un array bidimensional, în fiecare subarray al căruia vor fi numerele celulelor unuia dintre tripleți:

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

Să scriem cu ajutorul acestui array determinarea victoriei:

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

Independent, fără a privi în codul meu, implementați cele descrise. Verificați cum funcționează procesul de joc.

Încercați să implementați verificarea remizei. În lecția următoare va fi analizat acest aspect.