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

Самостално, не загледајући се у мој код, имплементирајте описано. Проверите како функционише игра.

Покушајте да имплементирате проверу нерешеног резултата. У следећој лекцији биће разлог овог места.