Игра на JavaScript «Уголки»

в 14:23, , рубрики: javascript, Алгоритмы, Песочница, метки: ,
Вступление

Эта реализация игры «Уголки» на JavaScript, созданная в целях обучения. Игровой процесс заключается в том, что бы переместить свои фишки из одного угла игрового поля в другое (по определенным правилам) быстрее противника. В этой реализации четыре режима: игра компьютерных игроков, игра с компьютерным игроком, мультиплеер на одном компьютере и мультиплеер по сети.

Описание игры

Интерфейс состоит из трех частей: окно сообщений, панель настроек и поле игры. На поле игры, кроме самой подложки (div с фоном) находятся еще два слоя элементов: слой элементов фишек и слой элементов клеток, которые образуют сетку 8*8 и нужны для взаимодействия с игровым процессом. В окно сообщений выводится информация о текущем ходе и при завершении игры её результат. На панели настроек можно выбирать режимы игры и опции.

В режиме «AI game against himself» компьютер по алгоритму, который был мной разработан, играет против себя. Так как, элементов случайности не предусмотрено, то итог всегда один. Создано для демонстрации самой игры и работы алгоритма AI. Режим «Play against the AI» позволяет играть против компьютера. Можно выбирать цвет фишек. Стоит помнить, что белые ходят первыми. «Game in multiplayer mode» — тут можно играть вдвоем на одном компьютере. Режим «Game on the network» позволяет играть через сеть. Можно создать игру или подключится к уже созданной. При новой игре генерируется номер, с помощью которого другой игрок может осуществить подключение, введя идентификатор в поле, которое появляется при нажатии на «Connect to the game». Еще стоит отметить, что один ход ограничен 20 минутами.

Игровой процесс, как отмечалось ранее, заключается в передвижении фишек из одного угла игрового поля в другой. Фишки, которые могут сделать ход, при перемещении над ними указателя мыши, отмечаются зеленой рамкой. Красной рамкой выделяются активные фишки. Доступные ходы помечаются синей. Для снятия активного режима с фишки, нужно сделать щелчок по ней. Партия закончится тогда, когда один из игроков займет своими фишками весь противоположный угол.

Описание алгоритма, который используется для просчета ходов одной фишки

Возможные варианты ходов:

  • Один шажок (по вертикали или по горизонтали) на соседнюю свободную клетку;
  • Цепочка прыжков. Один прыжок может быть осуществлен «через» другую фишку на свободную клетку (по горизонтали либо по вертикали), но нельзя возвращаться назад, то есть «прыгать» на покинутую в предыдущем прыжке клетку. Цепочка оканчивается тогда, когда клеток для «прыжков» не остается.

То есть задача заключается в поиске всех вариантов ходов («шажков» и «прыжков») для одной фишки.
Игровое поле определяется так:
image
На нем и работает этот алгоритм. Он начинается с вызова функции, которая принимает на вход координаты фишки (i, j). Так же эта функция использует глобальный массив (CORNERS.chips, в блок схеме просто CHIPS), содержащий информацию о положении фишек на игровом поле. Например, запись типа CORNERS.chips[5][1] = 1 означает, что в позиции i = 5 и j = 1 стоит белая фишка. Если бы значением было -1, то это означало бы, что там находится черная фишка. А значение 0 – говорит о свободной клетке поля. То есть элементы данного массива имеют следующие значения:

  • 1 – в этой позиции стоит белая фишка;
  • (-1) – здесь фишка черных;
  • 0 – тут свободная клетка.

Итак, этот алгоритм, пользуясь этими данными, должен сформировать массив, который содержит информацию о всех ходах (перечень координат клеток поля). Структура данного массива: result[m][k] = x, где m – номер пары координат, k – 0 – координата i либо 1 – координата j, x – значение соответствующей координаты.

В процессе используются еще два вспомогательных массива: traveled и patch. Они нужны для просчета цепочек прыжков. В traveled заносятся координаты просчитанных клеток, то есть тех клеток, которые больше не надо заносить в массив result. В массиве patch находится координаты клеток поля, которые необходимо обследовать для поиска новых вариантов ходов.

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

Блок-схема алгоритма

image
Заключение

Это был мой проект, реализованный в целях обучения JavaScript. Здесь много ошибок и недочетов, но он как-то работает. Можно было бы описать еще алгоритм, по которому ходит компьютерный игрок, но может в следующий раз.
Код этого приложения доступен на репозитории GitHab

Автор: Arteben

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js