Analyse der Abwechslung von Kreuz und Kreis

In dieser Lektion möchte ich Ihnen zeigen, wie man die Abwechslung von Kreuz und Kreis in einer Zeile macht. Sie haben höchstwahrscheinlich so etwas gemacht:

function start(cells) {
	let i = 0; // Anfangswert des Zählers
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // Zähler erhöhen
		});
	}
}

Ich schlage vor, die Aufgabe kürzer zu lösen. Lassen Sie uns ein Array unserer 'Spieler' machen:

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

Wie Sie sehen können, hat das Kreuz in diesem Array den Schlüssel 0 und der Kreis - den Schlüssel 1. Dasselbe kann man auch über i % 2 sagen - für das Kreuz wird der Rest 0 sein, und für den Kreis - 1.

Das heißt, man kann dieses Ding anstelle des Schlüssels verwenden:

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

console.log(gamers[key]);

Oder noch kürzer:

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

Oder noch kürzer:

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

Vereinfachen wir nun den Code unserer Funktion start:

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

Nehmen Sie die beschriebene Änderung selbstständig vor, ohne in meinen Code zu schauen.

Zurzeit kann auf jede Zelle unbegrenzt oft geklickt werden, um zum Beispiel ein Kreuz in einen Kreis zu ändern. Korrigieren Sie dies.