Kryžiuko ir nuliuko kaitaliojimo analizė

Šioje pamokoje noriu jums parodyti, kaip padaryti kryžiuko ir nuliuko kaitaliojimą vienoje eilutėje. Jūs greičiausiai padarėte kažką panašaus:

function start(cells) {
	let i = 0; // pradinė skaitiklio reikšmė
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // didiname skaitiklį
		});
	}
}

Aš siūlysiu išspręsti užduotį trumpiau. Sukurkime mūsų 'žaidėjų' masyvą:

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

Kaip matote, šiame masyve kryžiukas turi raktą 0, o nuliukas - raktą 1. Tą patį galima pasakyti ir apie i % 2 - kryžiukui liekana bus 0, o nuliukui - 1.

Tai yra šį dalyką galima panaudoti vietoj rakto:

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

console.log(gamers[key]);

Arba dar trumpiau:

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

Arba dar trumpiau:

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

Dabar supaprastinkime mūsų funkcijos start kodą:

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

Savarankiškai, nežiūrėdami į mano kodą, atlikite aprašytą pataisymą.

Dabar bet kuriam langeliui galima atlikti neribotą skaičių paspaudimų, pavyzdžiui, keičiant kryžiuką į nuliuką. Ištaisykite tai.