detailed.en.md (3506B)
1 Build a fully playable Tetris game that runs in a web browser. The game should be implemented as a single-page application with no external runtime dependencies (no CDN links, no package imports at runtime). All code should work by opening an HTML file directly in a browser or serving it from a simple static file server. 2 3 ## Game Board 4 5 - The playing field is a grid of 10 columns by 20 rows. 6 - The grid should be visually distinct with cell borders or a background pattern so the player can gauge positions. 7 - Occupied cells should be colored according to their piece type. 8 9 ## Pieces (Tetrominoes) 10 11 Implement all 7 standard Tetris pieces: 12 13 - **I** (4 in a row, cyan) 14 - **O** (2x2 square, yellow) 15 - **T** (T-shape, purple) 16 - **S** (S-skew, green) 17 - **Z** (Z-skew, red) 18 - **J** (J-shape, blue) 19 - **L** (L-shape, orange) 20 21 Each piece should spawn at the top center of the board. Use a random bag system or simple random selection for piece order. 22 23 ## Controls 24 25 - **Left arrow**: move piece left 26 - **Right arrow**: move piece right 27 - **Down arrow**: soft drop (move piece down faster) 28 - **Up arrow**: rotate piece clockwise 29 - **Z key**: rotate piece counter-clockwise 30 - **Space bar**: hard drop (instantly drop piece to the lowest valid position) 31 32 ## Rotation 33 34 - Pieces rotate clockwise (up arrow) and counter-clockwise (Z key). 35 - The O piece does not rotate. 36 - Rotation should fail gracefully: if the rotated position would overlap with existing blocks or the walls, the rotation should not occur. A basic wall-kick system (trying one or two offset positions) is acceptable but not required. 37 38 ## Line Clearing 39 40 - When an entire row is filled with blocks, that row is cleared and all rows above it shift down. 41 - Multiple rows can be cleared simultaneously. 42 43 ## Scoring 44 45 Points are awarded based on the number of lines cleared at once, multiplied by the current level: 46 47 | Lines Cleared | Base Points | 48 |---|---| 49 | 1 (Single) | 100 | 50 | 2 (Double) | 300 | 51 | 3 (Triple) | 500 | 52 | 4 (Tetris) | 800 | 53 54 The formula is: `score += base_points * level` 55 56 ## Levels and Speed 57 58 - The game starts at level 1. 59 - The level increases by 1 for every 10 lines cleared. 60 - The drop speed (how often the current piece automatically moves down one row) should increase with each level. A reasonable starting interval is around 800ms at level 1, decreasing as the level increases. The piece should never stop dropping entirely. 61 62 ## Display 63 64 The game screen must show: 65 66 - The playing field with the current piece and all placed blocks. 67 - **Score**: the current score, updated in real time. 68 - **Level**: the current level. 69 - **Lines**: the total number of lines cleared. 70 - **Next piece**: a preview of the next piece that will appear. 71 72 ## Game Over 73 74 - The game ends when a new piece cannot be placed at its spawn position because existing blocks are in the way. 75 - When the game ends, display a "Game Over" message along with the final score. 76 - Provide a way to restart the game (a button or pressing a key). 77 78 ## Visual Quality 79 80 - The game should look clean and polished, not like a raw prototype. 81 - Use a reasonable color palette for the pieces (the colors listed above or similar). 82 - Center the game on the page with a neutral background. 83 - The game area and side panels (score, next piece) should be clearly laid out. 84 85 ## Technical Constraints 86 87 - No build step required. The game should run by opening an HTML file in a modern browser. 88 - No external libraries or frameworks at runtime. 89 - The code should be organized and readable.