Gennemgang af skifte mellem kryds og bolle

I denne lektion vil jeg vise dig, hvordan man laver skifte mellem kryds og bolle i én linje kode. Du har højst sandsynligt gjort noget som dette:

function start(cells) {
	let i = 0; // startværdi for tæller
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // øger tælleren
		});
	}
}

Jeg foreslår at løse opgaven kortere. Lad os lave et array med vores 'spillere':

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

Som du kan se, har kryds i dette array nøglen 0, og bolle - nøglen 1. Det samme kan siges om i % 2 - for kryds vil resten være 0, og for bolle - 1.

Det betyder, at vi kan bruge denne ting i stedet for nøglen:

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

console.log(gamers[key]);

Eller endnu kortere:

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

Eller endnu kortere:

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

Lad os nu forenkle koden for vores funktion start:

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

Uafhængigt, uden at kigge på min kode, foretag den beskrevne ændring.

I øjeblikket kan der laves et ubegrænset antal klik på enhver celle, hvilket f.eks. ændrer kryds til bolle. Ret dette.