We need to build a single-page web app using only phaser.min.js (provided globally), generate all graphics procedurally with Phaser.Graphics, no external assets. We need to create index.html that contains CSS in <style>, JS in <script>, inline, using only phaser.min.js via <script src="phaser.min.js"></script>. Also any other library files are present in current directory; it says library file(s) are ALREADY present — load each with plain <script src="NAME"></script>. It says "these library file(s) are ALREADY present in the current directory — load each with a plain <script src="NAME"></script> using its exact filename (never a CDN or URL)". It likely includes phaser.min.js, maybe other libs? But we only need phaser.min.js. So we need to include <script src="phaser.min.js"></script> tag before our script. Then create a game config and scene that draws everything procedurally.

We need to include a paddle controllable via arrow keys or mouse, a ball that bounces, a wall of breakable bricks, and a score. Use only procedural generation: we can use Phaser.Graphics to draw paddle, ball, bricks. Use shapes: rectangles, circle, etc. We'll generate bricks as a nested rectangle pattern perhaps.

We need to ensure all drawings are done via Graphics API in setup or create functions. Use Phaser's Graphics to draw shapes. Use arcade physics? Phaser 3? The provided phaser.min.js is likely Phaser v3 (since it's a single file). We'll assume Phaser 3.

Implementation steps:

- Create HTML skeleton with <style> for canvas maybe full-screen.
- Include <script src="phaser.min.js"></script>.
- Inline script that creates a Phaser.Game with configuration: type: Phaser.AUTO, width: window.innerWidth, height: window.innerHeight, parent: document.body, backgroundColor: '#000', scene: { preload, create, update } or just a single scene.

- In preload we don't need assets.

- In create, generate graphics: draw score text at top using this.add.text? But text is not procedural graphics; but we could use Graphics to render score? However using this.add.text is allowed? It says use ONLY procedurally generated graphics via Phaser Graphics API or generated textures — no external images or audio. Using default text might be considered a texture? It's a built-in text object. That may be okay, but to be safe, we can also draw score with Graphics: draw a rectangle as score background and then draw text? But text requires a font texture; but using built-in Text is probably okay. But the instruction stresses using only procedural graphics via Graphics API; maybe it's okay to use this.add.text because it's part of Phaser but not external asset. Let's maybe avoid using Text altogether, use Graphics to draw the score number by rendering digits using Graphics (like drawing rectangles as digits). Could be complex.

