Implement a single‐file HTML + JavaScript Tetris game using modern, clean rendering. The goal is to recreate the classic Tetris gameplay with smooth animations, sound effects, modern UI elements, and a polished user experience — all in one HTML file.
You must use HTML5 canvas for rendering and vanilla JavaScript (no external libraries or frameworks). Use <script> and <style> tags within a single index.html file. Use no external assets.
-
Tetromino Shapes
Implement the 7 standard tetrominoes (I, O, T, S, Z, J, L), each with correct rotation behavior and bounding constraints. -
Game Loop & Physics
- Handle gravity (piece falling), lock delay, and collision detection.
- Implement a rotation system that supports wall kicks (Super Rotation System preferred).
-
Input Controls
- Move left/right with ← →
- Rotate with ↑
- Soft drop with ↓
- Hard drop with spacebar
- Hold piece with
Shift - Reset game with
R - Pause/resume with
P
-
Scoring System
- Classic Tetris scoring:
- Single, Double, Triple, Tetris
- Soft drop bonus
- Hard drop bonus
- Track level and lines cleared
- Increase speed with level
- Classic Tetris scoring:
-
Next Queue & Hold Box
- Show next 3 upcoming pieces in a preview area
- Allow hold-and-swap for one tetromino at a time
-
Line Clearing Animation
- When a line is cleared, animate its disappearance (fade or flash effect)
- Lines above should fall smoothly to fill the gap
-
Canvas Rendering
- Animate piece movements and rotations
- Use grid background with slight color variation
-
UI Layout
- Playfield in center
- Next queue on the right
- Hold box on the left
- Score, level, lines at the top or sides
- Buttons: Pause, Restart
-
Theme
- Use a dark theme with neon-style colors
- Tetromino colors:
- I → Cyan
- O → Yellow
- T → Purple
- S → Green
- Z → Red
- J → Blue
- L → Orange
-
Responsive Design
- Center canvas on screen
- Scale based on window size
- Optional fullscreen toggle with
Fkey
- Ghost piece (shows where the tetromino will land)
- Combo counter and T-spin detection
- High score persistence using
localStorage - Background theme music (low volume loop, toggleable)
- A single
index.htmlfile with all logic, styles, and assets embedded - Clean, commented code with clear function separation
- No dependencies — just HTML, CSS, JS in one file
- Ensure all controls work as expected across modern browsers
Remember: your goal is to implement a complete, beautiful, playable version of Tetris in one shot. Think through every aspect of the game logic, UI, controls, and visuals before coding. Build something fun and polished.