Перейти к содержанию
RUEN

Orbit Strike: строй пришельцев идёт в пике

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

Управление: Z — влево, X — вправо, M — огонь, Esc — пауза. На телефоне — экранные кнопки. Открыть игру на весь экран ↗

Задача

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

Решение

  • Пике задаётся курсом и скоростью поворота, а не кривой: каждый кадр курс доворачивается, и враг смещается вдоль него. Такой интегратор даёт плавные дуги, сразу даёт угол наклона спрайта и проверяется тестами без браузера.
  • Три формы пике зеркалятся в обе стороны; дуга обычно заворачивает к игроку, но в четверти вылетов уходит в противоход, чтобы направление нельзя было выучить. Кто и когда вылетает, решает директор атак: с уровнем пике чаще, быстрее и большими группами.
  • Звёздное небо процедурное: три слоя параллакса с разной скоростью, плотностью и размером звёзд. Четырёхлучевые звёзды генерируются в SVG-тайл шириной 1280 px и кладутся фоном — три элемента вместо двухсот пятидесяти, а мерцание дают слои в противофазе.
  • Планеты тоже строятся кодом: четыре вида миров (полосы, кратеры, пятна, надкушенный диск), пиксельная палитра из четырёх ступеней и свет слева сверху. Одна величина задаёт сразу размер, скорость и яркость, поэтому разница читается как расстояние.

Подробности

  • Фон растянут на всю сцену, а не только на поле: на широком экране космос не обрывается у кромки и масштабируется вместе с полем.
  • Строй качается и никогда не спускается; флагман атакует с двумя ведомыми и стоит от 150 до 800 очков в зависимости от порядка, в котором их сбить.
  • Фоновая мелочь берётся из пула переиспользуемых элементов и полупрозрачна, чтобы глаз сразу относил её к фону, а редкий обломок появляется только с третьего уровня.

Технологии

  • TypeScript
  • DHTML sprites
  • Procedural generation
  • SVG
  • Web Audio
  • Pointer Events
  • Yandex Games SDK