Проверка на победа в играта морски шах на 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;
}

Самостоятелно, без да надничате в моя код, реализирайте описаното. Проверете как функционира игралния процес.

Опитайте се да реализирате проверка за равенство. В следващия урок ще има разбор на това място.