jozamudi
5da6033704
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
87 lines
2.3 KiB
Markdown
87 lines
2.3 KiB
Markdown
# 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
|