Tetris
Stack blocks. Clear lines. Don't top out
TETRIS
// FALLING BLOCK ASSEMBLY PROTOCOL
> GRID: 10 × 20 MATRIX
> ← → MOVE / ↑ ROTATE / ↓ SOFT DROP
> [SPACE]: HARD DROP
> CLEAR 4 LINES: TETRIS BONUS
> WARNING: STACK OVERFLOW IS FATAL
PRESS [ENTER] TO INITIATE
- Difficulty
- beginner
- Grid
- 10 × 20
- Engine
- PixiJS
- TypeScript 70%
- Svelte 18%
- CSS 12%
About
Why I built this
Tetris is pure mechanics — no story, no enemies, just you and the falling blocks. I built it because it's the ultimate test of whether your game engine can handle real-time input with precision. Hard drops need to feel instant, rotation needs wall kicks, and the ghost piece has to be pixel-accurate. The sidebar showing the next piece was a late addition that made the game 10x more playable.
Highlights
Tech Stack
Dev Notes
The playfield is 10 columns wide but the renderer draws 12 — the extra 2 columns are the next-piece sidebar, rendered as part of the same grid.
Wall kicks check 5 positions per rotation attempt using the Super Rotation System tables. Without them, pieces near walls feel broken.
Gravity is tick-rate based — higher levels don't make pieces fall faster per frame, they reduce the number of frames between drops.