Simplify: use this.add.text for score (since it's not external asset). It's generated at runtime and not external asset; maybe acceptable. It didn't forbid text; just external assets.

- Build bricks: We'll create a group of bricks using Graphics draws. Let's just create a grid of bricks as Graphics objects: In create, loop through rows and columns, draw a brick using this.add.graphics(x, y).fillRect? Actually Graphics has methods: fillRect(x, y, width, height). Yes, we can use graphics.fillRect(x, y, width, height). Use a Graphics instance, then call fillStyle? Actually fillRect draws a filled rectangle.

We'll need to store bricks array to check collisions.

- Paddle: Create a Graphics rectangle at bottom, and handle input.

- Ball: Create a Graphics circle; handle movement and bounce physics manually.

We'll implement simple physics manually.

Pseudo:

let config = {
 type: Phaser.AUTO,
 width: 800,
 height: 600,
 physics: {
   default: 'arcade',
   arcade: {
     gravity: { y: 300 },
     debug: false
   }
 },
 scene: {
   preload: function(){},
   create: function(){
      // Score text
      this.score = 0;
      this.scoreText = this.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#fff'});
      
      // Graphics for paddle
      this.paddle = this.add.graphics();
      this.paddle.fillStyle(0xffffff, 1);
      this.paddle.fillRect(0, 0, 100, 20);
      // position paddle at bottom center
      this.paddle.x = this.cameras.main.width / 2;
      this.paddle.y = this.cameras.main.height - 40;
      // but we need to set origin? We'll manually set position later.
      
      // Actually better: create a separate Graphics and draw rectangle at specific coordinates.
      
      // Instead we can create a Phaser.GameObjects.Rectangle using this.add.rectangle and customize its graphics? But we need procedural. We can just draw with Graphics.

      // Let's use this.paddle = this.add.graphics(); then draw rect at given x,y,width,height.
      
      // Let's set variables:
      this.paddleX = this.cameras.main.width / 2;
      this.paddleHalfWidth = 50; // half width of paddle
      // draw paddle graphics
      this.updatePaddleGraphics();

      // Input
      this.cursors = this.input.keyboard.createCursorKeys();
      // Or use mouse: this.input.on('pointermove', ...)

      // Ball
      this.ball = this.add.graphics();
      this.ball.fillStyle(0xffcc00, 1);
      this.ball.fillCircle(0,0,10);
      // position ball at center above paddle
      this.ball.x = this.paddleX;
      this.ball.y = this.paddleY - 20;
      // velocity
      this.ballVX = 200;
      this.ballVY = -300;
      
      // Bricks
      this.bricks = []; // will store {graphics: ..., hit: false}
      const brickWidth = 60;
      const brickHeight = 20;
      const wallWidth = this.physics.world.bounds.width?; We'll just use this.cameras.main.width.
      const bricksPerRow = Math.floor(this.cameras.main.width / (brickWidth + 10));
      const rows = 4;
      let startX = 10;
      let startY = 60;
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < bricksPerRow; c++) {
          let brickX = startX + c * (brickWidth + 10);
          let brickY = startY + r * (brickHeight + 10);
          let g = this.add.graphics(brickX, brickY);
          g.fillStyle(0x888888, 1);
          g.fillRect(0,0,brickWidth,brickHeight);
          // store its bounds for collision detection
          this.bricks.push({g, x: brickX, y: brickY, w: brickWidth, h: brickHeight, hit:false});
        }
      }

      // physics bounds
      this.physics.world.bounds = new Phaser.Geom.Rectangle(0,0,this.cameras.main.width,this.cameras.main.height);
   },
   update: function(time, delta){
      // move paddle with arrow keys or mouse
      if (this.cursors.left.isDown) {
         this.paddleX -= 200 * delta/16.667;
      } else if (this.cursors.right.isDown) {
         this.paddleX += 200 * delta/16.667;
      }
      // Clamp paddle X within screen minus half paddle width
      this.paddleX = Phaser.Math.Clamp(this.paddleX, this.paddleHalfWidth, this.cameras.main.width - this.paddleHalfWidth);
      // update paddle graphic position and redraw
      this.paddle.clear(); // clear previous
      this.paddle.fillStyle(0xffffff, 1);
      this.paddle.fillRect(this.paddleX - this.paddleHalfWidth, this.paddleY - 10, this.paddleHalfWidth*2, 10);
      // Actually we had paddle drawn earlier? Let's recalc.
      // Let's keep paddleY constant at bottom.
      this.paddleY = this.cameras.main.height - 30;
      this.updatePaddleGraphics();

      // Ball movement
      this.ball.x += this.ballVX;
      this.ball.y += this.ballVY;

      // Collision with walls
      if (this.ball.x <= 0 || this.ball.x >= this.cameras.main.width) {
         this.ballVX *= -1;
      }
      if (this.ball.y <= 0) {
         this.ballVY *= -1;
      }

      // Collision with paddle
      // Simple AABB: ball y greater than paddleY - ball radius and within paddleX +/- paddleHalfWidth
      if (this.ball.y >= this.paddleY - 10 && this.ball.x > this.paddleX - this.paddleHalfWidth && this.ball.x < this.paddleX + this.paddleHalfWidth) {
         // bounce
         this.ballVY *= -1;
         // adjust ball position to avoid sticking
         this.ball.y = this.paddleY - 10;
      }

      // Collision with bricks
      for (let i=0; i<this.bricks.length; i++) {
         let b = this.bricks[i];
         if (b.hit) continue;
         if (this.ball.x > b.x && this.ball.x < b.x + b.w && this.ball.y > b.y && this.ball.y < b.y + b.h) {
            // hit brick
            b.hit = true;
            this.score += 10;
            this.scoreText.setText('Score: ' + this.score);
            // remove brick graphic
            b.g.clear();
            // bounce ball
            // reflect based on side hit? simple random direction
            // Let's just reverse Y and slightly random X
            this.ballVY *= -1;
            // adjust position
            this.ball.y = b.y;
         }
      }

      // Reset ball if falls below screen
      if (this.ball.y > this.cameras.main.height) {
         this.ballVX = 200;
         this.ballVY = -300;
         this.ball.x = this.paddleX;
         this.ball.y = this.paddleY - 10;
      }
   },
   updatePaddleGraphics: function(){
      this.paddle.clear();
      this.paddle.fillStyle(0xffffff, 1);
      this.paddle.fillRect(this.paddleX - this.paddleHalfWidth, this.paddleY, this.paddleHalfWidth*2, 10);
   }
 }
});

