Brick breaker · gemma-4-31b-it

The objective is to build a brick-breaker game using Phaser 3, contained within a single `index.html` file.

    *   Paddle, Ball, Bricks.
    *   Controls: Left/Right keys or mouse.
    *   Launch: Space or a button.
    *   Physics: Bouncing off walls and paddle.
    *   Game State: 3 lives, score tracking.
    *   Win/Loss: All bricks gone (Win), all lives lost (Game Over).
    *   Restart functionality.
    *   Graphics: Phaser Graphics or generated textures (no external assets).
    *   No external resources (only the provided `phaser.min.js`).

    *   Phaser 3 setup.
    *   Game scene configuration (dimensions, physics).
    *   Graphics generation (rectangles for bricks/paddle, circle for ball).
    *   Input handling (Keyboard and Mouse).
    *   Collision handling (ball vs paddle, ball vs walls, ball vs bricks).
    *   Game loop/logic (lives, score, win/loss screens).

    *   Use `Phaser.Game` config.
    *   Use `this.add.rectangle` and `this.add.circle` for shapes (since Phaser 3.60+ supports these as GameObjects with physics bodies easily via `this.physics.add.existing`). Wait, better to use `this.physics.add.sprite` with a generated texture if needed, or just `this.add.rectangle` and `this.physics.add.existing`.
    *   Let's use `this.add.rectangle` and `this.physics.add.existing(rect)` for the paddle and bricks.
    *   Actually, `this.physics.add.image` with a generated canvas texture is often more stable in some Phaser versions, but `this.add.rectangle` is simpler for basic shapes. Let's try the `add.rectangle` approach.

    *   Paddle movement: clamp position within canvas width.
    *   Ball start: `ball.setVelocity(0)`. On launch: `ball.setVelocity(0, -300)`.
    *   Wall bounces: `ball.setCollideWorldBounds(true)`. Top wall bounce is standard. Bottom wall: check if `ball.y > height` -> lose life.
    *   Brick layout: nested loops for rows and columns.
    *   Score: a simple text object.

    *   Phaser physics (Arcade Physics) handles basic bounces well.
    *   I need to make sure the ball doesn't get stuck in the paddle (adjust bounce or use a specific collision logic).

    *   `index.html`
    *   `<script src="phaser.min.js"></script>`
    *   `<style>` for centering and basic UI.
    *   `<script>` for the game logic.

Ah, I forgot to provide the `path` argument in the `write` tool call. I need to specify `path: "index.html"`.

Also, in the code, I noticed I'm using `this.add.rectangle` and `this.add.circle`. In Phaser 3, these are GameObjects, but to make them physics-enabled, I used `this.physics.add.existing`. However, for `staticGroup` like the bricks, `this.bricks.add(brick)` where `brick` is a rectangle should work if I use `physics.add.staticGroup`. Actually, `staticGroup` expects objects to have physics bodies.

Wait, `this.add.rectangle` creates a `Phaser.GameObjects.Rectangle`. To add it to a static group and have it behave as a static body, I should ensure it's treated correctly.

Let's refine the code slightly to be more robust and fix the tool call. I'll also make sure the ball doesn't "sink" into the paddle.

One detail: `this.ball.body.setVelocity(bounceX, -Math.abs(this.ball.body.velocity.y));` in `hitPaddle` might be too simple. Arcade physics handles the bounce, but manual velocity override can help with the "angle" effect.

Let's double check the Phaser 3 API for `add.rectangle`. It's available in 3.60+. Since `phaser.min.js` is provided, it should be a recent version.

I will now rewrite the file with the correct `path` and a few small improvements.

Now I need to verify the game. I'll use the `browser` tool to launch it and test the requirements.

My apologies, I used an incorrect `action` for the browser tool. The available actions are likely `click`, `type`, `scroll`, `hover`, `press`, etc. Actually, the browser tool usually starts by loading `index.html`. If I want to just "run" it and see, I should use `click` or `type` or just a sequence of interactions. Wait, looking at the tool definition: `browser(action: string, ...)` it doesn't explicitly list the actions in the prompt but typically "explore" isn't one. However, for the initial load, I just need to call it.

Wait, the prompt says "Run the application in the browser and inspect the initial output and console." Usually, just calling the browser tool with an action like `click` or something simple will load the page. Let me try `click` on the launch button or just any action.

Actually, I can try to click the "Restart Game" button or just launch the ball. I'll start by clicking the screen to launch the ball.

The user wants to verify a brick-breaker game.

Looking at the screenshot:
1.  The game is rendered.
2.  The paddle is green.
3.  The ball is white.
4.  The bricks are colored by row.
5.  The score and lives are displayed.
6.  Wait, the lives text just says "Lives: ". It doesn't have the number. Let's check the code.

In `create()`:
`this.livesText = this.add.text(700, 16, 'Lives: 3', { fontSize: '24px', fill: '#fff' });`
But in the image, it looks like just "Lives: ". Maybe it's cut off or there's an issue with positioning? The `CONFIG.width` is 800. 700 is quite far right.

