В качестве дипломной работы нужно запрограммировать игру «Крестики-нолики». Фронтенд-разработчик подготовил для вас визуальное оформление, осталось написать логику работы игры.
Игроки по очереди ставят крестики и нолики. Игрок, первый заполнивший своими символами диагональ, вертикаль или горизонталь, выигрывает.
Стартовый код для реализации проекта. Страница отображается во вкладке result, отладочная информация во вкладке console.
Проект состоит из:
- пустого файла
logic.js
в котором нужно реализовать логику игры; - из готовых файлов, которые не нужно изменять (
index.html
,styles.css
,ui.js
).
Вам нужно реализовать две основные функции:
startGame
вызывается без параметров при открытии или перезапуске игры. В ней нужно создать поле игры и выбрать активного игрока.click
вызывается при клике игрока по полю. Вызов происходит с двумя значениями — номер строки и колонки, по которой произошёл клик. В этой функции нужно обновить игровое поле и проверить, выиграл ли игрок, либо можно передавать ход следующему.
Создавайте дополнительные функции, если они вам потребуются.
Как работает игра:
- Когда страница загружается, вызывается функция
startGame
. Она должна сказать, кто ходит первый, затем создать игровое поле и отрисовать его. - Когда игрок кликает на игровом поле, происходит вызов функции
click
. Нужно поставить метку игрока в этом поле, отрисовать поле на экране. Затем проверить, не выиграл ли игрок. Если выиграл, то поздравить его, а если ещё нет — передать ход следующему игроку.
Внутреннее устройство игры делится на три части:
- логическая модель игры;
- отрисовка логической модели на экране (реализовано);
- реакция на действия игрока (реализовано).
Ваша задача — создать и поддержать актуальность логической модели игры. Логическая схема игры — информация об игровом поле и метках в нём.
Игровое поле — таблица 3х3 клетки. Предлагается представить игровое поле в виде массива массивов (см. примеры ниже).
В ячейке таблицы может храниться пустота (метки нет), либо метка игрока (х, о). Когда игрок нажимает на игровое поле, нужно установить соответствующий значок в ячейку таблицы.
Для отрисовки на экране нового состояния игрового поля нужно вызвать функцию renderBoard
и передать в неё информацию о поле в виде массива.
Если игра закончилась победой одного из игроков, нужно вызвать функцию showWinner
и передать в неё номер игрока-победителя.
Информация об игроках хранится в массиве. Каждому игроку соответсвует проставляемый символ на поле: let players = ['x', 'o'];
.
Функция будет вызываться без параметров внешним кодом. В этой функции нужно:
- Создать игровое поле. Оно должно представлять из себя массив массивов. Для обращения к ячейке игрового поля нужно знать строку и колонку этого поля.
- Установить активного игрока.
- Вызвать функцию
renderBoard
для отрисовки игрового поля.
Функция будет вызываться с двумя параметрами — номером строки и колонки ячейки, на которой произошёл клик.
В этой функции нужно:
- Обновить игровое поле, записать в нужную ячейку символ игрока.
- Вызвать функцию
renderBoard
для отрисовки игрового поля. - Проверить, выигрышная ли сложилась ситуация.
- Если ситуация выигрышная, вызвать функцию
showWinner
и передать в неё номер игрока. - Если нужно играть дальше, то передать ход следующему игроку.
Выигрыш первого игрока:
[
['x', '', ''],
['o', 'x', ''],
['o', '', 'x']
]
Первый ход:
[
['', '', ''],
['', 'x', ''],
['', '', '']
]
Если передать такое поле в функцию renderBoard
, то на экране появится соответствующее поле. Например:
let board = [
['', '', ''],
['', 'x', ''],
['', '', '']
];
renderBoard(board);
Отрисовка срабатывает только в функциях startGame
и click
.
Напишите код так, чтобы он работал на квадратном поле любого размера.