Sjekk av seier i spillet bondesjakk på JavaScript

Nå er det på tide å skrive kode som vil bestemme seier og vise vinnerens navn.

Etter å ha tenkt gjennom oppgaven, kan man finne ut at sjekk for seier bør utføres i hvert trekk:

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 sjekke for seier eller uavgjort
			
			i++;
		});
	}
}

La oss lage en funksjon isVictory, som tar en array med celler som parameter og returnerer true hvis det er seier på brettet, og false hvis ikke. Vi vil bruke denne funksjonen på følgende måte:

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

Hvordan skal vi finne ut vinnerens navn? Det er opplagt at navnet hans lagres i hver av de vinnende cellene. La meg forklare: hvis vi har en seier, så betyr det at noen 3 celler horisontalt, vertikalt eller diagonalt inneholder samme verdi: enten kryss eller sirkel.

Det er opplagt at verdien til en hvilken som helst av disse cellene er vinnerens navn. Men man kan også gå en annen, mindre opplagt vei: siden vi bestemmer forekomsten av seier hvert trekk, er det logisk at vinneren vil være spilleren som utførte det siste trekket. Navnet til denne spilleren finnes i teksten til den klikkede cellen:

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 vinnerens navn
			}
			
			i++;
		});
	}
}

Implementering av isVictory

Hvordan skal vi teknisk bestemme forekomsten av seier på brettet? Hvis man tenker godt gjennom alt, kan man komme til den konklusjon at brettet har et begrenset antall tripler av celler.

Det vil si at for å sjekke seier kan man ganske enkelt sjekke alle disse triplene. Man må sjekke at triplene har identiske ikke-tomme verdier (det vil si at det enten er kryss eller sirkel).

La oss lage en todimensjonal array, hvor hver underarray vil inneholde numrene til cellene i ett av triplene:

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

La oss skrive seiersbestemmelsen ved hjelp av denne arrayen:

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 på egen hånd uten å kikke på koden min. Sjekk hvordan spillets gang fungerer.

Prøv å implementere sjekk for uavgjort. I neste leksjon vil dette punktet bli gjennomgått.