Игра Морской бой на JavaScript. Рандомная расстановка кораблей.

Игру «Морской бой», думаю, представлять не надо. Вряд ли найдётся хоть один человек, который хотя бы раз не играл в неё. Давайте и мы создадим полноценный «Морской бой», используя HTML-вёрстку для отображения структуры игры на экране монитора, визуально оформим её с помощью таблицы стилей, а с помощью чистого JavaScript напишем «движок», определяющий поведение игры.

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

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

Надеюсь всё всем понятно. Ну а теперь составим техническое задание, чтобы ничего не забыть и не пропустить.

Техническое задание на создание игры «Морской бой»

Количество и типы кораблей, их расположение.

Как и в реальной игре, эскадра будет состоять из: — одного четырёхпалубного; — двух трёхпалубных; — трёх двухпалубных; — четырёх однопалубных кораблей. Корабли могут располагаться вертикально и горизонтально, но при этом между кораблями должна быть хотя бы одна пустая клетка, в том числе и по диагонали. Корабли не могут иметь Г-образную форму.

Расстановка кораблей и редактирование их положения.

Корабли игрока могут расставляться по случайному закону или самим игроком, путём перетаскивания их на игровое поле. И в первом, и во втором случае можно редактировать направление положения палуб (вертикальное или горизонтальное), путём клика правой кнопкой мышки по первой палубе и расположение, путём перетаскивания. Первая палуба — при горизонтальном расположении корабля — самая левая, при вертикальном — самая верхняя. При перетаскивании или повороте корабля скрипт постоянно отслеживает корректность координат корабля. Если корабль будет соприкасаться с соседним или выходить за пределы игрового поля, то рамка корабля окрасится в красный цвет, а корабль, после отпускания кнопки мышки, вернётся в исходное положение. В противном случае, рамка корабля будет зелёная. Нет необходимости пытаться установить корабль точно по границам клеток — программа сама откорректирует его положение, установив в ближайшие валидные координаты. В момент начала игры, редактирование положения кораблей отключается.

Ведение морского боя

Если сражение первое, рандомно определяем, кто стреляет первым. Далее, первым стреляет победитель. Координаты выстрела передаются путём клика по выбранной клетке — ввода координат с клавиатуры не будет. Попадание отмечается красным крестиком, промах — точкой, клетку, где корабля точно быть не может, отмечаем / снимаем отметку кликом правой кнопкой мышки. Сообщений «ранил», «убил / потопил» не будет — самостоятельно определяем тип корабля. Под игровыми полями выводятся сообщения о том, чей выстрел и результат выстрела.

Искусственный интеллект противника.

Для ведения морского боя, компьютер должен обладать хотя бы примитивным искусственным интеллектом. Он должен уметь: — формировать координаты выстрела, согласно заложенного алгоритма ведения морского боя. — при попадании в палубу корабля, продолжить его обстрел, пока корабль не будет потоплен. — отмечать клетки, куда стрелять не имеет смысла и исключать координаты этих клеток из матрицы возможных выстрелов.

На этих требования к ИИ мы пока и остановимся, хотя можно рассмотреть варианты размещения кораблей компьютером, при которых сильно уменьшается вероятность попадания в однопалубные корабли.

Окончание морского боя.

Выводится сообщение о победителе. Если выиграл компьютер, то отображаются его не потопленные корабли.

HTML-вёрстка для игры «Морской бой».

При создании HTML страницы, наша главная задача — воспроизвести внешний вид игрового поля морского боя максимально похожий на тот, к которому вы привыкли, играя на тетрадочных листах. Разметка HTML не сложная и будет включать в себя следующие основные блоки:

Основной родительский элемент, background которого похож на лист тетрадки в клетку.
Два игровых поля — игрока, где мы будем расставлять свои корабли и контролировать выстрелы компьютера, и компьютера, где мы будут отмечаться наши попадания и промахи. Им задаётся background в виде рамки размером 10х10 клеток с буквенным обозначением строк и цифровым обозначением колонок.
Контейнер с инструкцией по ручной расстановке кораблей и набором кораблей, которые необходимо перетащить на своё игровое поле.
Два блока, верхний и нижний, для вывода информационных сообщений.
Кнопка запуска игры.

Первоначально, при загрузке страницы, в контейнере инструкции отображаются только элементы для выбора способа размещения кораблей: — рандомное размещение при помощи js-скрипта; — самостоятельное размещение игроком. Кнопка запуска игры изначально не видна. Она появится только после того, как игрок разместит свои корабли.

📎📎📎📎📎📎📎📎📎📎