Brick breaker · mercury-2
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.
transcript · 8 messages
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.
{"command":"ls -R"}.: phaser.min.js
index.html (3551 bytes)Successfully wrote 3551 bytes to index.html
{"path":"index.html","offset":1,"limit":2000}<!DOCTYPE html> <html lang="en"> <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> const config = { type: Phaser.AUTO, width: 800, height: 600, backgroundColor: '#222', physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; let paddle, ball, bricks, scoreText, score = 0; let cursors; const game = new Phaser.Game(config); function preload() { // paddle texture const pg = this.make.graphics({ x:0, y:0, add:false }); pg.fillStyle(0xffffff, 1); pg.fillRect(0,0,100,20); pg.generateTexture('paddle', 100, 20); // ball texture const bg = this.make.graphics({ x:0, y:0, add:false }); bg.fillStyle(0xff0000, 1); bg.fillCircle(10,10,10); bg.generateTexture('ball', 20, 20); // brick texture const br = this.make.graphics({ x:0, y:0, add:false }); br.fillStyle(0x00ff00, 1); br.fillRect(0,0,60,30); br.generateTexture('brick', 60, 30); } function create() { // paddle paddle = this.physics.add.sprite(400, 560, 'paddle'); paddle.setImmovable(true); paddle.body.allowGravity = false; paddle.body.collideWorldBounds = true; paddle.body.setBounce(1,0); // ball ball = this.physics.add.sprite(400, 300, 'ball'); ball.setCollideWorldBounds(true); ball.setBounce(1); ball.setVelocity(150, -150); ball.body.onWorldBounds = true; // bricks bricks = this.physics.add.staticGroup(); const rows = 5; const cols = 10; const offsetX = 80; const offsetY = 60; const spacingX = 70; const spacingY = 40; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = offsetX + col * spacingX; const y = offsetY + row * spacingY; const brick = bricks.create(x, y, 'brick'); brick.setOrigin(0.5,0.5); } } // collisions this.physics.add.collider(ball, paddle, hitPaddle, null, this); this.physics.add.collider(ball, bricks, hitBrick, null, this); // score scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '20px', fill: '#fff' }); // input cursors = this.input.keyboard.createCursorKeys(); this.input.on('pointermove', function (pointer) { paddle.x = Phaser.Math.Clamp(pointer.x, paddle.width/2, config.width - paddle.width/2); }, this); // world bounds (bottom open) this.physics.world.setBoundsCollision(true, true, true, false); // ball out of bounds ball.body.world.on('worldbounds', function (body, up, down, left, right) { if (down) { resetBall(); } }, this); } function update() { if (cursors.left.isDown) { paddle.setVelocityX(-300); } else if (cursors.right.isDown) { paddle.setVelocityX(300); } else { paddle.setVelocityX(0); } } function hitPaddle(ball, paddle) { // tweak ball X velocity based on where it hits the paddle const diff = ball.x - paddle.x; ball.setVelocityX(diff * 10); } function hitBrick(ball, brick) { brick.disableBody(true, true); score += 10; scoreText.setText('Score: ' + score); // win condition if (bricks.countActive() === 0) { // recreate bricks bricks.children.iterate(function (child) { child.enableBody(false, 0, 0, true, true); }); score = 0; scoreText.setText('Score: 0'); } } function resetBall() { ball.setPosition(400, 300); ball.setVelocity(150, -150); } </script> </body> </html>
The **index.html** file has been created in the current directory. It contains a complete, self‑contained brick‑breaker game built with the provided `phaser.min.js`. All graphics are generated procedurally via Phaser’s Graphics API, and the game supports paddle control via arrow keys or mouse, a bouncing ball, a wall of breakable bricks, and a live score display. You can open `index.html` in a browser to play the game.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Brick breaker with green brick grid, paddle, and ball; bricks break and ball moves, but paddle barely responds to input.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.