But this is messy; we need to produce final index.html that compiles.

Simplify further: Use simple shapes; no need for physics engine; handle collisions manually.

Better approach: Use a single scene that draws everything via Graphics each frame.

Implementation steps for final index.html:

- Include <script src="phaser.min.js"></script>
- Add <style> body {margin:0; overflow:hidden;} </style>
- <script> ... code ...

We'll embed everything in a single script.

We'll need to reference phaser global variable.

Plan: Use Phaser.GameConfig with type: Phaser.AUTO, width: window.innerWidth, height: window.innerHeight, parent: document.body, backgroundColor: '#000'.

In create() we will set up graphics objects for paddle and ball and bricks. We'll store them as properties and redraw each frame.

We'll handle input: Use this.input.keyboard.createCursorKeys() to move paddle left/right.

Ball: have velocity variables, update position each frame, check collisions with walls, paddle, bricks.

Scoring: Use this.add.text for score.

Bricks: generate a grid pattern; each brick will be represented by a Graphics object; store its rectangle bounds.

Simplify the code to ensure it works.

Also need to ensure we redraw paddle and ball each frame; maybe just redraw by clearing and drawing again.

Important: Use only procedural graphics via Graphics API, not images; using Graphics for paddle and ball shapes is fine.

We might not need to use this.physics; manual collisions enough.

Implementation details:

let paddleGraphics; // Phaser.Graphics
let ballGraphics;
let ballVelocityX = 300;
let ballVelocityY = -200;
let ballRadius = 10;
let bricks = []; // store {graphics, x, y, width, height, hit}

In create:

// create score text
this.score = 0;
this.scoreText = this.add.text(20, 20, 'Score: 0', {fontSize: '20px', color: '#fff'});

// Paddle
this.paddle = this.add.graphics();
paddleGraphics = this.paddle;
this.paddleX = this.cameras.main.width / 2;
this.paddleY = this.cameras.main.height - 30;
this.paddleWidth = 100;
this.paddleHeight = 10;
this.updatePaddle(); // draws paddle

// Ball
this.ball = this.add.graphics();
ballGraphics = this.ball;
this.ballRadius = 10;
this.ball.x = this.paddleX;
this.ball.y = this.paddleY - this.ballRadius*2;
this.updateBall(); // draws ball

// Keyboard input
this.cursors = this.input.keyboard.createCursorKeys();

// Bricks
const brickWidth = 70;
const brickHeight = 20;
const padding = 10;
const bricksPerRow = Math.floor(this.cameras.main.width / (brickWidth + padding));
const rows = 4;
const startX = padding;
const startY = padding*2;
for (let r=0; r<rows; r++) {
  for (let c=0; c<bricksPerRow; c++) {
     const brickX = startX + c * (brickWidth + padding);
     const brickY = startY + r * (brickHeight + padding);
     const g = this.add.graphics(brickX, brickY);
     g.fillStyle(0x888888);
     g.fillRect(0,0,brickWidth,brickHeight);
     // store brick info
     bricks.push({
        g,
        x: brickX,
        y: brickY,
        width: brickWidth,
        height: brickHeight,
        hit: false
     });
  }
}

