Uzvaras pārbaude krustiņu-nullīšu spēlē JavaScript

Tagad ir pienācis laiks uzrakstīt kodu, kas noteiks uzvaru un izvadīs uzvarētāja vārdu.

Izvērtējot uzdevumu, var secināt, ka uzvaras pārbaudi vajadzētu veikt katrā gājienā:

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);
			
			// šeit mums jāpārbauda uzvara vai neizšķirts
			
			i++;
		});
	}
}

Izveidosim funkciju isVictory, kas parametru pieņems kā šūnu masīvu un atgriezīs true, ja uz laukuma ir uzvara, un false, ja nav. Mēs izmantosim šo funkciju šādi:

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('uzvarētāja vārds');
			}
			
			i++;
		});
	}
}

Kā mēs varam uzzināt uzvarētāja vārdu? Acīmredzami, ka viņa vārds tiek glabāts katrā no uzvarējušajām šūnām. Paskaidrošu: ja mums ir uzvara, tad tas nozīmē, ka dažas 3 šūnas pa horizontāli, vertikāli vai diagonāli satur identisku vērtību: vai nu krustiņu, vai nu nullīti.

Acīmredzami, ka jebkuras no šīm šūnām vērtība ir uzvarētāja vārds. Bet var izvēlēties citu, mazāk acīmredzamu ceļu: tā kā mēs nosakām uzvaras esamību katrā gājienā, tad loģiski, ka uzvarētājs būs spēlētājs, kurš veica pēdējo gājienu. Šī spēlētāja vārds atrodas noklikšķinātās šūnas tekstā:

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); // izvadām uzvarētāja vārdu
			}
			
			i++;
		});
	}
}

IsVictory realizācija

Kā mums tehniski noteikt uzvaras esamību uz laukuma? Ja labi visu izvērtē, tad var nonākt pie secinājuma, ka uz laukuma ir ierobežots skaits šūnu trijnieku.

Tas nozīmē, ka uzvaras pārbaudei var vienkārši pārbaudīt visus šos trijniekus. Jāpārbauda, vai trijniekiem ir identiskas ne tukšas vērtības (tas ir, vai nu krustiņš, vai nu nullīte).

Izveidosim divdimensiju masīvu, kurā katrā apakšmasīvā būs viena no trijnieku šūnu numuriem:

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

Uzrakstīsim ar šī masīva palīdzību uzvaras noteikšanu:

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

Patstāvīgi, neieskatoties manā kodā, realizējiet aprakstīto. Pārbaudiet, kā funkcionē spēles process.

Mēģiniet realizēt neizšķirta pārbaudi. Nākamajā nodarbībā būs šīs vietas izklāsts.