Multiplayer Mini Game

Server-authoritative real-time browser game with keyboard, mouse, and touch input.

Live Demo · GitHub · ~1,500 LOC

---

Stack

Features

• Server-authoritative game loop at 50ms — input processed server-side, clients cannot cheat
• Keyboard (WASD/arrows), mouse click-drag, and touch drag with simultaneous handling and diagonal normalization
• DOM-based renderer with CSS animations — no canvas or game engine
• Responsive canvas scaling via ResizeObserver to fit any viewport
• Coin collection with background music, SFX, victory and defeat jingles
• Mobile-friendly collision detection with larger touch margin
• Room isolation with up to 4 players per session

Quick Start

git clone https://github.com/Seb-fd/Multiplayer-Mini-Game.git
cd Multiplayer-Mini-Game

# Terminal 1 — Server
cd server && npm install && npm start

# Terminal 2 — Client
cd client && npm install && npm run dev

Open http://localhost:5173. The client defaults to the production WebSocket server; set VITE_SERVER_URL for local testing.

Architecture

The client (React + Vite + Zustand) communicates with the Node.js server exclusively via Socket.IO WebSocket (no polling fallback). The server runs an authoritative 760x512 map loop every 50ms: it reads keyboard input and ballistic mouse targets for each connected player, applies speed with diagonal correction, clamps to bounds, and broadcasts position updates to the room. Coin collection triggers server-side score increments, win detection at 50 points, and automatic round reset. All rendering is DOM-based with CSS animations.