Brick breaker · qwen3-coder-flash
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.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 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.
```html <!DOCTYPE html> <html> <head> <title>Brick Breaker Game</title> <script src="phaser.min.js"></script> <style> body { margin: 0; padding: 0; background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } #game-container { border: 2px solid #444; box-shadow: 0 0 20px rgba(0, 100, 255, 0.5); } </style> </head> <body> <div id="game-container"></div> <script> // Game configuration const config = { type: Phaser.AUTO, width: 800, height: 600, backgroundColor: '#000022', parent: 'game-container', scene: { preload: preload, create: create, update: update }, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } } }; // Game variables let paddle; let ball; let bricks; let score = 0; let scoreText; let gameOver = false; let cursors; let mouse; // Create the game const game = new Phaser.Game(config); function preload() { // No assets needed - everything will be generated procedurally } function create() { // Create paddle paddle = this.physics.add.sprite(400, 550, null); paddle.setCollideWorldBounds(true); paddle.body.immovable = true; // Generate paddle texture const paddleGraphics = this.make.graphics({ x: 0, y: 0 }); paddleGraphics.fillStyle(0x00ff00); paddleGraphics.fillRect(0, 0, 100, 20); paddleGraphics.generateTexture('paddle'); paddle.setTexture('paddle'); // Create ball ball = this.physics.add.circle(400, 300, 10); ball.setBounce(1); ball.setCollideWorldBounds(true); ball.body.velocity.x = 200; ball.body.velocity.y = -200; // Generate ball texture const ballGraphics = this.make.graphics({ x: 0, y: 0 }); ballGraphics.fillStyle(0xff0000); ballGraphics.fillCircle(0, 0, 10); ballGraphics.generateTexture('ball'); ball.setTexture('ball'); // Create bricks bricks = this.physics.add.group(); createBricks.call(this); // Add collision detection this.physics.add.collider(ball, bricks, brickHit, null, this); this.physics.add.collider(ball, paddle, ballHitPaddle, null, this); // Score text scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#ffffff' }); // Controls cursors = this.input.keyboard.createCursorKeys(); mouse = this.input.mouse; // Set up mouse movement this.input.on('mousemove', function (pointer) { paddle.x = pointer.x; }); // Game over text this.gameOverText = this.add.text(400, 300, 'Game Over', { fontSize: '64px', fill: '#ff0000' }); this.gameOverText.setOrigin(0.5); this.gameOverText.setVisible(false); // Restart text this.restartText = this.add.text(400, 370, 'Press R to restart', { fontSize: '24px', fill: '#ffffff' }); this.restartText.setOrigin(0.5); this.restartText.setVisible(false); } function createBricks() { const brickWidth = 75; const brickHeight = 20; const brickPadding = 10; const brickOffsetTop = 60; const brickOffsetLeft = 30; // Create 8 rows of bricks for (let row = 0; row < 8; row++) { // Create 10 bricks per row for (let col = 0; col < 10; col++) { const brickX = brickOffsetLeft + col * (brickWidth + brickPadding); const brickY = brickOffsetTop + row * (brickHeight + brickPadding); // Create brick with different colors for each row const brick = this.physics.add.rectangle(brickX, brickY, brickWidth, brickHeight); brick.setImmovable(true); // Generate brick texture with color based on row const colors = [0xff0000, 0xff8000, 0xffff00, 0x80ff00, 0x00ffff, 0x0080ff, 0x8000ff, 0xff00ff]; const color = colors[row]; const brickGraphics = this.make.graphics({ x: 0, y: 0 }); brickGraphics.fillStyle(color); brickGraphics.fillRect(0, 0, brickWidth, brickHeight); brickGraphics.generateTexture(`brick${row}${col}`); brick.setTexture(`brick${row}${col}`); bricks.add(brick); } } } function brickHit(ball, brick) { brick.disableBody(true, true); score += 10; scoreText.setText('Score: ' + score); // Check if all bricks are destroyed if (bricks.countActive(true) === 0) { // All bricks destroyed - reset level bricks.children.iterate(function(child) { child.enableBody(true, child.x, child.y, true, true); }); ball.x = 400; ball.y = 300; ball.body.velocity.x = 200; ball.body.velocity.y = -200; } } function ballHitPaddle(ball, paddle) { // Calculate bounce angle based on where the ball hits the paddle const hitPosition = (ball.x - paddle.x) / (paddle.width / 2); const angle = hitPosition * 0.8; // Limit max angle ball.body.velocity.x = angle * 100; ball.body.velocity.y = -Math.abs(ball.body.velocity.y); } function update() { if (gameOver) return; // Move paddle with keyboard if (cursors.left.isDown) { paddle.body.velocity.x = -300; } else if (cursors.right.isDown) { paddle.body.velocity.x = 300; } else { paddle.body.velocity.x = 0; } // Check if ball is out of bounds if (ball.y > 600) { gameOver = true; this.gameOverText.setVisible(true); this.restartText.setVisible(true); // Add restart functionality this.input.keyboard.on('keydown-R', function () { location.reload(); }); } } </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.