Let's look at the screenshot again.
The text "Lives:" is visible, but " 3" might be off-screen or missing.
Wait, the image shows "Lives: " and then it's cut off by the edge of the canvas.

Wait, I see the issue. The `CONFIG.width` is 800, but the canvas might be smaller or the text is too long.
Let's check the `livesText` position. 700 is the x coordinate.
The text is "Lives: 3". If the font size is 24px, it should fit.

However, looking at the screenshot, the "Lives:" part is very close to the right edge.

Another issue: the ball is sitting on the paddle, but the paddle is at the left side. The mouse is at 400, 300 (from the `browser` call), and the paddle should follow the mouse.
Wait, the `browser` call was `click` at 400, 300.
The paddle is at the left edge in the screenshot.
Wait, the screenshot shows the paddle at the left. But my code has:
`this.paddle.x = Phaser.Math.Clamp(this.input.activePointer.x, CONFIG.paddleWidth/2, CONFIG.width - CONFIG.paddleWidth/2);`
If the pointer was at 400, the paddle should be at 400.
But the screenshot shows the paddle at the far left.
Actually, maybe the `activePointer.x` was 0 or something at the time of the screenshot?

Let's try to launch the ball and move the paddle.

I need to verify:
- Launch the ball.
- Move the paddle.
- Inspect bounces.
- Check brick removal and score increase.
- Check paddle bounds.

I'll use `browser` actions to interact.
First, I'll move the mouse to the center and click to launch.
Then I'll move the mouse to the left and right to see if the paddle follows.

Wait, the screenshot shows the paddle at the left.
Maybe the `activePointer` isn't updating correctly or the `click` didn't move it?

Let's try a sequence of actions.
1. Move mouse to 400, 500.
2. Click to launch.
3. Move mouse to 200, 500.
4. Move mouse to 600, 500.

Actually, I can't "move mouse" without clicking or using a specific action.
The `browser` tool has `click`, `type`, etc.
Wait, `browser` tool documentation says:
`click(x, y)`: clicks at (x, y)
`type(text)`: types text
`explore`: ...

I will use `click` to both move the pointer and trigger the launch.

Let's check the "Lives" text again.
`this.livesText = this.add.text(700, 16, 'Lives: 3', { fontSize: '24px', fill: '#fff' });`
Maybe I should align it to the right.

Also, I noticed in the screenshot that the paddle is at the left.
If I click at 400, 300, the pointer should be at 400, 300.
The paddle should then be at 400.
But it's at the left.
Wait, is it possible that `this.input.activePointer.x` is not what I think it is?
In Phaser, `activePointer` is the last pointer that interacted with the game.

Let's try to launch the ball and see.

The user wants to build a brick-breaker game.
I have already written the `index.html` file and tested it with the browser tool.

Observations from the browser results:
1. The ball launches and bounces.
2. Bricks are destroyed, and the score increases (Score: 380 seen in the second image).
3. The ball changes direction on hit.
4. The paddle moves.
5. There is one issue: "Lives:" text is displayed, but no number is next to it in the image (actually, looking closely at the first image, it says "Lives: " but the number might be missing or just not visible). Let me check the code.

Code check:
`this.livesText = this.add.text(700, 16, 'Lives: 3', { fontSize: '24px', fill: '#fff' });`
The initial text is "Lives: 3".
Wait, in the image, it just says "Lives:". Maybe the text is clipped or the number is missing?
Ah, looking at the first image, the text is "Lives:". Let me check the `livesText` position.
`this.livesText = this.add.text(700, 16, 'Lives: 3', { fontSize: '24px', fill: '#fff' });`
The canvas width is 800. 700 + some text might go off screen if the alignment is not right. Phaser text is left-aligned by default. "Lives: 3" is about 8-9 characters. At 24px, it should fit.
But wait, if it's at 700, maybe it's just barely fitting or being cut off?

Also, the "Lives: " text in the second image is definitely just "Lives:".
Let's check the `update` method:
`this.livesText.setText(`Lives: ${this.lives}`);`
This should update it correctly.

Wait, if I look at the second image, the score is 380, which means bricks are being broken.
The ball is moving.

Let's check if the ball falls below the paddle and if lives decrease.
In the second image, the ball is moving right and down.

One detail: I should make sure the Lives text is right-aligned or positioned better so it's clearly visible.

Let's review the requirements:
- Show a paddle, a ball, and a wall of breakable bricks. (Done)
- Move the paddle with Left/Right or the mouse, keeping it inside the playfield. (Done)
- Initially rest the ball on the paddle; Space or a visible Launch control starts it. (Done - click/space)
- Bounce off the paddle and playfield walls. (Done)
- Hitting a brick removes it and increases the score once. (Done)
- Start with three lives. A ball falling below the paddle costs one life and returns to the launch state if lives remain. (Done)
- Clearing all bricks shows a win state; losing all lives shows Game Over. (Done)
- Restart restores all bricks, score, and lives. (Done - via location.reload())
- Show the controls and generate all graphics using Phaser Graphics or generated textures. (Done)
- Do not load image or audio assets. (Done)

One minor thing: the lives text alignment.
I'll move it slightly to the left or set `setTextAlign('right')` and `setX` to the edge.

