Демка · 8 сентября 2026
Moon Courier Crisis
Moon Courier Crisis разделяет доменную симуляцию и представление. SimulationEngine принимает команды, создаёт события и snapshots; seeded RNG делает прохождение воспроизводимым. React/Zustand управляют интерфейсом миссии, а Phaser рисует сцену как проекцию текущего состояния.
Выбор миссии; кадр фиксирует действие игрока, состояние симуляции и изменение интерфейса.
01 / Задача
Браузерная игра на React и Phaser
Нужно было собрать короткую, но цельную игру с маршрутом, ограниченной видимостью, событиями и повторным прохождением. Доменная логика не должна зависеть от canvas и компонентов интерфейса.
Сценарий: Браузерная игра с управлением маршрутом.
Что делал
- Связал React-интерфейс с игровыми сценами Phaser.
- Маршруты, события, брифинг, радиопанель и повтор миссии.
- Сборка, проверка ассетов и мобильная вёрстка экранов перед стартом игры.
02 / Реализация
Что отличает реализацию
Маршрут рассчитывается Dijkstra с учётом открытых узлов, видимость меняется событиями, а контент проверяется Zod до запуска. Команды и snapshots позволяют тестировать исход миссии без браузера; Phaser не владеет правилами игры и может быть пересоздан из состояния.
Скриншоты
Экраны, формы, ошибкиСкриншоты, схемы и исходные материалы сохранены на языке оригинала; подписи и описание переведены.
03 / Технологии
Что использовано
Доли по размеру прикладных файлов Git в закреплённой версии. Каждый файл отнесён к одной подсистеме по правилам scripts/generate-stack-share.mjs; тесты, ассеты, зависимости и generated-файлы исключены. Округление — до 0,1%. Это состав кода, а не уровень владения технологиями.
React
Брифинг, панели, подсказки и результат миссии.
Phaser
Canvas, игровой цикл, сцены, маршруты и объекты.
TypeScript / Vite
Модель игры, production-сборка и проверка ресурсов.
04 / Решения
Как устроен проект
- React отвечает за интерфейс, Phaser — за canvas и игровой цикл.
- Состояния выбора уровня, брифинга, миссии и результата разделены.
- После поражения повтор возвращает в брифинг; новая смена запускается явным действием.
05 / Проверка
Сценарии демки
- Выберите уровень и прочитайте брифинг.
- Начните смену, выберите курьера и назначьте маршрут.
- Откройте радиопанель и проследите событие миссии.
- Дождитесь результата, нажмите повтор и запустите новую смену из брифинга.
Результаты проверок
- Сохранено 15 содержательных кадров фактического интерфейса.
- Дата, сценарий и версия указаны у каждого кадра.
- Отдельного backend-процесса на VPS нет: Nginx раздаёт статику. Ресурсы общего Nginx нельзя честно приписать одному сайту.
- Измерено 6 повторений сценария; медиана 61.0 мс, максимум 1770 мс. Время включает браузер и HTTPS; методика и ограничения приложены.
Ограничения
- Управление маршрутом рассчитано на мышь и клавиатуру. Мобильные экраны адаптированы, полноценное touch-управление маршрутом не заявляется.
- Первый доступный commit — baseline готовой стадии, поэтому он не определяет начало разработки.
- Нет внешних интеграций или серверной БД: миссия выполняется в браузере.
Технические заметки
Модули, API, схема данных, запуск и результаты проверок.
Документация →Материалы ↓