Игра Морской бой в JavaScript
В данном уроке нужно вспомнить наш предыдущий материал и придумать наиболее
оптимизированную идею кода.
Игру «Морской бой», думаю, представлять не надо. Вряд ли найдётся хоть один чело-
век, который хотя бы раз не играл в неё. Давайте и мы создадим полноценный «Мор-
ской бой», используя HTML-вёрстку для отображения структуры игры на экране мо-
нитора, визуально оформим её с помощью таблицы стилей, а с помощью чистого
JavaScript напишем «движок», определяющий поведение игры.
Начнём с того, что словами опишем, как будет выглядеть наша игра, сколько и каких
будет в ней кораблей, как будут расставляться корабли, каким образом будет происхо-
дить управление выстрелом и искусственный интеллект компьютера по ведению мор-
ского боя в качестве нашего противника.
Как говорится — лучше один раз увидеть. На приведённом ниже скриншоте прекрас-
но видно, что представляет из себя игровое поле, сколько типов кораблей, в зависимо-
сти от количества палуб будет в эскадре, как выглядит промах, попадание и отметка,
где корабля точно быть не может.
Игра Морской бой. Пример игрового поля во время игры
Надеюсь всё всем понятно. Ну а теперь составим техническое задание, чтобы ничего
не забыть и не пропустить.
1.
Количество и
типы кораблей, их расположение.
Как и в реальной игре, эскадра будет состоять из:
— одного четырёхпалубного;
— двух трёхпалубных;
— трёх двухпалубных;
— четырёх однопалубных кораблей.
Корабли могут располагаться вертикально и горизонтально, но при этом между кораб-
лями должна быть хотя бы одна пустая клетка, в том числе и по диагонали. Корабли
не могут иметь Г-образную форму.
2.
Расстановка кораблей и редактирование их положения.
Корабли игрока могут расставляться по случайному закону или самим игроком, путём
перетаскивания их на игровое поле. И в первом, и во втором
случае можно редактиро-
вать направление положения палуб (вертикальное или горизонтальное), путём клика
правой кнопкой мышки по первой палубе и расположение, путём перетаскивания.
Первая палуба — при горизонтальном расположении корабля — самая левая, при вер-
тикальном — самая верхняя.
При перетаскивании или повороте корабля скрипт постоянно отслеживает коррект-
ность координат корабля. Если корабль будет соприкасаться с соседним или выходить
за пределы игрового поля, то рамка корабля
окрасится в красный цвет, а корабль, по-
сле отпускания кнопки мышки, вернётся в исходное положение. В противном случае,
рамка корабля будет зелёная.
Нет необходимости пытаться установить корабль точно по границам клеток — про-
грамма сама откорректирует его положение, установив в
ближайшие валидные коор-
динаты.
В момент начала игры, редактирование положения кораблей отключается.
3.
Ведение морского боя
Если сражение первое, рандомно определяем, кто стреляет первым. Далее, первым
стреляет победитель.
Координаты выстрела передаются путём клика по выбранной клетке — ввода коорди-
нат с клавиатуры не будет.
Попадание отмечается
красным крестиком, промах — точкой, клетку, где корабля
точно быть не может, отмечаем / снимаем отметку кликом правой кнопкой мышки.
Сообщений «ранил», «убил / потопил» не будет — самостоятельно определяем тип
корабля.
Под игровыми полями выводятся сообщения о том, чей выстрел и результат выстрела.
4.
Искусственный интеллект противника.
Для ведения морского боя, компьютер должен обладать хотя бы примитивным искус-
ственным интеллектом. Он должен уметь:
— формировать координаты выстрела, согласно заложенного алгоритма ведения мор-
ского боя.
— при попадании в палубу корабля,
продолжить его обстрел, пока корабль не будет
потоплен.
— отмечать клетки, куда стрелять не имеет смысла и исключать координаты этих кле-
ток из матрицы возможных выстрелов.
На этих требования к ИИ мы пока и остановимся, хотя можно рассмотреть варианты
размещения кораблей компьютером, при которых сильно уменьшается
вероятность
попадания в однопалубные корабли.
5.
Окончание морского боя.
Выводится сообщение о победителе. Если выиграл компьютер, то отображаются его
не потопленные корабли.