Orbit Assault: аркада о вторжении с орбиты
Аркада на собственном движке: волны пришельцев спускаются к вашему танку, над ними пролетает тарелка, а щиты рассыпаются по кирпичику.
Управление: Z — влево, X — вправо, M — огонь, Esc — пауза. На телефоне — экранные кнопки. Открыть игру на весь экран ↗
Задача
Нужна была аркада, которая запускается по ссылке на любом устройстве, остаётся чёткой на любом экране, весит десятки килобайт и не тянет за собой ни игровой движок, ни аудиофайлы.
Решение
- Рендер на DHTML: каждый спрайт — блок страницы со спрайтшитом в background-position, без холста. Слои компонует сам браузер, а пиксельная графика остаётся чёткой при любом масштабе.
- Звук синтезируется на лету через Web Audio: сирена тарелки, выстрелы, взрывы и треск попаданий собраны из осцилляторов, шума и фильтров, без единого аудиофайла.
- Собственный движок: игровой цикл на requestAnimationFrame, шина событий и сетка столкновений, в которой попадания проверяются только между соседними ячейками.
- Код на TypeScript разложен по слоям Feature-Sliced Design, границы слоёв проверяет линтер. Платформа вынесена за интерфейс, поэтому одна и та же игра собирается для сайта и для игровых площадок.
Подробности
- Поле масштабируется под экран, на телефоне появляются три экранные кнопки, в портретной ориентации раскладка перестраивается.
- Пять скинов спрайтов генерирует скрипт: он перекрашивает только непрозрачные пиксели по зонам с сохранением яркости, формы не меняются.
- Около 200 модульных тестов и headless-проверка реальной сцены; промо-кадры снимает скрипт, который сам играет в игру.
Технологии
- TypeScript
- Feature-Sliced Design
- DHTML sprites
- Vite
- Web Audio
- Pointer Events
- Yandex Games SDK