Using the pre-provided phaser.min.js (global Phaser), build a playable brick-breaker game with a paddle (arrow keys or mouse), a bouncing ball, and a wall of breakable bricks with a score. Use ONLY procedurally generated graphics via the Phaser Graphics API or generated textures — no external image or audio assets whatsoever.

We need to build single-page web app, write ALL into one self-contained file named index.html in current directory: CSS in <style>, JS in <script>, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present. These library file(s) are ALREADY present in current directory — load each with plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top of it: phaser.min.js.

Current working directory /tmp/ws. Check if phaser.min.js exists.

Good. Need to write index.html with Phaser loaded via <script src="phaser.min.js"></script>. Then build game.

Requirements: paddle arrow keys or mouse, bouncing ball, wall of breakable bricks with score. Procedurally generated graphics via Phaser Graphics API or generated textures — no external image/audio.

Build single file.

We need to ensure Phaser game starts. Use Phaser 3. Likely.

We need paddle controlled by arrow left/right or mouse. Ball bouncing. Bricks wall.

Score display.

Implement using Phaser Arcade Physics.

Graphics: use Phaser.GameObjects.Rectangle, Graphics, or create texture with graphics.

No external assets. Use Graphics to draw paddle, ball, bricks.

Simplify: create paddle as rectangle GameObject with Arcade physics static? Dynamic? Use physics body for paddle kinematic.

Alternative: use arcade physics, paddle static, ball dynamic with bounce.

Bricks: static group.

Score UI via DOM or Phaser Text.

Proceed to write index.html.

Make sure to use <style> for full screen.

Create file.

Edge cases: Phaser may be global.

Let's write content.

We'll create Phaser config:
type: Phaser.AUTO
width: 800
height: 600
backgroundColor: '#000011'
physics: arcade { gravity:0, debug:false }
scene: main.

In create: create paddle at bottom, ball at center, bricks grid.

Controls: cursors left/right, pointer move.

Make paddle follow mouse x if pointer down? Use pointermove.

Ball launch on click/space.

Score: text.

Bricks: generate rows * cols, each brick with health? Simple break on hit.

Make ball bounce off world bounds: set world bounds bounce.

Paddle collisions: set paddle immovable.

Brick collisions: on collide, destroy brick, increase score, play simple particle effect via graphics.

Procedurally generated graphics: bricks can be rectangles with color varying per row. Use graphics to create texture? Simpler: use rectangle GameObject and set fill style via setFillStyle.

Phaser Arcade physics uses bodies. Rectangle created via this.add.rectangle.

Alternatively use Graphics to draw.

Let's implement.

Implementation details:

Scene extends Phaser.Scene.

preload none.

create:
score=0
scoreText = this.add.text(16,16,'Score:0', {fontSize:'24px', fill:'#fff'})

paddle = this.physics.add.sprite(400,550, null).setDisplaySize(120,20)
But sprite needs texture. Better use rectangle game object with physics body? Could use this.add.rectangle with physics? Use this.physics.add.image with generated texture.

Simpler: create texture via graphics.

Create graphics, draw rect, generate texture.

Let's do:
var gfx = this.make.graphics({x:0,y:0, add:false});
gfx.fillStyle(0x00ff00,1);
gfx.fillRect(0,0,120,20);
gfx.generateTexture('paddle',120,20);

Similarly ball texture: circle.

Brick texture: per color.

Simpler to use graphics objects directly without physics texture? Arcade physics needs sprites.

Alternative: use this.add.rectangle for paddle and set physics body via this.physics.add.existing(paddle). That's okay. Rectangle is a GameObject, can have physics body.

Check Phaser: this.add.rectangle(x,y,w,h, color) returns Rectangle GameObject. Then physics.add.existing enables body.

Let's use that.

paddle = this.add.rectangle(400,550,120,20,0x00ff88);
this.physics.add.existing(paddle, true); // static

ball = this.add.circle(400,500,10,0xffffff); Wait add.circle? Phaser 3.60 has add.circle? Actually add.circle is GameObject? Might be add.circle via Graphics. Easier to use ellipse.

Alternative: use physics.add.image with generated texture.

Let's go with generateTexture approach for simplicity and compatibility.

Simpler: use this.add.rectangle with physics.

Test mental: this.physics.add.existing(paddle, true) makes body static.

Ball: this.add.circle(400, 300, 10, 0xffffff) returns a Circle shape? Actually add.circle is from Graphics? In Phaser 3, GameObject has add.circle? I think Phaser.GameObjects.Graphics has fillCircle. Hmm.

Alternative: create texture for ball with graphics draw circle, then sprite.

Let's do generate textures for paddle, ball, brick.

Create paddle texture:
var paddleGfx = this.make.graphics({x:0,y:0,add:false});
paddleGfx.fillStyle(0x00ff88,1);
paddleGfx.fillRoundedRect(0,0,120,20,10);
paddleGfx.generateTexture('paddle',120,20);

