Tetris
“Act as an expert frontend developer and game designer. Please create a fully functional, classic Tetris game contained in a single self-contained HTML file (combining HTML, CSS, and modern JavaScript). ### Requirements: 1. **Visual Design & Layout:** - Modern, clean, and retro-arcade aesthetic (dark theme preferred). - A centered game board using HTML5 Canvas with a standard 10x20 grid. - A modern sidebar displaying: - Next piece preview - Current Score - Cleared Lines - Current Level - Clear "Start / Pause / Restart" buttons and a "Game Over" overlay. 2. **Core Game Mechanics:** - **7 Standard Tetrominoes (I, J, L, O, S, T, Z):** Each with its official standard color. - **Random Piece Generator:** Implement the standard "7-bag" randomizer to prevent long droughts. - **Movement & Controls:** - Left/Right Arrows (or A/D): Move horizontally. - Down Arrow (or S): Soft drop. - Up Arrow (or W): Rotate piece clockwise. - Spacebar: Hard drop (instantly drop and lock). - P / Esc: Pause/Resume game. - **Collision Detection & Wall Kicks:** Pieces must not clip through walls or locked blocks. Implement basic wall kicks so rotation near boundaries feels smooth. - **Line Clears & Scoring:** - Clear completed rows, animate or flash cleared lines briefly, and drop blocks above. - Award points based on single, double, triple, or "Tetris" (4 lines) clears. - **Progression:** Increase game speed/drop rate as the player's level increases (e.g., every 10 cleared lines). 3. **Code Quality:** - Clean, modular, well-commented JavaScript. - Smooth `requestAnimationFrame` or delta-time based game loop. - Mobile-friendly / responsive layout, or at least optimized for desktop keyboard play with on-screen button support. Please output the complete, copy-paste-ready HTML code without truncating or leaving placeholders.”