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:

   cd server
   npm install
   

2. Start the server:

   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:

cd server && npm test

Run with coverage:

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