Wincontrole in Boter, Kaas en Eieren spel in JavaScript

Nu is het tijd om code te schrijven die de overwinning bepaalt en de naam van de winnaar weergeeft.

Na het overdenken van de taak, kunnen we bedenken dat de controle op een overwinning bij elke zet moet worden uitgevoerd:

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 moeten we controleren op overwinning of gelijkspel
			
			i++;
		});
	}
}

Laten we een functie isVictory maken, die als parameter een array met cellen zal accepteren en true retourneert, als er een overwinning is op het bord, en false, als dat niet zo is. We zullen deze functie als volgt gebruiken:

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('naam van de winnaar');
			}
			
			i++;
		});
	}
}

Hoe komen we erachter wie de winnaar is? Het is duidelijk dat zijn naam is opgeslagen in elk van de winnende cellen. Om het uit te leggen: als we een overwinning hebben, betekent dit dat sommige 3 cellen horizontaal, verticaal of diagonaal dezelfde waarde bevatten: ofwel een kruisje, ofwel een rondje.

Het is duidelijk dat de waarde van een van deze cellen de naam van de winnaar is. Maar we kunnen ook een andere, minder voor de hand liggende weg bewandelen: omdat we de aanwezigheid van een overwinning elke zet bepalen, is het logisch dat de winnaar de speler is die de laatste zet heeft gedaan. De naam van deze speler staat in de tekst van de aangeklikte cel:

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); // geven de naam van de winnaar weer
			}
			
			i++;
		});
	}
}

Implementatie van isVictory

Hoe bepalen we technisch gezien de aanwezigheid van een overwinning op het bord? Als we er goed over nadenken, dan kunnen we tot de conclusie komen dat er een beperkt aantal drietallen cellen op het bord is.

Dat betekent dat voor wincontrole we simpelweg al deze drietallen kunnen controleren. We moeten controleren of de drietallen identieke niet-lege waarden hebben (dat wil zeggen, of er een kruisje of een rondje staat).

Laten we een tweedimensionale array maken, waarin elke subarray de nummers van de cellen van een van de drietallen 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],
];

Laten we met behulp van deze array de winstbepaling schrijven:

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 zelfstandig, zonder in mijn code te spieken. Test hoe het spelproces functioneert.

Probeer de controle op gelijkspel te implementeren. In de volgende les wordt dit onderdeel behandeld.