Как написать морской бой на javascript

Вступление.

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

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

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

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

Это очень важно.
При создании игры использовался JavaScript версии ES6/ES2015 и более поздних версий. Для понимания изложенного материала, необходимо предварительно изучить изменения и нововведения в версиях ES2015+.

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

• 1

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

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

• 2

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

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

• 3

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

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

• 4

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

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

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

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

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

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

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

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

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

Исходный код разметки HTML:

Самый сложный блок, как вы заметили, это набор кораблей.

Таблица стилей для игры «Морской бой».

Полностью всю таблицу стилей приводить здесь не буду, вы можете скачать её и спрайт с картинками в архиве. Представлю только стили, непосредственно определяющие стилевое оформление игры «Морской бой»:

Начинаем писать Javascript для игры «Морской бой».

Весь наш код разместим в анонимной самозапускающейся функции для ограничения области видимости:

При написании js-скрипта мы будем использовать классы. Почему выбран такой стиль программирования?
У нас есть два игровых поля — игрока и компьютера. Эти поля совершенно идентичны. У них есть ряд одинаковых свойств и одинаковые методы, с помощью которых можно получить координаты кораблей и разместить их на этих полях. Кроме игровых полей, у нас есть множество объектов кораблей, которые также обладают рядом одинаковых свойств и методов.

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

Игра «Морской бой». Глобальные переменные и функции.

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

Игра «Морской бой». Конструктор игровых полей.

Для создания игровых полей используем класс Field. Аргументом функции-конструктора класса будет объект игрового поля: или игрока, или компьютера. Других аргументов конструктору не требуется. В результате мы получим новые экземпляры игровых полей, дополненные новыми свойствами, которые будут использовать методы класса,+ отвечающие за расстановку кораблей.

Рассмотрим подробно ряд констант, используемых в классе, а также функцию-конструктор класса и её свойства, которые будут наследоваться созданными ею объектами human и computer:

На данном этапе, создаём только экземпляр поля игрока — human. Объект computer создадим с помощью конструктора позже, когда будем расставлять корабли компьютера.
Предварительно получим объекты ряда элементов, которые будут использоваться при подготовке к игре «Морской бой» и в процессе самой игры.

Запишем в самый конец анонимной самозапускающейся функции следующий код:

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

Игра «Морской бой». Алгоритм расстановки кораблей шаг за шагом.

Прежде, чем начать писать код, отвечающий за рандомную расстановку кораблей на игровом поле, предварительно рассмотрим алгоритм расстановки по шагам:

• 1

  У нас есть два интерактивных элемента, клик по которым запускает js-скрипт расстановки кораблей — рандомную или самостоятельную. Чтобы не вешать два обработчика события, воспользуемся делегированием и с помощью функции addEventListener вешаем один обработчик на родителя этих элементов. Родительским элементом является:

  <div id=«type_placement» class=«type-placement-box»> … </div>

  Запомните, это очень важно.
  Для управления элементами текущей страницы (показать / скрыть, изменить стиль, переместить, подгрузить и т.д.) должны использоваться элементы <span>, <button>, <div>, <li>. Именно на них вешаются обработчики событий.
  Не используйте для этой цели тег <a>. Этот тег должен использоваться только для формирования ссылок, ведущих на другие страницы сайта или другой интернет-ресурс.

  Используя метод делегирования событий определяем, по какому элементу был сделан клик и считываем значение его атрибута data-target. Если это значение равно random, то вызываем функцию randomLocationShips.

• 2

  Функции randomLocationShips перебирает статичный объект SHIP_DATA с данными кораблей.

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

• 3

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

  1. в полученных координатах не должны располагаться палубы ранее созданного корабля;
  2. в соседних клетках, включая диагональные, не должны находиться палубы ранее созданного корабля;
  3. корабль не должен выходить за пределы игрового поля.

  Если какое-то из этих условий не выполняется, снова вызываем функцию randomLocationShips.

• 4

  Создаём экземпляр объекта корабля, используя конструктор кораблей класса Ships. Заносим координаты палуб корабля в двумерный массив объекта human и объект squadron, в котором содержаться данные по каждому кораблю эскадры.

