Battle 2048
A real-time PvP adaptation of 2048 where two players develop separate boards and attack each other by converting their own tiles into damage.
Turn a solitary puzzle into a synchronized contest.
Competitive play adds simultaneous input, shared combat state, disconnects, rematches, matchmaking, AI opponents, and animations that must remain consistent with server state.
Separate product interaction from match authority.
A Next.js client owns interaction, animation, localization, and domain-based UI state. A dedicated Node.js and Socket.IO service owns rooms, game rules, concurrent actions, rate limits, and match lifecycle. Supabase stores users, history, statistics, server registry, and operational metrics.
Design explicitly for concurrency and recovery.
A FIFO action queue prevents simultaneous socket events from racing and corrupting either board.
The interface compares previous and current board state to classify spawns, movement, attack removal, and persistent tile identities.
Difficulty changes heuristic weights, attack thresholds, lookahead depth, choice randomness, and human-paced timing rather than applying a simple speed multiplier.
Postgres updates period aggregates when a game is recorded, avoiding a full-history aggregation for every leaderboard request.
Interaction follows a clear information hierarchy.
Stack
- Next.js 15
- React 19
- Node.js
- Socket.IO
- Supabase
- Zustand
- Framer Motion
- next-intl
- Fly.io