Tetris · qwen3-8b

Okay, let's tackle this Tetris game. The user wants a single-page web app with all the required features. First, I need to create an index.html file that includes HTML, CSS, and JavaScript all in one. No external resources, so everything must be inline.

Starting with the structure: the HTML needs a canvas element for rendering the game. Then, some divs for displaying the score, level, lines cleared, and the next piece preview. Also, a section for showing controls.

For the CSS, I'll style the canvas, make sure the game area is centered, and add some basic styling for the score and next piece sections. The JavaScript will handle the game logic, including tetrominoes, movement, rotation, collision detection, line clearing, scoring, and game over conditions.

First, define the tetromino shapes. Each piece has a shape and color. Need to include all seven types: I, J, L, O, S, T, Z. They should spawn in the middle of the top row. The initial position for each piece should be calculated so they don't start off-screen.

Next, the game loop. Using requestAnimationFrame for smooth animation. The main loop will handle moving the piece down, checking for collisions, and updating the display.

Movement: Left/Right arrows move the piece, Up rotates it clockwise. Down soft-drops, Space hard-drops. Need to handle rotation with wall kicks, but if not supported, just reject the rotation if it overlaps.

Collision detection is crucial. When moving or rotating, check if the new position is within the board boundaries and doesn't overlap with existing blocks. If a move is invalid, revert the position.

When a piece lands, add it to the grid. Then check for completed rows. Clearing rows involves checking each row, removing completed ones, and shifting the rows above down. Update the score based on the number of lines cleared and the current level.

Scoring: 100, 300, 500, 800 points for 1-4 lines cleared. Level increases every 10 lines. Gravity speed increases with level.

Game over condition: when a new piece can't spawn. Display "Game Over" and provide Pause/Resume and Restart buttons. Restart should reset the board, score, level, and piece sequence.

Now, structuring the code. The grid will be a 2D array representing the board. The current piece and next piece will be tracked. The game state includes the score, level, lines cleared, and whether the game is paused.

For the next-piece preview, display the next piece in a small grid next to the playing area.

Testing the required behavior: moving and rotating the first piece, hard-dropping, locking, new piece spawning, next preview advancing. Then pausing, resuming, restarting, and checking the board state.

Potential issues to watch for: correct collision detection, proper rotation handling, line clearing, and scoring. Also, ensuring that the game loop runs smoothly without lag.

Now, putting all together into the index.html. Inline CSS in a <style> tag, JavaScript in a <script> tag. Make sure all functions are properly defined and the game loop is set up.

Wait, need to handle the piece spawning. When a new piece is created, check if it can spawn. If not, game over. Also, when the current piece lands, generate the next piece.

For the controls, add a div that lists the keybindings. Maybe use a simple text block with instructions.

Testing the game: after writing the code, run it in the browser. Check if the first piece moves, rotates, drops, locks, and a new piece appears. Then pause, resume, restart, and verify the states.

I think that covers the main parts. Now, code the HTML, CSS, and JS accordingly.

Okay, let's see. The user asked to build a Tetris game with specific requirements. I generated the index.html file with all the necessary code. Now, I need to verify if the required behaviors are met.

First, I'll check if the game can be played. The controls are listed in the HTML, so Left/Right for movement, Up for rotation, Down for soft drop, Space for hard drop. The Pause and Restart buttons are there too.

Testing the initial steps: moving and rotating the first piece. When the game starts, a piece should spawn in the middle. Moving left/right should shift it, rotating with Up. Then hard-dropping with Space should lock it into place. After locking, a new piece should spawn, and the next-piece preview should update. 

I'll need to simulate these actions. Let's start by checking if the first piece spawns correctly. The createPiece function uses random shapes, so maybe the first piece is an 'I' shape. The spawn position is calculated to be in the middle, so x should be around 3 or 4 (since GAME_WIDTH is 10, middle is 5, but the shape's width might adjust that).

Next, moving the piece. When the user presses Left or Right, the movePiece function checks if the new position is valid. If valid, it moves; otherwise, it stays. Rotating with Up should call rotatePiece, which checks if the rotated shape is valid. If not, it shouldn't rotate.

Hard-dropping with Space should move the piece down as far as possible, then merge it into the grid. After merging, clearLines is called to check for completed rows. Then a new piece spawns. If the new piece can't spawn (e.g., the board is full), Game Over should show.

Testing the pause and resume: pressing 'P' toggles gamePaused. When paused, the gameLoop stops. Resuming should restart the loop.

Restarting with 'R' should reset the board, score, level, and pieces. The next-piece preview should update accordingly.

Potential issues: collision detection might have bugs, especially with rotation. Also, line clearing needs to correctly shift rows. The scoring system should multiply by the current level. Level increases every 10 lines, which affects dropInterval.

I should also check if the canvas is properly sized (10x20 grid, each block 20x20 pixels). The next-piece preview is a 4x4 grid, which matches the shapes.

Now, I'll run the browser to inspect the initial output. Check if the canvas is visible, controls are displayed, and the first piece appears. Move and rotate, then hard-drop. Verify the piece locks, new piece spawns, and next preview updates. Pause, resume, restart, and ensure the board resets.

If any issues are found, like the piece not locking or incorrect scoring, I'll need to debug the code. For example, if the rotation isn't working, check the isValidPosition function for rotation. If lines aren't clearing properly, verify the clearLines function's logic.

Overall, the code seems to cover the requirements. Now, I'll proceed to test it in the browser and make any necessary adjustments.