Skip to content

dermanov-ru/vue_js_bomber_game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

О проекте

Иногда хочется отодвинуть в сторону разработку сайтов и заняться чем-то, что более связано с программированием, например разработкой игр. У меня появляется ощущение, что заниматься разработкой игр намного интереснее, чем разработкой сайтов :)

Об игре "Бомбер"

Суть игры заключается в том, найти дверь, открыть ее и войти в нее - для этого нужно всех взорвать и не взорваться самому.

В игре доступно 6 уровней разной сложности.

Драконы

Красные ползующие штуки - это драконы - они хотят съесть вас :)

Бонусы

В игре есть различные бонусы: увеличение кол-ва бомб, силы взрыва и кол-ва жизней - их нужно собирать. Они появятся на месте взорванной земли.

Дверь

Взрыв двери приведет к появлению дополнительных драконов.

Бот

Начиная с 3-го уровня в игре появится бот. Бот будет вредить вам: взрывать вас и дверь. А также он тоже может собирать бонусы :)

Бот находится в эксперементальном состоянии. Но вроде уже интересно с ним играть. Во время разработки бота - код сильно пострадал:) Код нужно сильно рефакторить, тк изначально многие вещи для бота не закладывались, а перелопачивать всю игру некогда.

Мобильные устройства

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

Конечно же, намного удобнее играть на компе.

Если вы проиграли

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

Дальнейшие планы

  • рефокторинг
  • таблица достижений
  • несколько ботов
  • сетевая игра + боты

Хочется многое оптимизировать, но лучше учту это в своей следующей игре :)

Баги и пожеления

Если вам попался баг или есть пожелания - создавайте issue.

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

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

Для рендеринга игрового поля и вывода информации из игры используется vue.js. Игра ничего не знает про внешний мир, кроме ячеек.

Таймер - это надстройка на уровне vue, игра ничего не знает про него.

Каждый уровень игры описывается отдельно - за это отвечает vue. Уровней можно наплодить сколько угодно и разной сложности в два счета.

Игра ничего не знает про остальные уровни. То есть уровни разруливает vue.

Описание уровня содержит:

  • размер поля
  • кол-во драконов
  • начальное кол-во бомб
  • начальную силу взрыва
  • количество каждого из бонусов (бомбы, мощность, доп. жизни)
  • наличие бота

Для создания игры vue передает текущий уровень в экземпляр игры.

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

В игре последовательно происходит расстановка всех объектов, с учетом переданных параметорв, то есть описания текущего уровня:

  • расстановка стен
  • расстановка драконов
  • расстановка земли
  • расстановка бонусов
  • установка героя и бота
  • установка двери

Вокруг героя есть безопасная зона в "радиусе" 3 ячеек (подматрица 3х3), куда не ставяться драконы.

Дверь устанавливается примерно в нижней части поля.

Драконы гуляют рандомно, специально ничего не делают.

Бот начинает гулять рандомно и изучает окружающий мир. Если он нашел что взорвать - завершает рандомное брожение и идет взрывать объект. Бот ищет для взрыва: землю, дверь, героя и бонусы. Драконов бот не взрывает и не лезет к ним. И драконы не едят бота.

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

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

Когда наступает конец игры - vue узнает об этом через хук. В хук передается статус: выиграл или проиграл.

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

About

Игра "Бомбер" на vue.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published