Analys av alternering av kryss och ring

I den här lektionen vill jag visa dig hur man gör alternering av kryss och ring på en rad. Du har förmodligen gjort något sånt här:

function start(cells) {
	let i = 0; // initialt värde på räknaren
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // ökar räknaren
		});
	}
}

Jag föreslår att vi löser uppgiften kortare. Låt oss skapa en array med våra 'spelare':

let gamers = ['X', 'O'];

Som du ser har krysset nyckeln 0 i denna array, och ring - nyckeln 1. Samma sak kan sägas om i % 2 - för kryss blir resten 0, och för ring - 1.

Det betyder att vi kan använda denna sak istället för nyckeln:

let gamers = ['X', 'O'];
let key = i % 2;

console.log(gamers[key]);

Eller ännu kortare:

let gamers = ['X', 'O'];
console.log(gamers[i % 2]);

Eller ännu kortare:

console.log(['X', 'O'][i % 2]);

Låt oss nu förenkla koden för vår funktion start:

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			this.textContent = ['X', 'O'][i % 2];
			i++;
		});
	}
}

Självständigt, utan att kolla på min kod, gör den beskrivna ändringen.

För närvarande kan man göra ett obegränsat antal klick på vilken cell som helst, vilket till exempel ändrar kryss till ring. Åtgärda detta.