A real-time multiplayer browser game where two players battle by spawning Rock, Paper, Scissors units into three horizontal lanes. Units automatically move toward the opponent's base, colliding and resolving with standard RPS rules (Rock beats Scissors, Scissors beats Paper, Paper beats Rock). The goal is to get units past defenses to damage the opponent's base 20 times.
- Real-time gameplay with Socket.io
- Optimistic UI with rate limiting
- Visual feedback for blocked lanes
- Spectator mode for extra players
- Frontend: Vanilla JavaScript, Canvas API, Socket.io-client
- Backend: Node.js, Express, Socket.io
- Rendering: Emoji-based units on HTML5 Canvas
- Install dependencies:
./install-deps.sh - Start servers:
./run-dev.sh - Open
http://localhost:5173in two browser windows/tabs.
- Install root dependencies:
npm install - Install client dependencies:
cd client && npm install && cd .. - Start dev servers:
npm run dev - Access at
http://localhost:5173.
The server runs on port 3000, client on 5173 with proxy.
- Join Game: Open the page; first two players are assigned P1/P2, extras spectate.
- Select Unit: Click "Select Rock/Paper/Scissors" to choose spawn type.
- Spawn Units: Click a lane (top/middle/bottom) to spawn the selected unit.
- Strategy: Units cost 3 energy (regens over time). Spawns in same lane blocked for 0.25s, shown by grey overlay.
- Win Condition: Reduce opponent's HP to 0 by reaching their base. Game ends with full-screen winner message.
- Select buttons: Choose unit type (persistent until changed).
- Lane clicks: Spawn in vertical position (top/middle/bottom).
- Reset: Restart game after win.
Enjoy battling with RPS strategy! README.md