Kontrol af sejr i Kryds og Bolle spil i JavaScript

Nu er det tid til at skrive kode, som vil bestemme sejren og udskrive vinderens navn.

Efter at have tænkt over opgaven, kan man indse, at kontrollen for en sejr bør udføres i hvert træk:

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);
			
			// her skal vi kontrollere for sejr eller uafgjort
			
			i++;
		});
	}
}

Lad os lave en funktion isVictory, som vil tage et array af celler som parameter og returnere true, hvis der er en sejr på brættet, og false, hvis ikke. Vi vil bruge denne funktion på følgende måde:

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('vinderens navn');
			}
			
			i++;
		});
	}
}

Hvordan finder vi ud af vinderens navn? Det er indlysende, at hans/hendes navn er gemt i hver af de vindende celler. Lad mig forklare: hvis vi har en sejr, så betyder det, at visse 3 celler vandret, lodret eller diagonalt indeholder samme værdi: enten et kryds eller en bolle.

Det er indlysende, at værdien af enhver af disse celler er vinderens navn. Men man kan også gå en anden, mindre indlysende vej: da vi bestemmer tilstedeværelsen af en sejr i hvert træk, er det logisk, at vinderen vil være den spiller, der foretog det sidste træk. Navnet på denne spiller findes i teksten i den klikkede celle:

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); // viser vinderens navn
			}
			
			i++;
		});
	}
}

Implementering af isVictory

Hvordan bestemmer vi teknisk tilstedeværelsen af en sejr på brættet? Hvis man tænker godt over det, kan man komme til den konklusion, at der er et begrænset antal tripler af celler på brættet.

Det vil sige, for at kontrollere sejr kan man simpelthen kontrollere alle disse tripler. Vi skal kontrollere at triplerne har ens ikke-tomme værdier (det vil sige, enten kryds eller bolle).

Lad os lave et todimensionelt array, hvor hvert underarray indeholder numrene på cellerne i en af triplerne:

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

Lad os ved hjælp af dette array skrive sejrsbestemmelsen:

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

Implementer det beskrevne selvstændigt uden at kigge i min kode. Test, hvordan spilleprocessen fungerer.

Prøv at implementere kontrol for uafgjort. I næste lektion vil dette emne blive gennemgået.