The Game
Neon Tetris is a from-scratch implementation of the classic block-stacking puzzle game, wrapped in a neon-glow visual identity. Every tetromino emits a colored glow (cyan for I-pieces, purple for T-pieces, red for Z-pieces), lit against the dark grid backdrop.
Game Engine
The entire game engine lives in a single custom React hook, useTetris. No game framework, no ECS, no physics library. Just React state and requestAnimationFrame:
Core Loop
The game loop uses delta-time accumulation instead of setInterval. A requestAnimationFrame callback tracks elapsed time and triggers piece drops when the accumulator exceeds the current speed threshold. This ensures consistent gameplay regardless of frame rate.
Collision Detection
Piece collision checks run against the full 10×20 grid on every movement. The algorithm iterates through each occupied cell in the piece's shape matrix and checks for:
- Boundary collisions: left/right walls and floor
- Stack collisions: occupied cells in the placed grid
Wall Kicks
When a rotation would cause a collision, the engine attempts horizontal offsets in alternating directions (±1, ±2, etc.) until the piece fits or the maximum offset is exceeded. This allows smooth rotation near walls and stacked pieces.
Visual Design
The neon aesthetic is achieved entirely through Tailwind CSS:
| Piece | Color | Glow |
|---|---|---|
| I | cyan-400 | rgba(34,211,238,0.8) |
| T | purple-500 | rgba(168,85,247,0.8) |
| S | green-500 | rgba(34,197,94,0.8) |
| Z | red-500 | rgba(239,68,68,0.8) |
| O | yellow-400 | rgba(250,204,21,0.8) |
| L | orange-500 | rgba(249,115,22,0.8) |
| J | blue-500 | rgba(59,130,246,0.8) |
The background uses four radial gradient layers (cyan, purple, red, green) positioned at each corner of the viewport, creating a subtle ambient glow that matches the tetromino palette.
New Game+ Mode
For players who find the standard mode too easy, New Game+ starts at 40% faster drop speed and awards 2x score for every line clear. The mode is indicated by a pulsing purple badge above the game board. Score multipliers stack with the standard level-based scaling. Clearing 4 lines (a Tetris) in New Game+ at level 5 earns 800 x 5 x 2 = 8,000 points.
