X ja O vaheldumise analüüs

Selles õppetükis tahan näidata teile, kuidas teha X ja O vaheldumist ühe reaga. Te olete tõenäoliselt teinud midagi sellist:

function start(cells) {
	let i = 0; // loenduri algväärtus
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // suurendame loendurit
		});
	}
}

Pakuksin lühema lahenduse. Teeme massiivi oma 'mängijatest':

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

Nagu näete, on selles massiivis ristil võti 0 ja ringil - võti 1. Sama võib öelda ka i % 2 kohta - ristiku puhul on jääk 0 ja ringi puhul - 1.

See tähendab, et seda saab kasutada võtme asemel:

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

console.log(gamers[key]);

Või veel lühem:

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

Või veel lühem:

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

Lihtsustame nüüd meie funktsiooni start koodi:

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

Tehke iseseisvalt, minu koodi peale vahtimata, kirjeldatud muudatus.

Praegu saab mis tahes lahtrile teha piiramatu arvu klikke, muutes näiteks risti ringiks. Parandage see.