jozamudi
a0ab4ff5cd
- Server: Late joiners are added as spectators instead of players - Server: Send forced-spectator event only to joining spectator (not broadcast) - Server: Track spectators separately and move them to players after game ends - Client: Handle forced-spectator event to show all player boards - Client: Spectators see all boards equally without main/spectator highlighting - Client: Mobile view shows scrollable vertical list of all boards for spectators - Fix: All cleared lines are sent as garbage to each opponent (not randomized) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Tetris Battle Royale
A multiplayer Tetris Battle Royale game built with HTML, CSS, JavaScript, and Node.js.
Features
- 2-8 Player Multiplayer: Real-time battles via WebSocket
- Battle Royale Mechanics: Clear rows to send garbage to opponents
- Classic Tetris Gameplay: All 7 tetrominoes with standard rotation
- Retro Visuals: CRT scanlines, pixel art font, classic colors
- Multiple Boards View: See all players' boards simultaneously
How It Works
When you clear rows, garbage rows are sent to random opponents:
- 2 lines cleared → 1 garbage row sent
- 3 lines cleared → 2 garbage rows sent
- 4 lines (Tetris) → 4 garbage rows sent
The last player standing wins!
Setup
-
Install dependencies:
cd server npm install -
Start the server:
node index.js -
Open
http://localhost:3000in 2-8 browser tabs -
Enter a room name and your name, then join
-
Click "READY" when all players are ready
Controls
- Arrow Left/Right: Move piece
- Arrow Up: Rotate piece
- Arrow Down: Soft drop
- Space: Hard drop
Game Flow
- Lobby: Players join a room and wait
- Ready: All players click READY to start
- Game: Play Tetris, clear rows to attack opponents
- Elimination: Players are eliminated when pieces stack to the top
- Victory: Last player standing wins
File Structure
tetris-battle-royale/
├── server/
│ ├── index.js # Node.js + Socket.io server
│ └── package.json
├── public/
│ ├── index.html # Main HTML
│ ├── css/
│ │ └── style.css # Retro styling with CRT effects
│ └── js/
│ ├── game.js # Tetris game logic
│ ├── renderer.js # Canvas rendering
│ ├── network.js # Socket.io client
│ ├── ui.js # UI management
│ └── app.js # Main application
└── README.md
Technology Stack
- Frontend: Vanilla JavaScript, HTML5 Canvas, CSS3
- Backend: Node.js, Express, Socket.io
- No frameworks - pure vanilla implementation
Troubleshooting
- Port already in use: Change PORT in
server/index.js - Can't connect: Make sure server is running on port 3000
- Game not starting: Need at least 2 players ready