// function to update paddle graphics
this.updatePaddle = function() {
   paddleGraphics.clear();
   paddleGraphics.fillStyle(0xffffff, 1);
   paddleGraphics.fillRect(this.paddleX - this.paddleWidth/2, this.paddleY, this.paddleWidth, this.paddleHeight);
};

// function to update ball graphics
this.updateBall = function() {
   ballGraphics.clear();
   ballGraphics.fillStyle(0xffcc00, 1);
   ballGraphics.fillCircle(this.ball.x, this.ball.y, this.ballRadius);
};

But we cannot reference 'this' inside those functions after they are defined as plain functions string? We can embed them as arrow functions referencing variables in closure.

Simplify: Instead of separate functions, in update we will manually clear and draw.

So in create we store references: this.paddleX etc.

Then in update:

// handle paddle movement
if (this.cursors.left.isDown) {
   this.paddleX -= 300 * deltaTimeAdjustment;
} else if (this.cursors.right.isDown) {
   this.paddleX += 300 * deltaTimeAdjustment;
}
this.paddleX = Phaser.Math.Clamp(this.paddleX, this.paddleWidth/2, this.cameras.main.width - this.paddleWidth/2);
this.updatePaddle();

// update ball position
this.ball.x += this.ballVelocityX * (delta/16.666);
this.ball.y += this.ballVelocityY * (delta/16.666);

// collisions with top wall
if (this.ball.y - this.ballRadius <= 0) {
   this.ballVelocityY *= -1;
}
 // collisions with side walls
if (this.ball.x - this.ballRadius <= 0 || this.ball.x + this.ballRadius >= this.cameras.main.width) {
   this.ballVelocityX *= -1;
}
 // collisions with paddle
 if (this.ball.y + this.ballRadius >= this.paddleY && 
    this.ball.x > this.paddleX - this.paddleWidth/2 && 
    this.ball.x < this.paddleX + this.paddleWidth/2) {
   this.ballVelocityY *= -1;
   // adjust ball position
   this.ball.y = this.paddleY - this.ballRadius;
}
 // collisions with bricks
 for (let i=0;i<this.bricks.length;i++) {
   let b = this.bricks[i];
   if (b.hit) continue;
   if (this.ball.x + this.ballRadius > b.x && 
       this.ball.x - this.ballRadius < b.x + b.width && 
       this.ball.y + this.ballRadius > b.y && 
       this.ball.y - this.ballRadius < b.y + b.height) {
       b.hit = true;
       this.score += 10;
       this.scoreText.setText('Score: ' + this.score);
       // clear brick graphics
       b.g.clear();
       // bounce ball
       this.ballVelocityY *= -1;
       // move ball out of brick
       this.ball.y = b.y - this.ballRadius;
   }
 }
 // if ball falls below screen
 if (this.ball.y - this.ballRadius >= this.cameras.main.height) {
   // reset ball
   this.ball.x = this.paddleX;
   this.ball.y = this.paddleY - this.ballRadius*2;
   this.ballVelocityX = 200 + Math.random()*100;
   this.ballVelocityY = -250;
 }

Need to compute delta time: Phaser's update function receives (time, delta) where delta is in ms. To move per frame, we can multiply velocity by delta/1000 to get pixels per frame? Or we can ignore delta and treat movement per frame based on fixed speed: ballVelocityX * (delta / 16.666) approximates per frame at 60fps. Or we can simply use this.ball.x += this.ballVelocityX; (where velocity is in pixels per frame). Simpler: not multiply by delta; just update each frame using built-in this.time.delayedCall? Let's just use this.ball.x += this.ballVelocityX; and this.ball.y += this.ballVelocityY; and handle frame independent? But the game loops at ~60fps; using fixed velocities will be okay.

