Морской бой в браузере на JavaScript

в 14:16, , рубрики: javascript, Морской бой, Песочница, Программирование, метки: ,

На Хабре последнюю неделю популярна тематика морского боя. Хочу показать вам свою реализацию этой игры на JavaScript с использованием библиотеки JQuery. Я считаю себя начинающим программистом и многие мои решения могут быть крайне не оптимальными. Игру делал для себя, чтобы развить свои навыки программирования.

image

Поиграть можно прямо сейчас

Вступление

Работая веб-программистом, я всегда хотел коснуться игровой индустрии. Самостоятельно писать мелкие игры. С чего-то нужно было начинать, но знания были только соответствующей профессии. Потому я и решил попробовать сделать что-то прямо в браузере, используя доступные мне языки программирования. За несколько дней, в свободное от работы время и родилось на свет это чудо. В чем-то крайне кривое, но работает, компьютер стреляет по кораблям в отместку и иногда даже выигрывает. Поделюсь основными, на мой взгляд самыми интересными моментами.

Безумные решения

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

1: Для сохранения состояния игрового поля не используются массивы.
Игровое поле игрока и компьютера состоит из сотни div-ов. Наличие дочерних элементов в них и их класс определяют состояние игрового поля.

2: Позиция игровой ячейки определяется индексом тега.
Из порядкового номера элемента на поле вычисляются его координата, при необходимости. В большинстве случаев соседние ячейки вычисляются из текущей координаты (+1, -1, +10, -10)

3: Проверка границ поля осуществляется 9-ю проверками для каждой возможной границы (левый верхний, левый, левый нижний и т.д.)

Размещение кораблей

Корабли нельзя ставить вплотную, поэтому при размещении корабля необходимо проверять наличие конфликтов по ближайшим клеткам. Алгоритм обещал быть сложным, так что я схитрил, и при установке корабля сразу помечал соседние ячейки как недоступные для размещения.
image

Искусственный «интеллект»

Какой же морской бой без соперника? Пусть и компьютерного.
Компьютер ходит абсолютно случайно до тех пор, пока не обнаружит вражеский корабль. Обнаружив корабль, он начинает обстреливать его, в поисках нужного размещения.
image
При этом сначала компьютер определяет плоскость, по которой он будет бить. Если по горизонтали уже есть два попадания в корабль, то он продолжает бить по горизонтали.

На этом все. Все исходники доступны через просмотр исходного кода страницы.

Автор: Satellence

Источник


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


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