Tetris · gemma-4-26b-a4b-it

The objective is to build a single-page Tetris game in `index.html` using HTML, CSS, and JS.
    - 10 columns, 20 rows.
    - Seven tetrominoes.
    - Controls: Left/Right (move), Up (rotate), Down (soft-drop), Space (hard-drop).
    - Rules: Collision detection, row clearing, score/level/lines/next-piece preview, game over.
    - Scoring: 100, 300, 500, 800 * level.
    - Leveling: Increase gravity every 10 lines.
    - Features: Pause/Resume, Restart.
    - Optional: Ghost piece, Hold piece.

    - `<canvas>` for the game board.
    - `<canvas>` for the next piece preview.
    - UI elements: Score, Lines, Level, Controls info.
    - Buttons: Pause, Resume, Restart.
    - CSS for layout and styling.

    - Tetromino shapes (I, J, L, O, S, T, Z).
    - Game state (board, current piece, next piece, score, lines, level, game over, paused).
    - Game loop (requestAnimationFrame).
    - Gravity (tick-based).
    - Collision detection.
    - Row clearing.
    - Rendering logic.

    - `index.html` with everything inlined.

    - Implement the logic.
    - Verify requirements.

    - 1. Move/rotate first piece.
    - 2. Hard-drop it.
    - 3. Check locking and new piece spawning.
    - 4. Check next-piece preview.
    - 5. Pause/Resume.
    - 6. Restart and check state reset.

Let's start writing the code.

The user wants a playable Tetris game in a single `index.html` file.
The game must include:
- 10x20 board (canvas).
- All seven tetrominoes.
- Controls: Left/Right (move), Up (rotate), Down (soft-drop), Space (hard-drop).
- Collision detection (reject invalid moves/rotations).
- Row clearing, line count, score, level, and next-piece preview.
- Scoring: 100, 300, 500, 800 * level.
- Leveling: Increase gravity every 10 lines.
- Game Over state.
- Pause/Resume and Restart functionality.
- No external dependencies.

Plan:
1.  Write the `index.html` file containing HTML, CSS, and JS.
2.  Implement the Tetris logic:
    - Constants (tetrominoes, colors, board size).
    - Game state (board, current piece, next piece, score, level, lines, game over, paused).
    - Game loop (requestAnimationFrame).
    - Input handling (keydown).
    - Collision detection.
    - Piece movement and rotation.
    - Row clearing and scoring.
    - Rendering (canvas for board and next piece).
3.  Verify the implementation using the `browser` tool.

Let's start by writing the `index.html`.

The user wants a playable Tetris game in a single `index.html` file.
The game should be built using HTML5 Canvas, CSS, and Vanilla JavaScript.
No external assets/CDNs are allowed.

Key features:
- 10x20 board.
- All 7 tetrominoes (I, J, L, O, S, T, Z).
- Controls: Left/Right (move), Up (rotate), Down (soft-drop), Space (hard-drop).
- Collision detection (reject invalid moves/rotations).
- Line clearing (1, 2, 3, 4 lines), row movement, score/lines/level display.
- Score: 100, 300, 500, 800 * level.
- Level increase every 10 lines cleared.
- Gravity increases with level.
- Next piece preview.
- Pause/Resume/Restart.
- Game Over state.
- Optional: Hold and Ghost pieces (I'll try to include them if possible, but prioritizing the core requirements).

Plan:
1.  Create the `index.html` file with the structure.
2.  Implement the game logic in JavaScript:
    - Constants (Tetromino shapes, colors).
    - Game state (grid, current piece, next piece, score, level, lines, etc.).
    - Piece movement and rotation logic.
    - Collision detection.
    - Line clearing logic.
    - Game loop (requestAnimationFrame).
    - UI updates (score, next piece, level, lines).
    - Event listeners (keyboard).
3.  Styling with CSS.
4.  Verify with the browser tool.

Let's start by writing the `index.html`.

Tetrominoes:
- I: `[[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]]`
- J: `[[0, 1, 0], [1, 1, 1], [0, 0, 0]]` (or similar)
- L: `[[0, 1, 0], [0, 1, 1], [0, 1, 0]]` (or similar)
- O: `[[1, 1], [1, 1]]`
- S: `[[0, 1, 1], [1, 1, 0], [0, 0, 0]]`
- T: `[[0, 1, 0], [1, 1, 1], [0, 0, 0]]`
- Z: `[[1, 1, 0], [0, 1, 1], [0, 0, 0]]`

Wait, I'll use standard 4x4 or 3x3 matrices for these.

Let's refine the scoring:
1 line: 100 * level
2 lines: 300 * level
3 lines: 500 * level
4 lines: 800 * level

Level increases every 10 lines.

I will implement the game.

The code is written. Now I need to verify the implementation.
The requirements:
- 10x20 board.
- 7 tetrominoes with legal spawn positions.
- Controls: Left/Right, Up (rotate), Down (soft-drop), Space (hard-drop).
- Collision rejection.
- Line clearing, score (100, 300, 500, 800), level (every 10 lines), gravity speed.
- Pause/Resume/Restart.
- Next piece preview.
- Game Over.

I'll use the `browser` tool to verify the functionality.
I need to check:
1.  Move and rotate the first piece.
2.  Hard-drop it.
3.  Check if it locks, new piece spawns, and next piece updates.
4.  Pause/Resume.
5.  Restart.

Wait, I noticed I didn't implement the `Space` key for hard-drop correctly in the code (it's `''` instead of `' '` or `' '`). I'll fix that first. Also, I should make sure the `rotateMatrix` logic is correct.

Let's check the `playerRotate` implementation.
```javascript
        function rotateMatrix(matrix, dir) {
            const size = matrix.length;
            const result = Array.from({ length: size }, () => Array(size).fill(0));
            for (let r = 0; r < size; r++) {
                for (let c = 0; c < size; c++) {
                    if (dir > 0) {
                        result[c][size - 1 - r] = matrix[r][c];
                    } else {
                        result[size - 1 - c][r] = matrix[r][c];
                    }
                }
            }
            return result;
        }
```
This looks correct for clockwise (dir > 0) and counter-clockwise (dir < 0).

Wait, I also need to check the `Space` key for hard-drop.
```javascript
            } else if (event.key === '') {
                playerHardDrop();
            }
```
This is definitely wrong. It should be `event.code === 'Space'` or `event.key === '''`.

Let's fix `index.html`.