Challenges

Create a complete, playable Tetris game as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering: main playfield (10x20 grid) + next piece preview + hold piece display
2. All 7 standard Tetromino pieces: I, O, T, S, Z, J, L with correct colors
3. Controls: Left/Right arrow (move), Up (rotate CW), Down (soft drop), Space (hard drop), C (hold), P (pause)
4. Touch controls: swipe left/right (move), tap (rotate), swipe down (soft drop)
5. SRS (Super Rotation System) wall kicks — all 5 kick states for I-piece, 4 for others
6. 7-bag randomizer (deal all 7 pieces before reshuffling)
7. Ghost piece (translucent shadow showing where piece lands)
8. Lock delay: piece locks 500ms after landing, resets on move/rotate (max 15 resets)
9. Line clear scoring: 1 line=100, 2=300, 3=500, 4=800 (Tetris)
10. Level progression: every 10 lines clear = level up, speed increases
11. Gravity: current piece falls faster each level (start at 1sec, -50ms per level, min 100ms)
12. Start screen with title "TETRIS" and "Press any key to start"
13. Pause screen with overlay + "PAUSED"
14. Game over screen with final score, lines cleared, level reached
15. High score in localStorage
16. Side panel shows: NEXT (3 pieces preview), HOLD, SCORE, LEVEL, LINES

AUDIO:
17. Web Audio API: piece place (thump), line clear (ascending arpeggio), Tetris (special jingle), game over (descending), hold sound

VISUAL:
18. Dark theme with glow effects on pieces
19. Grid lines on playfield (subtle)
20. Line clear animation (flash white, then fade out)
21. Smooth piece movement (no teleporting)
22. Responsive canvas that fits viewport

CODE:
23. Single <script> tag, vanilla JS
24. Game loop with requestAnimationFrame + delta time for gravity
25. Modular: board class, piece class, renderer, input handler