51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
|
const 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],
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Получаю ячейки таблицы в переменную:
|
|||
|
|
let cells = document.querySelectorAll('#field td');
|
|||
|
|
start(cells);
|
|||
|
|
|
|||
|
|
// Для начала делаю так, чтобы по нажатию на любую ячейку таблицы в этой ячейке просто появлялся крестик.
|
|||
|
|
// Для этого создаю функцию start, параметром принимающую массив ячеек таблицы.
|
|||
|
|
// Также реализую чередования крестиков и ноликов. Для этого вводится счётчик ходов: крестик будет появляться на чётные значения счётчика, а нолик - на нечётные.
|
|||
|
|
function start(cells) {
|
|||
|
|
let i = 0;
|
|||
|
|
|
|||
|
|
for (let cell of cells) {
|
|||
|
|
cell.addEventListener('click', function step() {
|
|||
|
|
this.innerHTML = ['X', 'O'][i % 2];
|
|||
|
|
this.removeEventListener('click', step);
|
|||
|
|
|
|||
|
|
if (isVictory(cells)) {
|
|||
|
|
alert("Победил " + this.innerHTML); // выводится имя победителя - X или 0
|
|||
|
|
} else if (i === 8) {
|
|||
|
|
alert('Ничья');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
i++;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Реализую функцию isVictory, которая параметром будет принимать массив ячеек и возвращать true, если на поле есть победа, и false, если нет.
|
|||
|
|
function isVictory(cells) {
|
|||
|
|
for (let comb of combs) {
|
|||
|
|
if (
|
|||
|
|
cells[comb[0]].innerHTML === cells[comb[1]].innerHTML &&
|
|||
|
|
cells[comb[1]].innerHTML === cells[comb[2]].innerHTML &&
|
|||
|
|
cells[comb[0]].innerHTML !== ''
|
|||
|
|
) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|