Игра «Морской бой». Обработчик события запуска генерации начальных координат кораблей.

Ещё раз обратим внимание на следующую HTML-разметку:

Как было написано выше, обработчик события повесим на <div> с id="type_placement".

Игра «Морской бой». Очистка игрового поля от ранее расставленных кораблей.

Прежде чем начать размещение кораблей (неважно, каким способом), предварительно необходимо очистить игровое поле и ряд объектов и массивов. За эту операцию отвечает функция cleanField, являющаяся методом класса Field.
Данная функция выполняет следующие задачи:

1. удаление ранее установленных кораблей с игрового поля;
2. очистка массива squadron от записанных в него объектов кораблей;
3. заполняем матрицу игрового поля нулями, что соотвествует пустому месту.

В дальнейшем, эта функция будет использоваться и для очистки игрового поля компьютера. Код функции:

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

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

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

Игра «Морской бой». Генерация начальных координат кораблей.

В данный момент, функция randomLocationShips вызывается, как метод экземпляра human. В дальнейшем, при расстановке кораблей компьютера, она будет вызываться, как метод экземпляра computer.
Как было сказано ранее, функция запускает перебор объекта SHIP_DATA с данными кораблей по каждому типу и создаёт экземпляр каждого корабля с заданными свойствами, используя для этого класс Ships.

Внутри этого цикла создадим ещё один, вложенный, цикл. Количество итераций вложенного цикла равно количеству кораблей текущего типа. Внутри этого цикла, при каждой итерации будем получать координаты первой палубы и направление расположения палуб с помощью функции getCoordinatesDecks. Аргументом данной функции будет количество палуб создаваемого корабля. Также сформируем уникального имя корабля, которое будет использоваться, как значение его атрибута id.

Теперь полный код функции randomLocationShips выглядит так:

Прежде чем приступать к функции getCoordinatesDecks, которая генерирует координаты первой палубы корабля и направление расположения его палуб, подумаем, какие ограничения мы должны наложить на диапазон создаваемых координат. Рассмотрим это на примере трёхпалубного корабля.

Запомните, это очень важно.
Данные о координатах корабля будут храниться в матрице (двумерном массиве), поэтому вместо буквенно-цифровых координат будут формироваться только цифровые. Отсчёт элементов массива начинается с 0. Строки матрицы — это координата ‘X’, а столбцы — координата ‘Y’.
Например, координата «Б3» в двумерном массиве будет иметь значение [1,2]. Как видно, координаты палубы корабля есть не что иное, как индексы элемента в двумерном массиве.

Разобравшись, как накладываются ограничения на формирование координат, мы можем получить зависимость максимальной координаты от количества палуб корабля. Для координаты ‘Y’, при горизонтальном размещении корабля, это будет выглядеть так:
y = (9 - decks) + 1 или короче y = 10 - decks, где decks — количество палуб у корабля.
При этом, координата ‘X’ может принимать любое значение в диапазоне от 0 до 9.

Аналогичные ограничения накладываются и при вертикальном расположении корабля.

Так как координаты формируются рандомно, давайте напишем небольшую статичную функцию, которая будет генерировать случайные числа. С помощью аргумента, будем определять диапазон, в котором будут лежать полученные значения:

Рассмотрим по шагам, как работает функция getCoordinatesDecks:

• 1

  Случайным образом определяем направление расположения корабля, присваивая значения специальным коэффициентам kx и ky. Если kx == 0 и ky == 1 — корабль расположен горизонтально, если kx == 1 и ky == 0, то вертикально.

• 2

  Получаем начальные координаты корабля, не забывая про ограничения, рассмотренные ранее.

• 3

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

• 4

  Возвращаем объект, в котором содержаться значения координат x и y, а также коэффициентов kx и ky.

Теперь представим функцию getCoordinatesDecks в её полном виде:

Данная функция также является методом класса Field.

Игра «Морской бой». Валидация координат всех палуб корабля.

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

