Brick breaker · gemma-4-26b-a4b-it

The user wants a playable brick-breaker game built with Phaser.
The requirements are:
- Single-file `index.html` containing HTML, CSS, and JS.
- No external assets/CDNs. Use `phaser.min.js` provided in the directory.
- Features: Paddle, ball, bricks, score, lives.
- Controls: Left/Right or Mouse for paddle, Space to launch.
- Physics: Ball bounces off walls/paddle/bricks.
- Brick removal on hit.
- Win/Loss states.
- Restart functionality.
- Graphics: Use Phaser Graphics (no external images).

Plan:
1. Check if `phaser.min.js` exists in the current directory.
2. Create `index.html` with the game logic using Phaser.
3. Implement the game logic:
    - Setup Phaser config.
    - Create scenes (e.g., `BootScene`, `GameScene`).
    - Implement paddle, ball, and bricks using Phaser graphics.
    - Implement physics (Arcade Physics).
    - Implement input (keyboard and mouse).
    - Implement score and lives.
    - Implement win/loss conditions.
4. Verify using `browser` tool.

Let's start by checking for `phaser.min.js`.

Okay, `phaser.min.js` is present. Now I will write the `index.html` file.

I'll use `Phaser.Scene` for the game logic.
Game components:
- `BootScene`: Preload (not strictly necessary since no external assets, but good practice for Phaser).
- `GameScene`: The main game.
    - `preload`: Create textures using `graphics`.
    - `create`: Create paddle, ball, bricks, score, lives.
    - `update`: Move paddle with mouse/keyboard.
    - `ball`: Physics.

I'll use `arcade physics` for the ball and paddle.
I will use `graphics` to create textures for the paddle, ball, and bricks.

Structure of `index.html`:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brick Breaker</title>
    <style>
        body { margin: 0; padding: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="phaser.min.js"></script>
    <script>
        // Game Logic
    </script>
</body>
</html>
```

Game Logic details:
- Paddle: A rectangle.
- Ball: A circle.
- Bricks: A grid of rectangles.
- Physics: `this.physics.add.existing(obj)`.
- Collision: `this.physics.add.collider(ball, paddle,...)` and `this.physics.add.collider(ball, bricks,...)` or `overlap`. For bricks, `collider` is better if we use static physics for bricks.

Wait, for bricks, I'll use `this.physics.add.staticGroup()` for bricks.
And for the ball, `this.physics.add.sprite` or `this.physics.add.existing(container)`.

Let's implement the game logic in `index.html`.
I'll design it to be self-contained.

```javascript
class BootScene extends Phaser.Scene {
    constructor() {
        super('BootScene');
    }
    create() {
        this.scene.start('GameScene');
    }
}

class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
    }

    init() {
        this.score = 0;
        this.lives = 3;
        this.ballLaunched = false;
    }

    preload() {
        // Generate textures
        let graphics = this.add.graphics();

        // Paddle texture
        graphics.fillStyle(0xffffff);
        graphics.fillRect(0, 0, 100, 20);
        graphics.generateTexture('paddle', 100, 20);
        graphics.clear();

        // Ball texture
        graphics.fillStyle(0xffffff);
        graphics.fillCircle(10, 10, 10);
        graphics.generateTexture('ball', 20, 20);
        graphics.clear();

        // Brick texture
        graphics.fillStyle(0xffffff);
        graphics.fillRect(0, 0, 60, 20);
        graphics.generateTexture('brick', 60, 20);
    }

    create() {
        // Physics setup
        this.physics.world.setBounds(0, 0, 800, 600);

        // Score and Lives Text
        this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#fff' });
        this.livesText = this.add.text(650, 16, 'Lives: 3', { fontSize: '32px', fill: '#fff' });

        // Paddle
        this.paddle = this.add.sprite(400, 570, 'paddle').setImmovable();
        this.physics.add.existing(this.paddle, true);
        this.paddle.setCollideWorldBounds(true);

        // Ball
        this.ball = this.add.sprite(400, 550, 'ball');
        this.physics.add.existing(this.ball);
        this.ball.setCollideWorldBounds(true);
        this.ball.setBounce(1, 1);

        // Bricks
        this.bricks = this.physics.add.staticGroup();
        const brickRows = 5;
        const brickCols = 8;
        const brickWidth = 60;
        const brickHeight = 20;
        const padding = 10;
        const offsetTop = 100;
        const offsetLeft = 50;

        for (let i = 0; i < brickRows; i++) {
            for (let j = 0; j < brickCols; j++) {
                const x = offsetLeft + j * (brickWidth + padding);
                const y = offsetTop + i * (brickHeight + padding);
                this.bricks.create(x, y, 'brick');
            }
        }

        // Colliders
        this.physics.add.collider(this.ball, this.paddle, this.hitPaddle, null, this);
        this.physics.add.collider(this.ball, this.bricks, this.hitBrick, null, this);

        // Controls
        this.cursors = this.input.keyboard.createCursorKeys();
        this.spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
        this.input.on('pointermove', (pointer) => {
            this.paddle.x = pointer.x;
        });

        // Instructions
        this.add.text(20, 570, 'Arrows/Mouse to move | Space to launch', { fontSize: '16px', fill: '#fff' });
    }

    update() {
        // Paddle movement
        if (this.cursors.left.isDown) {
            this.paddle.x -= 7;
        } else if (this.cursors.right.isDown) {
            this.paddle.x += 7;
        }

        // Launch ball
        if (this.spaceBar.isDown &&!this.ballLaunched) {
            this.launchBall();
        }

        // Check if ball fell below
        if (this.ball.y > 580 && this.ballLaunched) {
            this.loseLife();
        }
    }

    launchBall() {
        this.ballLaunched = true;
        this.ball.setVelocity(200, -300);
    }

    hitPaddle(ball, paddle) {
        // Adjust velocity based on where the ball hits the paddle
        let diff = ball.x - paddle.x;
        ball.setVelocityX(diff * 5);
    }

    hitBrick(ball, brick) {
        brick.destroy();
        this.score += 10;
        this.scoreText.setText('Score: ''+ this.score);

        if (this.bricks.countActive() === 0) {
            this.win();
        }
    }

    loseLife() {
        this.lives--;
        this.livesText.setText('Lives: ''+ this.lives);

        if (this.lives === 0) {
            this.gameOver();
        } else {
            this.resetBall();
        }
    }

    resetBall() {
        this.ballLaunched = false;
        this.ball.setPosition(this.paddle.x, this.paddle.y - 20);
        this.ball.setVelocity(0, 0);
    }

    win() {
        this.add.text(300, 250, 'YOU WIN!', { fontSize: '64px', fill: '#0f0' });
        this.add.text(300, 320, 'Click to Restart', { fontSize: '32px', fill: '#fff' }).setInteractive().on('pointerdown', () => this.restartGame());
    }

    gameOver() {
        this.add.text(300, 250, 'GAME OVER', { fontSize: '64px', fill: '#f00' });
        this.add.text(300, 320, 'Click to Restart', { fontSize: '32px', fill: '#fff' }).setInteractive().on('pointerdown', () => this.restartGame());
    }

    restartGame() {
        this.scene.restart();
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 }
        }
    },
    scene: [BootScene, GameScene]
};

