В качестве дипломной работы нужно запрограммировать игру «крестики-нолики». Фронтенд-разработчик подготовил для вас визуальное оформление, осталось написать логику работы игры.

Игроки по очереди ставят крестики и нолики. Игрок, первый заполнивший диагональ, вертикаль или горизонталь своими символами, выигрывает.

Стартовый код для реализации проекта. Страница отобржается во вкладке result, отладочная информация во вкладке console.

Проект состоит из пустого файла logic.js в котором нужно реализовать логику игры, и из готовых файлов, изменять их не нужно ( index.html, styles.css, ui.js).

Вам нужно реализовать две основные функции:

• startGame вызывается без параметров при открытии или перезапуске игры. В ней нужно создать поле игры и выбрать активного игрока
• click вызывается при клике игрока по полю. Вызов происходит с двумя значениями — номер строки и колонки, по которой произошел клик. В этой функции нужно обновить игровое поле и проверить, выиграл ли игрок, либо можно передавать ход следующему

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

Как работает игра:

1. Когда страница загружается, вызывается функция startGame. Эта функция должна сказать, кто ходит первый, затем создать игровое поле, и отрисовать его.
2. Когда игрок кликает на игровом поле, происходит вызов функции click. Нужно поставить метку игрока в этом поле, отрисовать поле на экране. Затем проверить, не выиграл ли игрок. Если выиграл, то поздравить его, а если еще нет — передать ход следующему игроку.

Внутреннее устройство игры делится на три части:

• логическая модель игры
• отрисовка логической модели на экране (реализовано)
• реакция на действия игрока (реализовано)

Ваша задача состоит в создании и поддержании актуальности логической модели игры. Логическая схема игры представляет собой информацию о игровом поле и метках в нем.

Игровое поле представляет собой таблицу 3х3 клетки, предлагается представить игровое поле в виде массива массивов (см. примеры ниже).

В ячейке таблицы может хранится: пустота (метки нет), либо метка игрока (х, о). Когда игрок нажимает на игровое поле, нужно установить соответствующий значок в ячейку таблицы.

Для отрисовки нового состояния игрового поля на экране нужно вызвать функцию renderBoard и передать в нее информацию о поле в виде массива.

Если игра закончилась победой одного из игроков, то нужно вызвать функцию showWinner и передать в нее номер игрока-победителя.

Информация об игроках хранится в массиве. Каждому игроку соответсвует проставляемый символ на поле: let players = ['x', 'o'];

Функция будет вызываться без параметров внешним кодом. В этой функции нужно:

1. создать игровое поле. Оно должно представлять из себя массив массивов. Для обращения к ячейке игрового поля нужно знать строку и колонку этого поля.
2. Установить активного игрока
3. Вызвать функцию renderBoard для отрисовки игрового поля

Функция будет вызываться с двумя параметрами — номером строки и колонки ячейки, на которой произошел клик.

В этой функции нужно:

1. обновить игровое поле, записать в нужную ячейку символ игрока
2. вызвать функцию renderBoard для отрисовки игрового поля
3. проверить, выигрышная ли сложилась ситуация
4. Если ситуация выигрышная, вызвать функцию showWinner и передать в нее номер игрока
5. Если нужно играть дальше, то передать ход следующему игроку

Выигрыш первого игрока:

[
  ['x', '', ''],
  ['o', 'x', ''],
  ['o', '', 'x']
]

Первый ход:

[
  ['', '', ''],
  ['', 'x', ''],
  ['', '', '']
]

Если передать такое поле в функцию renderBoard, то на экране появится соответствующее поле. Например:

let board = [
  ['', '', ''],
  ['', 'x', ''],
  ['', '', '']
];
renderBoard(board);

Отрисовка срабатывает только в функциях startGame и click.

Напишите код так, чтобы он работал на квадратном поле любого размера.