Как видно на приведённом рисунке, проверяется группа координат, совпадающая с координатами палуб корабля и прилегающих к ним клеток. Эта группа может быть меньше, если корабль примыкает к одной или сразу двум границам игрового поля. Значение проверяемых координат берётся из матрицы игрового поля, принадлежащей объекту, от которого в данный момент наследуется функция getCoordinatesDecks. Это может быть или поле игрока, или поле компьютера. Напоминаю, что в данный момент мы рассматриваем рандомную расстановку кораблей для игры «Морской бой» на поле игрока.
Полученное из матрицы значение сравнивается с 1, т. е. в проверяемой клетке есть палуба ранее установленного корабля.

Проверка реализована с помощью встроенной функции filter. Сначала из матрицы берётся массив координат по оси Х. Его границы определяются значениями fromX и toX. Далее этот массив ограничивается по оси Y — границы определяются значениями fromY и toY. Значение каждого элемента получившегося двумерного массива с помощью функции filter сравнивается с 1.
Если найдутся элементы содержащие 1, то функция checkLocationShip вернёт false, в противном случае — true.

Игра «Морской бой». Создаём экземпляр корабля и выводим его на экран.

Итак, мы получили начальные координаты корабля и направление расположения его палуб. Теперь нам нужно создать корабль и вывести его на экран.

Вернёмся к функции randomLocationShips. В конце функции есть такие строки:

Настало время рассмотреть их подробнее.

Игра «Морской бой». Конструктор кораблей.

В качестве конструктора кораблей используем функцию-конструктор класса Ships. В качестве аргументов конструктор принимает два параметра:

1. this, указывает, для кого создаётся данный корабль — игрока или компьютера.
2. options, это объект, имеющий свойства:
   — x и y — координаты первой палубы;
   — kx и ky — направлении расположения палуб;
   — decks — количество палуб корабля;
   — shipname — уникальное имя корабля, которое будет использоваться в качестве его идентификатора.

Игра «Морской бой». Создание корабля и сохранение информации о нём.

Для создания корабля используется функция createShip. Эта же функция используется и для создания кораблей компьютера. Информация, для кого создаётся корабль, находится в свойстве player — это экземпляр или human, или computer.

При создании корабля нам нужно в цикле записать координаты его палуб в двумерный массив matrix и массив arrDecks, который будет записан в объект squadron. В этом объекте храниться полная информация по каждому кораблю, что потребуется в дальнейшем при создании выстрела и оценки его результата.

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

Игра «Морской бой». Вывод корабля на экран монитора.

Прежде чем рассматривать реализацию функции showShip, отвечающую за отображение корабля, нужно разобрать, каким образом осуществляется позиционирование корабля на игровом поле с учётом его координат в двумерном массиве.
Все корабли формируются элементами div с абсолютным позиционированием относительно своего родительского элемента:

Зная размер палубы корабля, он совпадает с размером клетки игрового поля и равен 33px, и зная координаты, можно преобразовать их в смещение в пикселях относительно родительского элемента.

Кроме смещения, элементу div нужно добавить класс по названию совпадающий с именем корабля. Этот класс определит стиль корабля. Если корабль размещён вертикально, то необходимо добавить ещё класс vertical.

Функция showShip является методом класса Ships и не связана с конкретными экземплярами класса (в ней отсутствует this). Поэтому объявим её статичной и разместим внутри класса, после функции-конструктора. Полный код функции:

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

Заключение

Итак, мы рассмотрели, как создать эскадру кораблей для игры в «Морской бой» и разместить её на игровом поле случайным образом. Код, который мы написали, используется не только для создания эскадры игрока, но и для создания кораблей компьютера.

В следующей статье будет рассказано, как с помощью JavaScript реализовать размещение кораблей игрока перетаскиванием на игровое поле, используя метод Drag’n’Drop.

Поддался

пороку

тренду недели и решил написать крошечный морской бой в 30 строк кода. Вот он: ровно 30 строк JavaScript, 2 строки HTML и 6 — CSS. Сжать можно было и гораздо сильнее, в текущем виде читабельность практически не пострадала (за исключением инициализирующих массивов).

