Kontroleer van 'n oorwinning in die Tic-Tac-Toe speletjie in JavaScript

Nou is dit tyd om die kode te skryf wat die oorwinning sal bepaal en die wenner se naam sal vertoon.

Na oorweging van die taak, kan ons tot die gevolgtrekking kom dat die kontrole vir 'n oorwinning by elke beurt uitgevoer moet word:

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);
			
			// hier moet ons 'n oorwinning of gelykop kontroleer
			
			i++;
		});
	}
}

Kom ons maak 'n funksie isVictory, wat 'n skikking van selle as parameter sal neem en true sal terugstuur as daar 'n oorwinning op die bord is, en false as nie. Ons sal hierdie funksie soos volg gebruik:

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('wenner se naam');
			}
			
			i++;
		});
	}
}

Hoe weet ons wie die wenner se naam is? Dit is duidelik dat sy naam in elk van die wenende selle gestoor is. Laat ek verduidelik: as daar 'n oorwinning is, dan beteken dit dat sekere 3 selle horisontaal, vertikaal of diagonaal dieselfde waarde bevat: óf 'n kruisie, óf 'n nol.

Dit is duidelik dat die waarde van enige van hierdie selle die wenner se naam is. Maar ons kan ook 'n ander, minder voor die hand liggende, weg volg: aangesien ons die teenwoordigheid van 'n oorwinning by elke beurt bepaal, is dit logies dat die wenner die speler sal wees wat die laaste beurt gedoen het. Die naam van hierdie speler is vervat in die teks van die sel wat geklik is:

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); // vertoon die wenner se naam
			}
			
			i++;
		});
	}
}

Implementering van isVictory

Hoe bepaal ons tegnies die teenwoordigheid van 'n oorwinning op die bord? As ons alles goed oorweeg, kan ons tot die gevolgtrekking kom dat daar 'n beperkte aantal drietalle selle op die bord is.

Dit beteken dat om 'n oorwinning te kontroleer, ons eenvoudig al hierdie drietalle kan nagaan. Ons moet kontroleer of die drietalle identiese, nie-leë waardes het (dit wil sê óf 'n kruisie, óf 'n nol).

Kom ons maak 'n tweedimensionele skikking, waar elke subskikking die nommers van die selle van een van die drietalle sal bevat:

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

Kom ons skryf die bepaling van 'n oorwinning met behulp van hierdie skikking:

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

Implementeer dit selfstandig, sonder om na my kode te kyk. Toets hoe die spelproses funksioneer.

Probeer om die kontrole vir 'n gelykop te implementeer. In die volgende les sal hierdie deel bespreek word.