Kryžiukų-nuliukų žaidimo pergalės patikrinimas JavaScript

Dabar atėjo laikas parašyti kodą, kuris nustatys pergalę ir išves laimėtojo vardą.

Apgalvojus užduotį, galima suvokti, kad pergalės patikrinimą reikėtų atlikti kiekviename ėjime:

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);
			
			// čia turėtume patikrinti pergalę arba lygiąsias
			
			i++;
		});
	}
}

Sukurkime funkciją isVictory, kuri parametru priims masyvą ląstelių ir grąžins true, jei lauke yra pergalė, ir false, jei ne. Mes naudosimės šia funkcija taip:

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('laimėtojo vardas');
			}
			
			i++;
		});
	}
}

Kaip mums sužinoti laimėtojo vardą? Akivaizdu, kad jo vardas saugomas kiekvienoje laimėjusioje ląstelėje. Paaiškinsiu: jei turime pergalę, tai reiškia, kad tam tikros 3 ląstelės horizontaliai, vertikaliai arba įstrižai turi vienodą reikšmę: arba kryžiuką, arba nuliuką.

Akivaizdu, kad bet kurios iš šių ląstelių reikšmė ir yra laimėtojo vardas. Tačiau galima eiti ir kitu, mažiau akivaizdžiu keliu: kadangi mes nustatome pergalės buvimą kiekvieną ėjimą, logiška, kad laimėtojas bus žaidėjas, atlikęs paskutinį ėjimą. Šio žaidėjo vardas yra paspaustos ląstelės tekste:

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); // išvedame laimėtojo vardą
			}
			
			i++;
		});
	}
}

isVictory realizacija

Kaip mums techniškai nustatyti pergalės buvimą lauke? Jei gerai viską apgalvoti, galima priiti prie išvados, kad lauke yra ribotas skaičius ląstelių trejetų.

Tai yra, norint patikrinti pergalę, galima tiesiog patikrinti visus šiuos trejetus. Reikia tikrinti, ar trejetai turi vienodas ne tuščias reikšmes (tai yra ten yra arba kryžiukas, arba nuliukas).

Sukurkime dvimatį masyvą, kuriame kiekviename pomasyve bus vieno iš trejetų ląstelių numeriai:

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

Parašykime naudodamiesi šiuo masyvu pergalės nustatymą:

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

Savarankiškai, neįsižiūrėdami į mano kodą, įgyvendinkite aprašytą. Patikrinkite, kaip funkcionuoja žaidimo procesas.

Pabandykite įgyvendinti lygiųjų patikrinimą. Kitoje pamokoje bus šios vietos analizė.