Also, I noticed that in the images, the ball is moving and bricks are disappearing.
I should probably verify the "Game Over" and "Win" states, but since I've already verified the core mechanics, and the time is limited, I'll just do a quick fix for the lives text and then finish.

Wait, the second image shows "Lives:" without the number.
Let me look at the code again.
`this.livesText = this.add.text(700, 16, 'Lives: 3', { fontSize: '24px', fill: '#fff' });`
If the window is 800px wide, 700px is quite far to the right.
Maybe I should use:
`this.livesText = this.add.text(CONFIG.width - 20, 16, 'Lives: 3', { fontSize: '24px', fill: '#fff', align: 'right' });`
And set the origin to 1.

Let's refine the `index.html` slightly to ensure the UI is perfectly visible and the game feels polished.

Actually, the prompt says "Briefly report what you actually checked and which behaviors remain unverified."
I have verified:
- Launching the ball.
- Moving the paddle.
- Ball bouncing off walls and paddle.
- Bricks being destroyed and score increasing.
- Paddle staying within bounds.

I have NOT explicitly verified:
- Losing all 3 lives.
- Winning by clearing all bricks.
- Restart button functionality (though `location.reload()` is reliable).

I will make one small edit to fix the Lives text and then wrap up.

Now that I've fixed the lives text, I'm confident enough in the implementation.
I'll do one last check of the code to ensure everything is solid.
The `update` loop:
- Keyboard movement: `this.paddle.x -= 7;` - this is frame-dependent, but okay for a simple game.
- Mouse movement: `this.paddle.x = Phaser.Math.Clamp(this.input.activePointer.x, CONFIG.paddleWidth/2, CONFIG.width - CONFIG.paddleWidth/2);` - this overrides keyboard movement if mouse is moving.
Actually, the code is:
```javascript
                // Keyboard movement
                if (this.cursors.left.isDown) {
                    this.paddle.x -= 7;
                } else if (this.cursors.right.isDown) {
                    this.paddle.x += 7;
                }

                // Mouse movement
                this.paddle.x = Phaser.Math.Clamp(this.input.activePointer.x, CONFIG.paddleWidth/2, CONFIG.width - CONFIG.paddleWidth/2);
```
The mouse movement is always active and overrides the keyboard. I should probably only update the paddle position via mouse if the mouse has moved or is being used. However, the prompt says "Move the paddle with Left/Right or the mouse", and usually in these games, mouse control is a seamless alternative. If the user isn't moving the mouse, `activePointer.x` remains constant, effectively locking the paddle to that X position and ignoring keyboard input.

I should fix this so keyboard input works even if the mouse is static.
A better way:
```javascript
                if (this.cursors.left.isDown) {
                    this.paddle.x -= 7;
                } else if (this.cursors.right.isDown) {
                    this.paddle.x += 7;
                } else if (this.input.activePointer.isDown || this.input.activePointer.isMoving()) {
                     this.paddle.x = this.input.activePointer.x;
                }
```
But Phaser's `activePointer` doesn't have `isMoving()`.
The simplest fix is to use the mouse position only if the mouse is moving, or just prioritize the mouse if the pointer is within the game area, but allow keys to override it.

Actually, the most common implementation is to just have the paddle follow the mouse. If they want keys, they can use keys.
To fix the conflict:
```javascript
                if (this.cursors.left.isDown) {
                    this.paddle.x -= 7;
                } else if (this.cursors.right.isDown) {
                    this.paddle.x += 7;
                } else {
                    this.paddle.x = this.input.activePointer.x;
                }
```
This way, if a key is pressed, it moves. If no key is pressed, it follows the mouse.

Wait, if I want it to be really smooth:
```javascript
                if (this.cursors.left.isDown) {
                    this.paddle.x -= 7;
                } else if (this.cursors.right.isDown) {
                    this.paddle.x += 7;
                } else if (this.input.activePointer.isDown) {
                    this.paddle.x = this.input.activePointer.x;
                }
```
But most users expect the paddle to follow the mouse without clicking.
Let's just use a simple "if key is down, use key, else use mouse" logic.

Actually, I'll just leave it as it is or make a very small adjustment. The prompt just asks for the ability to move with either. The current implementation allows mouse movement. Keyboard movement is overridden by the mouse's current position. If the user doesn't move the mouse, the paddle stays put. If they press a key, it moves for one frame, then immediately snaps back to the mouse position. That's bad.

Let's fix the paddle movement.

Final check on the code.
The ball is launched with:
```javascript
                    const speed = 350;
                    const vx = (Math.random() - 0.5) * speed; 
                    this.ball.body.setVelocity(vx, -speed);
```
This is good.
The paddle bounce:
```javascript
            hitPaddle(ball, paddle) {
                const diff = ball.x - paddle.x;
                const maxDiff = CONFIG.paddleWidth / 2;
                const normalizedDiff = diff / maxDiff; 
                
                const bounceVX = normalizedDiff * 400;
                const bounceVY = -Math.abs(ball.body.velocity.y);
                
                ball.body.setVelocity(bounceVX, bounceVY);
            }
```
This is also good.

Everything seems to be in order.