https://habr.com/ru/company/icl_services/blog/508850/

• Блог компании ICL Services
• Ненормальное программирование
• JavaScript
• Разработка игр

Имеется древняя игрушка LaserAge, которая написана на Flash (на очень древнем Macromedia Flash 4) и работает только под Windows. В детстве она мне очень понравилась, поэтому я решил для души портировать её, чтобы можно было играть с браузера со всех устройств.

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

При уничтожении всех противников на уровне происходит переключение на следующий уровень. Всего 100 уровней.

В терминах игры уровень — волна (Wave), а несколько волн объединены в большой уровень (Level), который представляет из себя просто смену заднего фона, т.е. всего 4 больших уровня в каждом из которых 25 волн. В последней волне большого уровня обычно бывает босс — противник с огромным значением жизни и мощным оружием.

[TOC]

Бизнес логика игры

Игровое пространство

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

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

Оружие

Оружием обладает космический корабль игрока и корабли противника.
Оружие игрока может быть ручным (стреляет при нажатии мыши) и дополнительное автоматическое (стреляет периодами).

Оружие стреляет торпедами, алгоритм движения которых очень примитивный: торпеды противника движутся на игрока (сверху вниз), а торпеды игрока движутся снизу вверх.
При попадании торпеды противника в игрока вычитается 1 уровень жизни (апгрейда), при 0 игра завершается поражением.

Оружие космического корабля игрока

• Торпеда — стреляет маленькими ракетами
  
  • Одинарная Торпеда — 1 уровень апгрейда
  • Двойная — 2 уровень апгрейда
  • Тройная — 3 уровень апгрейда
• Автоматические пушки
  
  • Дополнительная автоматическая Торпеда слева корабля — 4 уровень апгрейда
  • Дополнительная автоматическая Торпеда справа корабля — 5 уровень апгрейда
• Зелёная плазма — 6 и 7 уровень апгрейда (увеличивается скорострельность)
• Фиолетовая плазма — 8 уровень апгрейда (наносит урон всем противникам по траектории полёта)
• Зелёный лазер — 9 уровень (наносит урон всем противникам, а также активно одну секунду, тем самым можно задеть соседних противников)

Дополнительное оружие:

• Красная плазма — 15-19 уровень (наносит урон всем противникам, а также активно одну секунду, тем самым можно задеть соседних противников)
• Зелёная плазма — 20-24 уровень
• Синяя плазма — 25-29 уровень апгрейда
• Фиолетовая плазма — 30-34 уровень апгрейда
• Фиолетовая плазма — 30-34 уровень апгрейда
• Дополнительная автоматическая Торпеда слева стреляет желтой плазмой — 35 — 39 уровень апгрейда
• Дополнительная автоматическая Торпеда справа стреляет желтой плазмой — 40+ уровень апгрейда

Таблица с характеристиками оружия игрока

Таблица с конфигурацией оружия игрока в зависимости от уровня жизни

Оружие противников

Таблица с конфигурацией оружия противников

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

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

Пример конфигурации оружия:

"torpedo": {
    "sprite": "Bullet1_1.png", //картинка спрайта
    "isRandomIntensity": false, //нужно ли переключать случайно слоты - true или по порядку - false
    "intensity": [
        //слот 0
        {
            "min": 50, //минимальное число фреймов
            "max": 200, //максимальное число фреймов
            "type": "pause" //pause - оружие неактивно, shoot - активное (стреляет)
        },
        //слот 1
        {
            "min": 100,
            "max": 200,
            "type": "shoot"
        },
        {
            "min": 50,
            "max": 80,
            "type": "pause"
        },
        {
            "min": 30,
            "max": 100,
            "repeat": 2
        }
    ],
    "speed": 2.5, //скорость
    "type": "bullet", //тип оружия
    "sound": "alienTorpedo"
}

Действующие лица

Корабль игрока

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

Управляется движением мыши или стрелочками ← и →. На экране мобильного телефона тапом и движением по экрану.