Thus in update we can just use:

this.ball.x += this.ballVelocityX;
this.ball.y += this.ballVelocityY;

No scaling.

Make sure to initialize velocities in create.

Now final code.

The whole index.html must be self-contained and end with index.html present.

We will output code using edit/write? Actually we need to produce the index.html file. We can write it using the write tool.

We need to create index.html with proper content. We'll generate the entire HTML string.

Let's prepare the content.

Start with <!DOCTYPE html>...

But the instruction: "build a single-page web app and write it ALL into one self-contained file named index.html in the current directory: CSS in a <style> tag, JS in a <script> tag, inline — do not create separate .css/.js files."

Thus we need to output index.html with <html><head><style>...</style></head><body><script src="phaser.min.js"></script><script> ... code ... </script></body></html>

We need to load phaser.min.js first, then our inline script.

Thus final file content: <html><head><meta charset="utf-8"><title>Brick Breaker</title><style>body{margin:0;overflow:hidden;}</style></head><body><script src="phaser.min.js"></script><script> ... Phaser game code ... </script></body></html>

Make sure no external URLs.

We will need to embed the script that defines the game after loading phaser.min.js. Since phaser.min.js provides global Phaser variable, we can use it directly.

Thus in script tag, we can do:

var config = {
 type: Phaser.AUTO,
 width: window.innerWidth,
 height: window.innerHeight,
 backgroundColor: '#000',
 physics: {
   default: 'arcade',
   arcade: {
      gravity: { y: 0 }, // we will handle manually
      debug: false
   }
 },
 parent: 'body',
 scene: {
   preload: function(){},
   create: function(){
        // all code here
   },
   update: function(){}
 }
};

var game = new Phaser.Game(config);

But Phaser expects scene object; inside create we use 'this' referencing the scene.

Thus we can embed everything inside create/update.

Simplify: Use Phaser.GameConfig with scene as function that returns object with preload/create/update. Or we can just pass a scene object directly.

We can do:

var game = new Phaser.Game({
 width: window.innerWidth,
 height: window.innerHeight,
 backgroundColor: '#000',
 physics: {
   default: 'arcade',
   arcade: {
      gravity: { y: 0 }
   }
 },
 scene: {
   preload: function(){},
   create: createScene,
   update: updateScene
 }
});

function createScene() { ... }

function updateScene(time, delta){ ... }

But functions must be defined globally? They can be defined inside the script.

Alternatively, we can embed everything within the scene object as inline functions.

Simpler: Use IIFE or directly assign create and update as object methods inside config.

Ok.

Let's craft code:

// after phaser.min.js loaded
var config = {
 type: Phaser.AUTO,
 width: window.innerWidth,
 height: window.innerHeight,
 backgroundColor: '#000',
 physics: {
   default: 'arcade',
   arcade: {
      gravity: { y: 0 },
      debug: false
   }
 },
 parent: 'body',
 scene: {
   preload: function(){},
   create: function () {
      // All setup code here
      // Use 'this' as the scene
      // Score text
      this.score = 0;
      this.scoreText = this.add.text(20, 20, 'Score: 0', {fontSize: '20px', color: '#fff'});

      // Paddle properties
      this.paddleX = this.cameras.main.width / 2;
      this.paddleY = this.cameras.main.height - 30;
      this.paddleWidth = 100;
      this.paddleHeight = 10;

      // Create paddle graphics
      this.paddleGraphics = this.add.graphics();
      this.updatePaddle();

      // Keyboard input
      this.cursors = this.input.keyboard.createCursorKeys();

      // Ball properties
      this.ballRadius = 10;
      this.ballVelocityX = 200;
      this.ballVelocityY = -300;
      this.ballGraphics = this.add.graphics();
      this.ballGraphics.fillStyle(0xffcc00, 1);
      this.ballGraphics.fillCircle(this.paddleX, this.paddleY - this.ballRadius*2, this.ballRadius);
      // store ball x,y for later update
      this.ballX = this.paddleX;
      this.ballY = this.paddleY - this.ballRadius*2;

      // Bricks
      const brickW = 70;
      const brickH = 20;
      const pad = 10;
      const bricksPerRow = Math.floor(this.cameras.main.width / (brickW + pad));
      const rows = 4;
      const startX = pad;
      const startY = pad*2;
      this.bricks = [];
      for (let r=0; r<rows; r++) {
         for (let c=0; c<bricksPerRow; c++) {
            const x = startX + c*(brickW+pad);
            const y = startY + r*(brickH+pad);
            const g = this.add.graphics(x, y);
            g.fillStyle(0x888888);
            g.fillRect(0,0,brickW,brickH);
            this.bricks.push({g,x,y,width:brickW,height:brickH,hit:false});
         }
      }

      // Funktionen for updating paddle and ball graphics (as arrow functions referencing 'this')
      this.updatePaddleGraphics = function() {
         this.paddleGraphics.clear();
         this.paddleGraphics.fillStyle(0xffffff, 1);
         this.paddleGraphics.fillRect(this.paddleX - this.paddleWidth/2, this.paddleY, this.paddleWidth, this.paddleHeight);
      };
      this.updateBallGraphics = function() {
         this.ballGraphics.clear();
         this.ballGraphics.fillStyle(0xffcc00, 1);
         this.ballGraphics.fillCircle(this.ballX, this.ballY, this.ballRadius);
      };
   },
   update: function (time, delta) {
      // Paddle movement
      if (this.cursors.left.isDown) {
         this.paddleX -= 300;
      } else if (this.cursors.right.isDown) {
         this.paddleX += 300;
      }
      // Clamp paddleX within screen
      this.paddleX = Phaser.Math.Clamp(this.paddleX, this.paddleWidth/2, this.cameras.main.width - this.paddleWidth/2);
      // Redraw paddle
      this.updatePaddleGraphics();

      // Ball movement
      this.ballX += this.ballVelocityX;
      this.ballY += this.ballVelocityY;

      // Collision with top wall
      if (this.ballY - this.ballRadius <= 0) {
         this.ballVelocityY *= -1;
      }
      // Left/right walls
      if (this.ballX - this.ballRadius <= 0 || this.ballX + this.ballRadius >= this.cameras.main.width) {
         this.ballVelocityX *= -1;
      }

      // Paddle collision
      if (this.ballY + this.ballRadius >= this.paddleY &&
          this.ballX > this.paddleX - this.paddleWidth/2 &&
          this.ballX < this.paddleX + this.paddleWidth/2) {
         this.ballVelocityY *= -1;
         // reposition ball just above paddle
         this.ballY = this.paddleY - this.ballRadius;
      }

      // Brick collisions
      for (let i=0; i<this.bricks.length; i++) {
         const b = this.bricks[i];
         if (b.hit) continue;
         if (this.ballX + this.ballRadius > b.x && 
             this.ballX - this.ballRadius < b.x + b.width && 
             this.ballY + this.ballRadius > b.y && 
             this.ballY - this.ballRadius < b.y + b.height) {
            b.hit = true;
            this.score += 10;
            this.scoreText.setText('Score: ' + this.score);
            // clear brick graphics
            b.g.clear();
            // bounce
            this.ballVelocityY *= -1;
            // reposition ball
            this.ballY = b.y - this.ballRadius;
         }
      }

      // Ball missed
      if (this.ballY - this.ballRadius >= this.cameras.main.height) {
         // reset ball
         this.ballX = this.paddleX;
         this.ballY = this.paddleY - this.ballRadius*2;
         // Randomize horizontal direction a bit
         this.ballVelocityX = 200 + Math.random()*100 * (Math.random()<0.5?-1:1);
         this.ballVelocityY = -250;
      }

      // Update ball graphics
      this.updateBallGraphics();
   }
 }
});