Морской бой на JSFiddle.

Сделал на div-ах. Можно было использовать и canvas, но для данной задачи это было бы чересчур, т.к. никакой анимации и сложных фигур не предусматривалось. К тому же, к div-ам удобнее биндить клики и выбирать их селекторами (что было важно для оптимизации, как станет ясно в дальнейшем).

Разбор исходника

Исходник на JSFiddle.

(function(w, h) {
    var p1map = ['~ss~~~~s~~','~~~~~~~~~~','~~~~s~~~~s','~s~~~~s~~s','~s~~~~s~~s','~s~~~~~~~~','~~~~~~~~s~','~~~~ss~~~~','~s~~~~~~~~','~~~~ssss~~'];
    var p2map = ['~~~s~~~~ss','~s~s~~~~~~','~~~s~~~~~~','~~~s~~~s~~','~~~~~~~s~~','~s~~s~~s~~','~s~~~~~~~~','~s~s~~~~~~','~~~~~ss~~~','ss~~~~~~s~'];
    var p1 = document.querySelector('#p1'), p2 = document.querySelector('#p2');
    for (i=0;i<w;i++) for (j=0;j<h;j++) {
        div1 = document.createElement('div');
        div1.id = i+'_'+j, div1.className = p1map[i][j] == 's' ? 's' : 'w';
        p1.appendChild(div1);
        div2 = document.createElement('div');
        div2.className = p2map[i][j] == 's' ? 's' : 'w';
        div2.onclick = function () { if (fire(this)) backfire(); };
        p2.appendChild(div2);
     }
    function fire(el) {
        if (el.className == 'd' || el.className == 'm') return false;
        el.className = el.className == 's' ? 'd' : 'm';
        if (document.querySelectorAll('#p2 .s').length === 0) {
            alert('You have won!'); 
            return false;
        }
        if (el.className == 'm') return true;
    }
    function backfire() {
        for (i=w*h;i>0;i--) {
            var targets = document.querySelectorAll('#p1 .s, #p1 .w');
            if (targets.length === 0 || fire(targets[Math.floor(Math.random() * targets.length)])) break;
        }
        if (document.querySelectorAll('#p1 .s').length === 0) alert('You have lost!');
    }
})(10, 10);

#p1 .s { background: #222; }
#p2 .s, .w { background: skyblue; }
.d { background: red;}
.m { background: gray; }
#p1 div, #p2 div { width: 20px; height: 20px; float: left; }
#p1, #p2 { width: 200px; height: 200 px; float: left; margin: 10px; }

<div id="p1"></div>
<div id="p2"></div>

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

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

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

    for (i=w*h;i>0;i--) {
        var r1 = Math.floor(Math.random() * w), r2 = Math.floor(Math.random() * h);
        el = document.getElementById(r1+'_'+r2);
        if (el.className != 'd' && el.className != 'm') if (fire(el)) break;
    }

Полез было вдохновляться замечательным постом про уникальные случайные числа на Stack Overflow, но решение оказалось куда более простым: с помощью querySelectorAll получать список «необстрелянных» клеток и выбирать цель уже среди них. Здесь возник и потенциал для увеличения сложности без намёка на AI: отсекать некоторую часть пустых клеток из выборки, чтобы CPU чаще попадал в корабли.

Также, думаю, не было особого смысла (кроме экономии строк) в передаче высоты и ширины игрового поля через параметры в главную функцию — всё равно без изменения карт игра в таком случае не заработает.

Принимаю предложения по улучшению. Можно ли было впихнуть в этот объем кода различение подбитых и потопленных кораблей, простенький AI, генератор или редактор карт, звуки взрывов?

Когда-то давно я, как и большинство начинающих программистов, хотел написать компьютерную игру. Выбор пал на «Морской бой» — игру простую, но не до тривиальности. Я начал с разработки теории (как именно должен выбирать себе цель «искусственный интеллект»). Затем мне стало интересно изобрести собственную модификацию правил. В моём варианте не было обычных двух полей, а корабли обеих сторон расставлялись на одном большом поле вперемешку. Как это возможно, я расскажу ниже.

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

