Case study03 / 19
Mezha
Browser strategy game · demo
Mezha is my own browser game, now a playable demo. The land is hidden under fog, workers explore it tile by tile, and the numbers on explored land show how many lairs and treasures are nearby. You grow a kingdom from what you find and restore the old shrines.
- Role
- Solo · game design and code
- Period
- Oct 2026 – present
- Context
- Pet project
- Format
- Browser · desktop and mobile
- Next.js 16
- React 19
- TypeScript
- Canvas 2D
- Node.js
- ws
- Cloudflare Tunnel
- Vercel
The task
I wanted to see how far a canvas game can go inside a regular Next.js app. The simulation runs in real time with dozens of units, the map has to stay readable at 44 × 30 hexes, and the same engine has to work both alone in the browser and on a server for several players.
- A readable map with fog, numbers and borders
- An economy and enemies that keep a long game interesting
- Online play without rewriting the engine
What I built
The world and the economy
- A hex map up to 44 × 30 with rivers, hills and mountains, three levels of knowledge about the land and a minimap.
- Pathfinding for units across rivers, roads and bridges.
- Seasons that change the economy: in winter houses and the castle burn firewood.
- Castle tiers from a hamlet to a fortress, crafting chains for planks, bread and clothes, and a market.
Enemies and the army
- Goblin lairs that grow over time, wolves in winter, bandits, trolls, deserters from old forts and a dragon.
- Troops with ranks, walls with gates and an alarm that turns villagers into a militia.
Playing together
- Two to six kingdoms on one map: everyone for themselves or in teams, from 1 vs 1 to 3 vs 3 and 2 vs 2 vs 2.
- An authoritative game server on Node.js and ws with rooms. The browser mirrors the game from snapshots, and every team sees only what it has explored.
- A host script opens a Cloudflare tunnel and puts the server address into the invite link.
Graphics and checks
- All graphics are drawn in code on a single canvas, with zoom, panning, mouse and touch controls.
- A codex with a sidebar and search explains every building, enemy and rule.
- Headless Chrome playtests place a castle, explore, build, fight and save screenshots. A network test plays a match in two tabs.
Outcome
- lines of TypeScript
- 46k
- kingdoms on one map online
- 2–6
- game modes
- 3
The game is a demo and is still growing. Single-player runs fully in the browser at the link above; online play needs the game server. The code is private and available on request.