Праверка перамогі ў гульні крыжыкі-нулікі на 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;
}

Самастойна, не падглядваючы ў мой код, рэалізуйце апісанае. Праверце, як функцыянуе гульнявы працэс.

Паспрабуйце рэалізаваць праверку нічыі. У наступным уроку будзе разбор гэтага месца.