Нажмите на кнопку, чтобы запустить игру. Требуется браузер с поддержкой HTML5 (то есть практически любой современный, в том числе должен работать IE версии выше 9). Игра поддерживается только для одного игрока против компьютера.

Правила игры

Имеется одно большое прямоугольное поле. Размер поля выбирается случайным образом — я заложил выбор случайного числа в промежутке от 10 до 20 включительно. Однако общая площадь поля не может быть меньше 200 и больше 250 ячеек. На маленьком поле корабли не поместятся, на большом игра будет слишком долгой и скучной.

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

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

Вступление

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Satellence

Источник

Практическая
работа

Тема:  «Морской бой» Цель работы: 

Получить практические навыки использования фреймворка jQuery.

Теоретические сведения:

jQuery — это быстрая, небольшая и
многофункциональная библиотека JavaScript. Он значительно упрощает такие вещи,
как обход и манипулирование документами HTML, обработку событий, анимацию, с
помощью простого в использовании API, который работает во множестве браузеров.

Благодаря сочетанию универсальности и расширяемости jQuery
изменил способ написания JavaScript. (URL: https://jquery.com/)

Задание:

Необходимо средствами HTML5, CSS3, JS разработать браузерную
игру «Морской бой». 

Общие требования:

1.                      
Игра должна быть кроссбраузерной и иметь адаптивную верстку.

2.                      
Стили и код JS должны быть вынесены в отдельные файлы “seaBattles.css”,
“ seaBattles.js”.

3.                      
Должен быть использован фреймворк jQuery.

4.                      
Верстка, код и стили должны содержать комментарии.

5.                      
Верстка, стили и код должны быть валидными и соответствовать стандартам W3C.

6.                      
Стилизация и цветовое оформление на усмотрение разработчика.

7.                      
Все элементы должны быть хорошо видны, текст должен быть контрастным и
легко читаться.

Техническое задание, описание и принципа
работы:

Часть 1

При заходе на страницу игры отображается заголовок и форма
со следующими полями:

• 
поле ввода имени игрока;

• 
поле ввода адреса электронной почты;

• 
чекбокс с текстом подтверждения согласия с правилами игры, с
обязательной ссылкой на страницу правил;

• 
чексбокс с текстом подтверждения использования куки;

•  кнопка начала игры.

Страница правил представляет собой отдельный HTML файл.
Страница должна открываться в новой вкладке. Содержимое страницы (текст правил)
на усмотрение разработчика.

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

При клике на кнопку начала игры производиться валидация
данных формы с последующим переходом на новый экран (не страницу), или выводом
сообщения об ошибке в форме.

Переход на новый экран
подразумевает скрытие содержимого формы и отображение содержимого игрового
экрана.

На игровом экране, помимо названия, должно быть отображено:

• 
Имя игрока

• 
Дата и время начала игры

• 
Таймер игры

• 
Кол-во ходов игрока, компьютера, общее

• 
Игровые поля для игрока и компьютера •
Индикатор хода (игрок или компьютер)

• 
Кнопка расстановки кораблей.

• 
Кнопка выполнения хода.

Расстановка кораблей (4
однопалубных, 3 трехпалубных, 2 двухпалубных, 1 четырехпалубный) производится
вручную (автоматический режим приветствуется) как для игрока, так и для
компьютера.

При расстановке кораблей
производиться контроль корректности на расстановку и количество. Должна быть
возможность установки корабля по горизонтали и по вертикали.

Кнопка выполнения хода
активируется только после расстановки кораблей. 

Часть 2

После того как все корабли
расставлены (игрок, компьютер), необходимо случайным образом определить

Кто ходит первым, игрок или
компьютер. После чего совершается ход.

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

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

После выполнения ходя должна быть
произведена смена хода игрок-компьютер или компьютеригрок.

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

В процессе разработки игры должно
быть продемонстрировано умение применения следующих инструментов JS:

• 
let, var, const

• 
if / else

• 
for

•  function

Критерии оценки:

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