JavaScript-те крестик-нөл ойынында жеңісті тексеру

Енді жеңіс болғанды анықтайтын және жеңімпаздың атын шығаратын код жазу уақыты келді.

Тапсырманы ойластырғаннан кейін, жеңіс болғанды әрбір жүрісте тексеру керек екенін түсінуге болады:

function init(selector) {
	let cells = document.querySelectorAll('#field td');
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function step() {
			this.textContent = ['X', 'O'][i % 2];
			this.removeEventListener('click', step);
			
			// мұнда біз жеңіс немесе тең ойын болғанды тексеруіміз керек
			
			i++;
		});
	}
}

isVictory функциясын жасайық, ол параметр ретінде ұяшықтар массивін қабылдайды және егер алаңда жеңіс болса true, ал болмаса false қайтарады. Біз бұл функцияны келесідей қолданамыз:

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function step() {
			this.textContent = ['X', 'O'][i % 2];
			this.removeEventListener('click', step);
			
			if (isVictory(cells)) {
				alert('жеңімпаздың аты');
			}
			
			i++;
		});
	}
}

Жеңімпаздың атын қалай білеміз? Анық, оның аты жеңіске жеткен әрбір ұяшықта сақталады. Түсіндірейін: егер бізде жеңіс болса, бұл кейбір 3 ұяшықтардың көлденең, тік немесе диагональ бойынша бірдей мән қамтитынын білдіреді: не крестик, не нөл.

Осы ұяшықтардың кез келгенінің мәні жеңімпаздың аты екені анық. Бірақ басқа, азырақ айқын жолмен жүруге болады: жеңіс болғанды әрбір жүрісте анықтайтындықтан, соңғы жүріс жасаған ойыншы жеңімпаз болады. Бұл ойыншының аты басылған ұяшықтың мәтінінде болады:

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function step() {
			this.textContent = ['X', 'O'][i % 2];
			this.removeEventListener('click', step);
			
			if (isVictory(cells)) {
				alert(this.textContent); // жеңімпаздың атын шығарамыз
			}
			
			i++;
		});
	}
}

isVictory-ды жүзеге асыру

Алаңда жеңіс болғанды техникалық түрде қалай анықтауға болады? Егер барлығын мұқият ойластырсақ, алаңда шектеулі санында үштік ұяшықтар бар екенін түсінуге болады.

Яғни жеңісті тексеру үшін осы үштіктердің барлығын тексеруге болады. Біреулерінің бірдей және бос емес мәндері бар екенін тексеру керек (яғни ол не крестик, не нөл).

Екі өлшемді массив жасайық, оның әрбір ішкі массивінде үштіктердің біреуінің ұяшық нөмірлері болады:

let combs = [
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	[0, 4, 8],
	[2, 4, 6],
];

Осы массивті қолданып жеңісті анықтауды жазайық:

function isVictory(cells) {
	let combs = [
		[0, 1, 2],
		[3, 4, 5],
		[6, 7, 8],
		[0, 3, 6],
		[1, 4, 7],
		[2, 5, 8],
		[0, 4, 8],
		[2, 4, 6],
	];

	for (let comb of combs) {
		if (
			cells[comb[0]].textContent == cells[comb[1]].textContent &&
			cells[comb[1]].textContent == cells[comb[2]].textContent &&
			cells[comb[0]].textContent != ''
		) {
			return true;
		}
	}
	
	return false;
}

Менің кодымға қарамастан, өз бетіңізше сипатталғанды жүзеге асырыңыз. Ойын процесі қалай жұмыс істейтінін тексеріңіз.

Тең ойынды тексеруді жүзеге асыруға тырысыңыз. Келесі сабақта бұл жерді талдау жасалады.