Оружие активирует при удержании левой клавиши мыши (тапом и удержанием по экрану на мобильном телефоне).

Противники

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

JSON-конфигурация противника:

"alien10": {
    "life": 35,
    "weapons": [
        {
            "weapon": "blueTorpedo",
            "position": {
                "x": -6,
                "y": 0
            }
        },
        {
            "weapon": "blueTorpedo",
            "position": {
                "x": 6,
                "y": 0
            }
        }
    ],
    "sprite": "AlienShip10_1.png",
    "movement": "horizontalFast",
    "killPoints": 2100
}

JSON-конфигурация движения противника :

"horizontalFast": {
    "movements": [
        {
            "type": "freeMovement", //freeMovement - обычное, followPlayer - следит за игроком (движется в направление)
            "speedDelta": {
                "vx": -6,
                "vy": 0
            },
            "intensity": [ //интенсивность движения в виде слотов
                {
                    "min": 20,
                    "max": 150
                },
                {
                    "min": 150,
                    "max": 350
                }
            ]
        }
    ]
}

Бонусы

Специальный вид противника

, который не имеет оружия и при уничтожении порождает спрайт с бонусом

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

Уровни

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

JSON-конфигурация уровня :

        "2": {
            "level": 1, 
            "enemies": [ // список противников
                {
                    "id": "alien1",
                    "position": {
                        "x": 200,
                        "y": 35
                    }
                },
                //...
                {
                    "id": "alien1",
                    "position": {
                        "x": 525,
                        "y": 40
                    }
                }
            ],
            "bonuses": [ // список бонусов
                {
                    "id": "bonus1",
                    "position": {
                        "x": 350,
                        "y": 10
                    }
                }
            ]
        },

Выбор JavaScript библиотеки для реализации

Я просмотрел множество библиотек графики для JavaScript, но остановился на Hexi JS: https://github.com/kittykatattack/hexi .

Возможности библиотеки:

• Простота
• Рисование примитивов
• Рисование просты интерфейсов (кнопки, события)
• Перемещение, масштабирование, вращение
• Рисование спрайтов
  
  • Анимированные спрайты
  • Работа со спрайтами как с объектами
  • Загрузка спрайтов в виде большой текстуры-атласа. Можно разместить множество изображений в одном файлы и на выходе получить одну большую текстуру и JSON файл с описанием спрайтов (область, смещение)
• Логика столкновений
• Работа с устройствами ввода (клавиатура), тач-скрин.

Пример текстуры-атласа создаваемого с помощью программы TexturePacker

Звуковая библиотека: https://github.com/kittykatattack/sound.js

Возможности библиотеки:

• Простота
• Воспроизведение звуков
• Воспроизведение музыки
• Эффекты

Архитектура

Общая диаграмма классов:

Ядро игры

Класс Main

Является точкой входа и контейнером игрового кода.

Поля:

• resources — содержит список всех загружаемых ресурсов (текстуры, звук, json)
• sounds — словарь звуков: Ключ — название, Значение — путь
• gameScene — объект HexiJS на
• game — экземпляр объекта Game
• hexi — инстанс HexiJS
• gameStorage — сохраняет состояние игры в localStorage

Методы:

• init() — инициализирует HexiJS
• load() — загружает ресурсы (текстуры, звук, json)
• setup() — устанавливает игровую область, события нажатия кнопок, запускает фоновую музыку
• playLoop() — точка изменения состояния игры (считает движение, коллизии, снаряды, перерисовывает пространство).
• saveGame() — сохраняет игру
• loadGame() — загружает игру

Пример списка ресурсов текущей реализации игры:

Main.resources = [
        "images/environment1.png",
        "images/environment2.png",
        "images/environment3.png",
        "images/environment4.png",
        "images/interface.png",
        "images/life-icon.png",

        "images/ships-texture.json",
        "images/bullet-texture.json",

        "sounds/alien-torpedo-shoot.wav",
        "sounds/alien-red-plasma-shoot.wav",
        "sounds/hero-torpedo-shoot.wav",
        "sounds/explode.wav",
        "sounds/hero-green-plasma-shoot.wav",
        "sounds/alien-green-plasma-shoot.wav",
        "sounds/alien-blue-torpedo-shoot.wav",
        "sounds/alien-yellow-laser.wav",
        "sounds/pulse-plasma.wav",
        "sounds/laser.wav",

        "sounds/track0.ogg",
        "sounds/track1.ogg",
        "sounds/track2.ogg",
        "sounds/track3.ogg",
        "sounds/track4.ogg",

        "data/hero-configuration.json",
        "data/levels-configuration.json",
        "data/enemy-configuration.json",
        "data/ui-configuration.json",
    ];

Класс Game

Основной класс игры.

Поля:

• level — информация о уровне. Значение: { "wave": 1 //номер волны, "type": 1 }
• score — информация об очках. Значение: {"points": 0 }
• bulletsController — Экземпляр класса BulletsController. Управляет поведение торпед и лазеров оружия
• enemyController — Экземпляр класса EnemyController. Управляет поведением всех противников на уровне (в т.ч. и бонусами)
• player — Экземпляр Player
• hexi — экземпляр класса Hexi (ссылка)
• game — экземпляр объекта Game
• gameStorage — экземпляр объекта GameStorage

Методы:

• clearShips() — очистка всех проиивников, бонусов
• setupLevel() — настроить уровень (добавить противников, бонусы, расстановка)
• nextLevel() — переход на следующий уровень
• previousLevel() — переход на предыдущий уровень
• forwardLevel() — перепрыгнуть на несколько уровней вперёд (на 5)
• rewindLevel() — перепрыгнуть на несколько уровней назад (на 5)
• restoreState(gameState: JSON) — восстановить по объекту gameState
• resetGame() — сбросить игру (начать сначала)
• update() — обновить игровой мир
• enemyDestroyed() — обработчик срабатывает при уничтожении всех противников

Класс GameStorage

Сохраняет и загружает состояние игры .

Поля:

• game — экземпляр объекта Game

Методы:

• save() — сохранить состояние игры
• load() — загрузить состояние игры

Класс InputDevice

Работает с событиями устройств ввода: click и touch кнопок, нажатие клавиш клавиатуры.

Поля:

• game — экземпляр объекта Game

Методы:

• init() — инициализирует все обработчики события и callback'и
• loadTapped() — нажата кнопка "Load"
• storeTapped() — нажата кнопка "Store"
• resetTapped() — нажата кнопка "Reset"
• pauseTapped() — нажата кнопка "Pause"

Иерархия классов действующих лиц

Actor

Класс участника.

Поля:

• hexi — экземпляр класса Hexi (ссылка)
• game — экземпляр объекта Game
• life — текущее значение жизни
• initialLife — начальное значение жизни
• sprite — экземпляр класса Hexi.Sprite
• shipConfiguration — конфигурация бонуса

Методы:

• move() — переместить действующее лицо
• update() — обновить действующее лицо
• setPosition(position: {x, y}) — установить по координатам

WeaponedActor

Класс участника (противник или игрок) обладающем оружием.

Поля:

• automatedWeapons — массив автоматических оружий
• canShoot — мжет ли стрелять
• isWeaponShooting — активено ли оружие

Методы:

• startShoot() — запустить выстрелы оружием
• stopShoot() — остановить выстрелы оружием
• onShootStarted() — обработчик события, что запущены выстрелы оружием
• onShootStopped() — обработчик события, что остановлены выстрелы оружием
• updateShooting() — выполняет алгоритмы выстрелов

Enemy

Класс противника.

Поля:

• type — тип противника
• syncWeapons — массив конфигураций для синхронного оружия
• movementEngine — экземпляр класса MovementEngine

Методы:

• setWeapon() — установить оружие используя текущую конфигурацию
• shootWithWeapon() — выполняет выстрел противником
• setLifeLine() — рисует линию жизни противника
• hit() — проверяет столкновение торпед (лазера) игрока с текущим противником

MovementEngine

Класс управляющий движением.

Для придания сложности движения, используется конфигурация со слотами. В каждом слоте задаётся вектор направления vx, vy и интенсивность. Имеется возможность отключения отражения от нижней границы и режим слежения за игроком (противник всегда движется за игроком).

Поля:

• movementsConfiguration — конфигурация движения
• firstMovementConfiguration — первый элемент из списка конфигураций
• movementItensity — интенсивность движения
• movementItensityCounter — счётчик интенсивности движения
• movementItensitySlot — номер слота интенсивности
• isBounceBottom — флаг на проверку отражения от нижней границы. Если false, то противник не отражается от нижней границы

Методы:

• setMovement() — настраивает движение
• updateMovement() — обновляет движение по конфигурации движения

Player

Класс игрока.

Поля:

• weapons — массив оружия игрока
• collisionSprite — спрайт коллизии (торпеды противника сталкиваются со спрайтом коллизии, а не спрайтом игрока)
• weaponLifeLevels — значения уровня жизни для проверки на апгрейд оружия
• invisibilityCounter — счётчик невидимости от торпед (нужен для того, чтобы при столкновении с торпедой противника игрок стал временно недосягаем для других торпед)

Методы:

• upgrade() — апгрейд игрока (+1 жизнь)
• downgrade() — даунгрейд игрока (+1 жизнь)
• shootWithLaser(currentWeapon, weapon) — выстрел лазером
• shootWithBullets(currentWeapon, weapon) — выстрел торпедой
• setWeapon() — установить оружие используя текущую конфигурацию
• setLife(life: number) — установить значение жизни (меняет оружие в соответствии со значением жизни)
• hitUpgrade(upgradeItem) — проверить столкновение со спрайтом апгрейда

Bonus

Класс Бонуса. При уничтожении порождает спрайт апгрейда.

Поля:

• type — тип бонуса
• movementEngine — экземпляр класса MovementEngine
• upgradeBonus — конфигурация апгрейда

Методы:

• shootWithUpgrade(upgradeBonus: JSON) — породить спрайт апгрейда

EnemyController

Управляет состоянием противников, бонусов, апгрейдами.

Поля:

• enemies — массив всех противников на уровне
• bonuses — массив всех бонусных кораблей на уровне
• player — объект игрока
• upgrades — массив всех спрайтов апгрейда

Методы:

• isLevelCompleted() — проверка на завершённость уровня (уничтожены все противники и бонусы, пойманы апгрейды)
• update() — обновляет состояние всех противников
• clear() — очистка уровня от проиивников, бонусов

BulletsController

Управляет состоянием торпед (перемещение), лазерами игрока и противников.

Поля:

• playerBullets — массив торпед игрока
• enemyBullets — массив торпед всех противников
• explosionSplashes — массив спрайтов взрыва
• playerLaser — состояние спрайта лазера игрока (Если оружие доступно).

Методы:

• update() — обновляет состояние всех торпед, лазеров
• clear() — очищает уровень от всех торпед, лазеров
• updatePlayerBullets() — изменяет состояние всех торпед игрока
• updatePlayerLaser() — изменяет состояние лазера игрока
• updateEnemyBullets() — изменяет состояние всех торпед противника
• updateExplosions() — изменяет состояние всех взрывов

Выводы

Я постарался достаточно подробно рассказать как портировать существуюшую игру на JavaScript.

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

Очень хотелось бы получить от вас комментарии по архитектуре игры, варианты рефакторинга, по именованию методов и т.д.

Согласен, архитектура не очень идеальная и есть куда стремиться!

Спасибо и интересных Вам проектов!

Ссылки

http://laseroid.azurewebsites.net/ — сама игра
https://github.com/EntityFX/laseroid — исходный код игры