const game = new Phaser.Game(config);
```

Wait, I need to make sure the `phaser.min.js` is loaded correctly. It's in the current directory.
I should also add some more visual polish to the bricks and paddle.

Let's refine the code. I'll use `graphics` to create textures.
I need to make sure the paddle doesn't go out of bounds. Phaser's `setCollideWorldBounds(true)` should handle it.

One detail: `this.paddle.x = pointer.x;` in `update` might be too simplistic if I want to support keyboard.
Actually, I implemented both.

Let's refine the `hitBrick` logic. If I use `this.physics.add.collider(this.ball, this.bricks,...)`, the ball might bounce off but not necessarily destroy the brick if I don't handle it.
Actually, `collider` calls the callback.

Wait, `this.physics.add.collider(this.ball, this.bricks, this.hitBrick, null, this);`
In `hitBrick(ball, brick)`, I am destroying the brick.

One issue: `this.ball.setVelocity(200, -300);` might be too fast or slow.
And the paddle movement:
```javascript
        if (this.cursors.left.isDown) {
            this.paddle.x -= 7;
        } else if (this.cursors.right.isDown) {
            this.paddle.x += 7;
        }
```
This is fine.

I'll use `write` to create the `index.html`.

Let's refine the `hitPaddle` velocity logic.
```javascript
    hitPaddle(ball, paddle) {
        let diff = ball.x - paddle.x;
        ball.setVelocityX(diff * 5);
    }
```
This is a classic brick breaker technique.

I'll also make the bricks colorful.
```javascript
        // Brick texture
        graphics.fillStyle(0xff0000);
        graphics.fillRect(0, 0, 60, 20);
        graphics.generateTexture('brick', 60, 20);
```
Actually, I can create multiple brick textures with different colors.

Let's write the complete `index.html`.

The code is written. Now I will verify it using the `browser` tool.
I'll check:
1. Ball launches on Space.
2. Paddle moves with mouse/keys.
3. Ball bounces off paddle/walls/bricks.
4. Bricks disappear.
5. Score increases.
6. Lives decrease on ball fall.
7. Win/Lose states.

Since I can't easily press "Space" via `browser` action without a keyboard simulation (which is limited), I will try to use `pointermove` and `pointerdown` to simulate interaction if possible, or just observe the initial state.
Actually, the browser tool has `action: 'click'`, `action: 'pointermove'`, etc.
I can try to simulate mouse movement to control the paddle.
And I'll check the initial state.