But JavaScript inside create function cannot refer to Phaser global? It will have 'this' referencing scene; we can use this.cameras.main.width etc.

Potential issues: Within update, need Phaser.Math.Clamp; okay.

We need to import Phaser.Math maybe? It's available globally.

We must ensure we reference Phaser elsewhere: In update we used Phaser.Math.Clamp; that's fine.

We also used Math.random.

We need to reference 'this' inside arrow functions defined inside create; using arrow function closures may break 'this' binding. Actually arrow function retains lexical 'this', which is the scene, so it's fine.

But we used 'function' not arrow; we used function inside object literal, and we called this.updatePaddleGraphics(); In that method we used 'this' referencing the scene, so okay.

But we defined this.updatePaddleGraphics = function() { ... } inside create; calling it later uses this.updatePaddleGraphics() which refers to the function we set, still has 'this' referencing scene (since it's a regular function with its own 'this'? Actually regular function's 'this' is determined by call; but we assign to this.updatePaddleGraphics = function() { ... }, and inside we refer to 'this' which will be the outer 'this' (the scene) when later called as this.updatePaddleGraphics(). That works.

But in update we call this.updatePaddleGraphics(); appropriate.

Now we must ensure that we preload function doesn't need assets.

Now final script.

Potential missing dependencies: The Phaser.Arcade physics may have bounds; we didn't set world bounds; but we are handling collisions manually, so no need.

Now produce final index.html content.

We have to embed script after loading phaser.min.js; we need to use plain <script src="phaser.min.js"></script>. Also we need to maybe use <script> after that to define our game; but the order matters: our inline script runs after phaser.min.js is loaded? The script tag after external script will execute after the external script is loaded (synchronously). So it's fine.

Thus index.html content:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brick Breaker</title>
<style>
body { margin:0; overflow:hidden; background:#000; }
</style>
</head>
<body>
<script src="phaser.min.js"></script>
<script>
var config = {
 type: Phaser.AUTO,
 width: window.innerWidth,
 height: window.innerHeight,
 backgroundColor: '#000',
 physics: {
   default: 'arcade',
   arcade: {
      gravity: { y: 0 },
      debug: false
   }
 },
 parent: 'body',
 scene: {
   preload: function () {},
   create: function () {
      // Score
      this.score = 0;
      this.scoreText = this.add.text(20, 20, 'Score: 0', {fontSize: '20px', color: '#fff'});

      // Paddle
      this.paddleX = this.cameras.main.width / 2;
      this.paddleY = this.cameras.main.height - 30;
      this.paddleWidth = 100;
      this.paddleHeight = 10;
      this.paddleGraphics = this.add.graphics();
      this.updatePaddleGraphics();

      // Input
      this.cursors = this.input.keyboard.createCursorKeys();

      // Ball
      this.ballRadius = 10;
      this.ballVelocityX = 200;
      this.ballVelocityY = -300;
      this.ballGraphics = this.add.graphics();
      this.ballX = this.paddleX;
      this.ballY = this.paddleY - this.ballRadius * 2;
      this.updateBallGraphics();

      // Bricks
      const brickW = 70;
      const brickH = 20;
      const pad = 10;
      const bricksPerRow = Math.floor(this.cameras.main.width / (brickW + pad));
      const rows = 4;
      const startX = pad;
      const startY = pad * 2;
      this.bricks = [];
      for (let r = 0; r < rows; r++) {
         for (let c = 0; c < bricksPerRow; c++) {
            const x = startX + c * (brickW + pad);
            const y = startY + r * (brickH + pad);
            const g = this.add.graphics(x, y);
            g.fillStyle(0x888888);
            g.fillRect(0, 0, brickW, brickH);
            this.bricks.push({g: g, x: x, y: y, width: brickW, height: brickH, hit: false});
         }
      }

      // Update paddle graphics method
      this.updatePaddleGraphics = function () {
         this.paddleGraphics.clear();
         this.paddleGraphics.fillStyle(0xffffff, 1);
         this.paddleGraphics.fillRect(this.paddleX - this.paddleWidth / 2, this.paddleY, this.paddleWidth, this.paddleHeight);
      };

      // Update ball graphics method
      this.updateBallGraphics = function () {
         this.ballGraphics.clear();
         this.ballGraphics.fillStyle(0xffcc00, 1);
         this.ballGraphics.fillCircle(this.ballX, this.ballY, this.ballRadius);
      };
   },
   update: function (time, delta) {
      // Paddle movement
      if (this.cursors.left.isDown) {
         this.paddleX -= 300;
      } else if (this.cursors.right.isDown) {
         this.paddleX += 300;
      }
      // Clamp paddle X
      this.paddleX = Phaser.Math.Clamp(this.paddleX, this.paddleWidth / 2, this.cameras.main.width - this.paddleWidth / 2);
      this.updatePaddleGraphics();

      // Ball movement
      this.ballX += this.ballVelocityX;
      this.ballY += this.ballVelocityY;

      // Top wall
      if (this.ballY - this.ballRadius <= 0) {
         this.ballVelocityY *= -1;
      }
      // Side walls
      if (this.ballX - this.ballRadius <= 0 || this.ballX + this.ballRadius >= this.cameras.main.width) {
         this.ballVelocityX *= -1;
      }

      // Paddle collision
      if (this.ballY + this.ballRadius >= this.paddleY &&
          this.ballX > this.paddleX - this.paddleWidth / 2 &&
          this.ballX < this.paddleX + this.paddleWidth / 2) {
         this.ballVelocityY *= -1;
         this.ballY = this.paddleY - this.ballRadius; // reposition
      }

      // Brick collisions
      for (let i = 0; i < this.bricks.length; i++) {
         const b = this.bricks[i];
         if (b.hit) continue;
         if (this.ballX + this.ballRadius > b.x &&
             this.ballX - this.ballRadius < b.x + b.width &&
             this.ballY + this.ballRadius > b.y &&
             this.ballY - this.ballRadius < b.y + b.height) {
            b.hit = true;
            this.score += 10;
            this.scoreText.setText('Score: ' + this.score);
            b.g.clear(); // remove brick
            // Bounce
            this.ballVelocityY *= -1;
            // reposition ball
            this.ballY = b.y - this.ballRadius;
         }
      }

      // Missed ball (reset)
      if (this.ballY - this.ballRadius >= this.cameras.main.height) {
         this.ballX = this.paddleX;
         this.ballY = this.paddleY - this.ballRadius * 2;
         // Randomize X direction a bit
         this.ballVelocityX = 200 + Math.random() * 100 * (Math.random() < 0.5 ? -1 : 1);
         this.ballVelocityY = -250;
      }

      // Redraw ball
      this.updateBallGraphics();
   }
 }
};

var game = new Phaser.Game(config);
</script>
</body>
</html>

We must ensure capitalisation: Phaser is uppercase; Phaser.Math.Clamp exists; also Phaser.Math is there.

One issue: In create we referenced Phaser.Math.Clamp within update; that's fine.

But we used Math.random within update for direction; fine.

Make sure to add missing semicolons.

Now need to produce final output: Use write tool to write index.html with this content.

We need to ensure the file is created exactly. Use write with path "index.html" and content string.

Now we are ready to output.

We have successfully written index.html with the entire game. The task: Build a playable brick-breaker game with paddle, ball, wall of breakable bricks, score, using only procedurally generated graphics via Phaser Graphics API, no external assets. We included phaser.min.js script and all code inline. The content is self-contained. We must output final answer? The instructions: "End with index.html present." We have written it. We may need to confirm success and maybe display content? The system wants the index.html file generated. We have done that. Possibly we should output brief confirmation message that the file is created, maybe show its contents? Usually we can just respond with a message saying it's done. It's not required to output code again; we already executed write. We can respond acknowledging that index.html has been created with the game. That's it.