Kontroll av vinst i Tre-i-rad spel på JavaScript

Nu är det dags att skriva kod som kommer att avgöra vinsten och visa vinnarens namn.

Efter att ha tänkt på uppgiften kan man inse att kontrollen för att se om någon vunnit bör utföras i varje drag:

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);
			
			// här bör vi kontrollera vinst eller oavgjort
			
			i++;
		});
	}
}

Låt oss skapa en funktion isVictory, som tar en array med celler som parameter och returnerar true om det finns en vinst på planen, och false om det inte gör det. Vi kommer att använda denna funktion på följande sätt:

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('vinnarens namn');
			}
			
			i++;
		});
	}
}

Hur ska vi veta vinnarens namn? Uppenbarligen finns dess namn i varje av de vinnande cellerna. För att förtydliga: om vi har en vinst, så betyder det att vissa 3 celler horisontellt, vertikalt eller diagonalt innehåller samma värde: antingen ett kryss eller en ring.

Uppenbarligen är värdet i vilken som helst av dessa celler vinnarens namn. Men man kan också gå en annan, mindre uppenbar väg: eftersom vi avgör förekomsten av en vinst varje drag, så är det logiskt att vinnaren är spelaren som gjorde det sista draget. Denna spelares namn finns i texten i den klickade 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); // visar vinnarens namn
			}
			
			i++;
		});
	}
}

Implementering av isVictory

Hur ska vi tekniskt sett avgöra förekomsten av en vinst på planen? Om man tänker igenom allt noga, kan man komma till slutsatsen att det finns ett begränsat antal trippel av celler på planen.

Det vill säga, för att kontrollera vinst kan man helt enkelt kontrollera alla dessa trippel. Det måste kontrolleras att tripplarna har samma icke-tomma värden (det vill säga antingen kryss eller ring).

Låt oss skapa en tvådimensionell array, där varje underarray innehåller numren på cellerna i en av tripplarna:

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

Låt oss skriva vinstkontrollen med hjälp av denna array:

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

Implementera det beskrivna på egen hand, utan att kolla på min kod. Testa hur spelprocessen fungerar.

Försök att implementera kontroll av oavgjort. I nästa lektion kommer denna del att gås igenom.