Sprite: paddle = this.physics.add.sprite(400,550,'paddle'); paddle.setImmovable(true); paddle.body.allowGravity = false;

Ball texture:
var ballGfx = this.make.graphics({x:0,y:0,add:false});
ballGfx.fillStyle(0xffffff,1);
ballGfx.fillCircle(10,10,10);
ballGfx.generateTexture('ball',20,20);

ball = this.physics.add.sprite(400,500,'ball');
ball.setCollideWorldBounds(true);
ball.setBounce(1);
ball.setVelocity(200, -200);

Bricks:
rows=5 cols=10
brickW=70 brickH=30 padding 10
Start x offset.

For each row i, col j:
x = 80 + j*(brickW+10)
y = 80 + i*(brickH+10)
color vary.

Create brick texture per color? Can generate per brick with graphics.

Simpler: generate one texture per color, reuse.

Create brick group.

this.physics.add.collider(ball, paddle);
this.physics.add.collider(ball, bricks);

brick hit: callback destroy.

Add score increase.

Mouse control: pointer move sets paddle x within bounds.

Keyboard cursors left/right set velocity? Or set x directly.

We can update paddle x in update:
if cursors left -> paddle.x -= speed
if right -> ...

And mouse: if pointer is down? Simpler always follow pointer x.

Combine.

Add launch: ball initially stationary, wait for key space or click to launch.

Implement ballLaunched flag.

When ball is stuck to paddle? Could start attached.

Simpler: start ball at paddle, on pointer down launch.

Implement.

UI for lives? Maybe just score.

Add game over when ball falls below bottom.

Restart on R.

Procedural graphics ok.

Need CSS full screen.

Write index.html.

Ensure script src="phaser.min.js" before our script.

Let's write file.

We wrote file. Should ensure it's correct. Might have errors: showMessage uses this context? In update we call showMessage('You Win!...') but showMessage expects this context from scene. We defined showMessage as function not bound. Might need to use scene. Alternative call with scene.

Simpler: we called showMessage inside update which uses global function with this undefined? Actually showMessage defined as function showMessage(msg){ const txt = this.add.text... } This will use whatever this is at call time. In update, this is scene, but we called showMessage directly not as method. Might be wrong.

Also restart: we call restart() from keyboard event, which uses scene? restart defined as function restart(){ game.scene.restart(); } fine.

We also used hitBrick and particles etc.

Better test quickly? Can't run Phaser in headless. Assume works.

Potential issues: bricks.killAndHide expects physics group. Could be fine.

brick.fillColor not defined.

Particles: using p.setData etc. Might be okay.

World bounds event: this.physics.world.on('worldbounds', ...) body.gameObject === ball check.

Maybe ball blocked down triggers lose life immediately when ball hits bottom. Might be okay.

Potential improvement: ensure paddle x clamp works.

Mouse control: targetX set if pointer.isDown, but pointer.isDown is true while dragging. Might be okay.

Keyboard launch on space.

Edge: ball body onWorldBounds true? We set ball.setCollideWorldBounds(true). That's enough.

Possible error: showMessage called with scene context lost. We can change to create text via scene reference. Let's quickly edit file to fix showMessage and win condition.

Let's read file to see current content.

We need to fix showMessage usage. In update, showMessage called without scene context, this will be undefined. Also in loseLife, showMessage called with scene context? loseLife receives scene as argument, but showMessage uses this.

Simplify: change showMessage to accept scene as first param.

Let's edit file.

We need to modify update function to call showMessage with scene, and loseLife similarly.

Better edit file with edit tool.

We have two calls: in update win condition, and in loseLife.

Simplify: create helper showMessage(scene, msg). Let's edit.

Find function showMessage(msg) definition.

Replace with showMessage(scene, msg).

And calls.

Let's do edit.

Also need launchBall context? launchBall uses Phaser.Math.Between, ball global, ok. Called via keyboard with this bound to scene, but function uses global ball, okay.

Potential issue: in update, this.input.manager.activePointer.leftButtonDown() - might work.

Another issue: pointer.isDown check uses pointer from create, but pointer may change? ok.

Potential issue: showMessage defined after use? Defined later but function hoisted, okay.

Also particles using brickObj.fillColor undefined, but fallback.

Potentially bricks.killAndHide(brickObj) then disableBody again duplicate.

Also bricks.countActive(true) counts active bodies? Might work.

Might need to reset lives and score on restart. Game.scene.restart() will recreate scene, variables reset? score, lives are globals, not reset. Might cause issues. Could reset in create. In create, we set score=0? No. We have global score variable initialized 0 at top, but not reset on restart. So restart will keep previous score. Could be okay but maybe reset.

Better to reset score and lives at start of create. Let's edit create to reset.

Add at start of create:
score =0;
lives=3;
ballLaunched=false;
gameOver=false;

Let's edit.

Also scoreText set to Score:0 later, but okay.

Now ensure index.html present.

Done.

Provide answer summary.