Есть вещи, которые хочется сказать, но не знаешь как. Я несколько месяцев ходил вокруг этой темы. Так и создал Border.
→ Играть прямо сейчас (браузер, без установки)
Что это такое
Border — браузерная игра в реальном времени. Два вымышленных государства тянут линию фронта. Население растёт непрерывно. Каждая атака стоит человеческих жизней — с обеих сторон.
Никаких солдат, юнитов, маны. Только число людей, которое идёт вниз.
Три режима на каждую сторону:
Развиваться — быстрый прирост населения, атаки запрещены
Атаковать — максимальный напор, нулевой рост
Защищаться — снижает потери от вражеских атак
Игра заканчивается, когда граница дошла до края или население упало до 1.
Почему это не обычная военная игра
Большинство военных игр заканчиваются фанфарами. Border — нет.
Я заложил в дизайн несколько механик, которые намеренно мешают наслаждаться победой:
Каждое число — это человек. Счётчик населения — не ресурс. Это люди. Когда он падает, появляются контекстные сообщения: при 100 тысячах погибших, 500 тысячах, миллионе.
Микроистории. Во время боёв на экране вспыхивают короткие нарративы:
«Едва исполнилось восемнадцать»
«Форма вернулась. Он — нет»
«Трое детей. Больше не увидят»
Они намеренно прерывают стратегическую абстракцию. Ты принял решение — вот его цена.
Casus belli. Каждая партия начинается с официального обоснования войны. С эффектом печатной машинки, очень убедительная и авторитетная пропаганда. В конце игры — после того как подсчитаны все потери — этот же текст появляется снова. Контраст говорит сам за себя.
Мемориал. После окончания игры можно ввести имя одного из погибших. Оно запоминается на время сессии. Это делает всё личным.
Техническое устройство
Раз уж мы на Хабре — поговорим о коде.
Стек
Слой |
Технология |
|---|---|
Рендеринг |
HTML5 Canvas (два слоя: карта + UI-оверлей) |
Логика |
Vanilla JS, ES Modules |
Стили |
Vanilla CSS с CSS custom properties |
Звук |
Web Audio API (процедуральный синтез, без аудиофайлов) |
Состояние |
In-memory, class-based |
Персистентность |
localStorage (только настройки) |
Зависимости |
Ноль |
index.html открывается напрямую в любом современном браузере.
Архитектура
Border/ ├── index.html ├── css/styles.css └── js/ ├── main.js # Точка входа ├── game/ │ ├── BorderGame.js # Фасад: экраны, игровой цикл, инпут, ИИ │ └── GameState.js # Мутабельное состояние сессии ├── ai/ │ └── AiController.js # ИИ с адаптивной стратегией ├── config/ │ └── GameConfig.js # Константы баланса ├── content/ │ └── GameContent.js # Нарративный контент: имена, истории, цитаты ├── i18n/ │ └── I18n.js # RU/EN, переключается в любой момент ├── rendering/ │ └── GameRenderer.js # Canvas: карта, фронт, частицы, UI ├── systems/ │ ├── CombatSystem.js # Расчёт атак и потерь │ ├── BattleEffects.js # Частицы и вибрация фронта │ ├── MapGenerator.js # Процедуральные карты: рельеф, реки, города │ └── SoundManager.js # Web Audio API └── utils/helpers.js
ИИ-противник
Три уровня сложности с адаптивной стратегией. ИИ читает текущий режим игрока и контрит его: если ты переключился на развитие — он атакует; если атакуешь — переходит в защиту. На высоком уровне сложности добавляются задержки, блефы и ложные переключения режимов.
Двуязычность
Полная поддержка RU/EN. Переключение в любой момент — в меню, во время игры, на экране casus belli. Все строки вынесены в I18n.js.
О чём эта игра на самом деле
Я сделал Border как личное высказывание против милитаризма.
Игровые механики хороши тем, что заставляют принимать решения и нести за них ответственность. Ты не просто смотришь на цифры — ты сам нажал кнопку. Ты знал, что это будет стоить жизней. И всё равно нажал.
Игра не осуждает. Она просто показывает последствия.
«Победитель в войне — тот, кто потерял меньше. Но он всё равно потерял.»
Репозиторий: github.com/terekhinandrei/Border
Буду рад фидбэку — особенно про баланс и нарратив.