jozamudi
aeacf9e68f
- Add IMPROVEMENTS.md with detailed analysis of performance issues and bugs - Update CLAUDE.md with negative Y overflow explanation - Update README.md with socket events documentation - Enhance game-logic.js with improved comments and validation - Improve server/index.js with better documentation and edge case handling
117 lines
3.3 KiB
Markdown
117 lines
3.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
|
|
|
|
### Garbage & Elimination
|
|
|
|
When you receive garbage, your current piece is pushed upward. Pieces can temporarily exist **above the visible board** (negative Y) — you're not eliminated yet! The piece will drop back down naturally.
|
|
|
|
**You're only eliminated when:**
|
|
- A piece locks (is placed) with blocks in the top 2 rows (rows 0-1)
|
|
- This happens if too much garbage accumulates and you can't clear rows fast enough
|
|
|
|
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
|
|
|
|
## Testing
|
|
|
|
Run the test suite:
|
|
```bash
|
|
cd server && npm test
|
|
```
|
|
|
|
Run with coverage:
|
|
```bash
|
|
cd server && npm run test:coverage
|
|
```
|
|
|
|
The test suite includes 57 tests covering:
|
|
- Unit tests for pure game logic functions
|
|
- Integration tests for garbage system
|
|
- Socket.io integration tests for multiplayer flow
|
|
|
|
## 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
|
|
│ ├── game-logic.js # Pure game logic functions (testable)
|
|
│ ├── __tests__/ # Jest test suite
|
|
│ │ ├── game-logic.test.js
|
|
│ │ ├── garbage-system.test.js
|
|
│ │ └── socket-integration.test.js
|
|
│ └── 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
|