Кейс03 / 19
Межа
Браузерная стратегия · демо
«Межа» — моя собственная браузерная игра, сейчас это играбельное демо. Земля скрыта туманом, рабочие изучают её клетку за клеткой, а числа на изученной земле подсказывают, сколько рядом логов и сокровищ. Из найденного растёт королевство, а цель — восстановить древние святилища.
- Роль
- Один · геймдизайн и код
- Период
- окт. 2026 – сейчас
- Контекст
- Свой проект
- Формат
- Браузер · компьютер и телефон
- Next.js 16
- React 19
- TypeScript
- Canvas 2D
- Node.js
- ws
- Cloudflare Tunnel
- Vercel
Задача
Хотелось проверить, как далеко может зайти canvas-игра внутри обычного приложения на Next.js. Симуляция идёт в реальном времени с десятками юнитов, карта должна читаться на 44 × 30 шестиугольников, а один и тот же движок должен работать и одному в браузере, и на сервере для нескольких игроков.
- Понятная карта с туманом, числами и границами
- Экономика и враги, с которыми не скучно в долгой партии
- Игра по сети без переписывания движка
Что я сделал
Мир и экономика
- Шестиугольная карта до 44 × 30 с реками, холмами и горами, три уровня знания о земле и мини-карта.
- Поиск пути для юнитов через реки, дороги и мосты.
- Времена года меняют экономику: зимой дома и замок жгут дрова.
- Уровни замка от хутора до крепости, цепочки ремёсел для досок, хлеба и одежды и рынок.
Враги и армия
- Логова гоблинов, которые растут со временем, волки зимой, разбойники, тролли, дезертиры из старых фортов и дракон.
- Войска со званиями, стены с воротами и набат, который поднимает жителей в ополчение.
Игра вместе
- От двух до шести королевств на одной карте: каждый за себя или командами, от 1 на 1 до 3 на 3 и 2 на 2 на 2.
- Сервер игры на Node.js и ws решает всё сам и держит комнаты. Браузер повторяет игру по снимкам, и каждая команда видит только то, что изучила.
- Скрипт хозяина открывает туннель Cloudflare и вставляет адрес сервера в ссылку-приглашение.
Графика и проверки
- Вся графика рисуется кодом на одном canvas, есть масштаб, перемещение карты, мышь и касания.
- Справочник с боковым меню и поиском объясняет каждое здание, врага и правило.
- Автотесты в headless Chrome ставят замок, изучают землю, строят, воюют и сохраняют скриншоты. Сетевой тест играет партию в двух вкладках.
Результат
- строк на TypeScript
- 46k
- королевств на одной карте по сети
- 2–6
- режима игры
- 3
Игра в статусе демо и продолжает расти. Одиночная игра целиком работает в браузере по ссылке выше, для игры по сети нужен сервер игры. Код закрытый, покажу по запросу.