Initial commit: Tetris Battle Royale multiplayer game

Features: - 2-8 player multiplayer via Socket.io WebSocket - Real-time board synchronization - all players see all boards - Battle royale mechanic: clearing rows sends garbage to opponents - Classic Tetris gameplay with all 7 tetrominoes - Retro visual styling with CRT scanlines and pixel font - Automatic level progression and speed increase - Player elimination and winner announcement Files: - server/index.js: Node.js + Socket.io game server - public/js/: Frontend game logic, rendering, network, and UI - public/css/style.css: Retro Tetris styling - README.md: Setup and usage instructions - PLAN.md: Implementation plan with all phases completed
2026-03-20 00:34:06 -07:00
commit 5da6033704
13 changed files with 3203 additions and 0 deletions
@@ -0,0 +1,86 @@
+# 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
+
+1. Install dependencies:
+   ```bash
+   cd server
+   npm install
+   ```
+
+2. Start the server:
+   ```bash
+   node index.js
+   ```
+
+3. Open `http://localhost:3000` in 2-8 browser tabs
+
+4. Enter a room name and your name, then join
+
+5. 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
+
+1. **Lobby**: Players join a room and wait
+2. **Ready**: All players click READY to start
+3. **Game**: Play Tetris, clear rows to attack opponents
+4. **Elimination**: Players are eliminated when pieces stack to the top
+5. **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