Analisi dell'alternanza tra X e O

In questa lezione voglio mostrarti come realizzare l'alternanza tra X e O in una sola riga. Probabilmente, hai fatto qualcosa del genere:

function start(cells) {
	let i = 0; // valore iniziale del contatore
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // incrementa il contatore
		});
	}
}

Io propongo di risolvere il problema in modo più breve. Creiamo un array dei nostri 'giocatori':

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

Come puoi vedere, in questo array la X ha chiave 0, e lo O - chiave 1. La stessa cosa si può dire per i % 2 - per la X il resto sarà 0, e per lo O - 1.

Cioè questa espressione può essere usata al posto della chiave:

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

console.log(gamers[key]);

O ancora più breve:

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

O ancora più breve:

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

Semplifichiamo ora il codice della nostra funzione start:

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

In autonomia, senza guardare il mio codice, apporta la modifica descritta.

Attualmente su qualsiasi cella si possono fare un numero illimitato di click, cambiando, ad esempio, la X in O. Correggi questo comportamento.