Браузерная игра

Chimera Bastion: браузерная стратегия со скрещиванием существ

Игра-вдохновение по мотивам старых мобильных стратегий: лаборатория скрещивания животных, три линии автобоя и кампания с боссами.

LiveБраузерная игра
  • Игра
  • TypeScript
  • Browser
Открыть Chimera Bastion ↗

Проблема

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

Дополнительная сложность — само скрещивание: если результат синтеза не зависит явно от того, какие два существа выбраны, игрок быстро перестаёт разбираться в системе и просто жмёт кнопку наугад.

Лаборатория: синтез существ и совместимость геномов

На странице «Лаборатория» игрок кликает по зверю в архиве — клики по очереди занимают слоты «Геном A» и «Геном B» (в отдельных этапах кампании слотов может быть от 2 до 4). Архив на момент проверки — 17 существ (волк, беркут, черепаха, змея, толсторог, леопард, лисица, кабан, крокодил, сова, скорпион, богомол, носорог, олень и три дракона), с фильтром по типу тела: 2 конечности, 4 конечности, 6 конечностей, безногие, драконы.

Кнопка «Синтезировать» собирает химеру из выбранной пары и показывает процент совместимости геномов, боевые статы (ATK, DEF, SPD, RNG, HP), стоимость выпуска, время перезарядки и пассивные теги, унаследованные от родителей, а также текстовое объяснение — что в мутации сработало, а что может подвести (например, «конфликтные узлы: дикость + фокус»). Результат не нравится — можно синтезировать заново из той же пары или сохранить удачный вариант в колоду.

Поле боя: три линии, энергия и разлом

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

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

Кампания и апгрейды бастиона

Кампания разбита на пять этапов (счётчик «1/5» на каждой странице), каждый со своим названием и текстовой целью — например, первый этап «Туманная кромка» требует удержать две учебные волны, не теряя темп по энергии.

Эссенция, которую даёт синтез и волны, тратится на апгрейды архива — «Укрепить бастион» (+35 к максимуму здоровья этапа и частичное лечение) и «Разогнать реактор» (+10 энергии в резерве и +0.35 к регенерации в секунду), а также на открытие новых существ архива по мере исследования — до полного исчерпания скрытого списка.

Результат

На момент проверки продукт работает как отдельная кампания с четырьмя связанными страницами (Обзор, Лаборатория, Поле боя, Журнал), автосохранением прогресса в браузере и процедурным звуком без единого внешнего аудиофайла — включая переключатель «Звук: вкл/выкл» и кнопку полного сброса прогресса.

Игра работает на собственном домене (chimera-bastion.ecomdev.uz), логика полностью переписана на TypeScript с использованием открытых по лицензии SVG-ассетов — то есть система скрещивания и боя реализована с нуля, а не собрана поверх скопированных механик.

Другие кейсы

Flex Convert: конвертер валют и инженерных величин как отдельный продукт

Flex Convert: конвертер валют и инженерных величин как отдельный продукт

Самостоятельный веб-конвертер на 10 разделов величин — валюта с ежедневными курсами и настраиваемым списком валют, плюс давление, температура, длина, вес, площадь, объём, скорость, время и энергия — с отдельным калькулятором и SEO-гайдами.