Brick breaker · llama-3.1-8b-instruct

<write>index.html</write> <script src="phaser.min.js"></script> <style> /* Simple styling for the game */ body { margin: 0; background-color: #000; } #playfield { position: relative; width: 800px; height: 600px; border: 1px solid #fff; } #paddle { position: absolute; top: 50vh; width: 100px; height: 20px; background-color: #fff; } #ball { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background-color: #fff; } #wall { position: absolute; top: 0; left: 0; width: 800px; height: 50px; background-color: #fff; } #bricks { position: absolute; top: 50px; left: 0; } #score { position: absolute; top: 10px; left: 10px; font-size: 24px; color: #fff; } #lives { position: absolute; top: 10px; left: 120px; font-size: 24px; color: #fff; } #controls { position: absolute; top: 10px; right: 10px; font-size: 24px; color: #fff; } </style> <script> function game() { var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: false } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload() { this.load.image('ball', ''); this.load.image('paddle', ''); this.load.image('brick', ''); } function create () { this.add.text(10,580, 'Lives: 3', style); this.lives = 3; this.add.text(10,600, 'Score: 0', style); this.score = 0; this.launchButton = this.add.rectangle(10,580, 20, 20, 0x00ff00); this.launchButton.setInteractive(); this.paddle = this.physics.add.sprite(395, 290, 'paddle'); this.paddle.setCollideWorldBounds(true); this.bricks = this.physics.add.group(); for (let i = 0; i < 5; i++) { for (let j = 0; j < 10; j++) { let brick = this.physics.add.sprite(j * 80 + 35, i * 30 + 60, 'brick'); brick.setImmovable(); this.bricks.add(brick); } } this.brickHits = 0; this.ball = this.physics.add.sprite(395, 270, 'ball'); this.ball.setVelocity(0); this.ballTexture = this.display.newTexture(); this.ball.setTintStyle({tint: 0xffffff}); } function update (time, delta) { // Control paddle movement if (this.input.mousePointer.isDown || this.cursors.left.isDown || this.cursors.right.isDown) { this.paddle.x += (this.cursors.left.isDown ? -2 : 2); this.ball.x = this.paddle.x + 30; this.ball.y = this.paddle.y - 10; if (this.paddle.x > 780) { this.paddle.x = 780; } else if (this.paddle.x < 0) { this.paddle.x = 0; } } // Launch ball on space press or launch button click if (Phaser.Input.Keyboard.JustPressed(this.input.keyboard.addKey(Phaser.Input.Keyboard.SPACE_KEY)) || this.launchButton.isDown) { this.ball.setVelocity(200, -200); } // Update bricks on contact this.physics.world.collide(this.ball, this.bricks, function(ball, brick) { this.brickHits++; this.score++; this.bricks.killAndHide(brick); if (this.brickHits == 50) { this.add.text(350, 300, 'You win!', style); Phaser.Actions.Call(this.bricks.children.list, function(child) { child.setActive(false); child.setVisible(false); }, this); } }, this); // Game over on lives depletion this.physics.world.collide(this.ball, this.wall, function(ball) { this.lives--; this.ball.x = this.paddle.x + 30; this.ball.y = this.paddle.y - 10; if (this.lives == 0) { this.add.text(350, 300, 'Game Over', style); Phaser.Actions.Call(this.bricks.children.list, function(child) { child.setActive(false); child.setVisible(false); }, this); } }, this); // Reset lives and score on restart if (Phaser.Input.Keyboard.JustPressed(this.input.keyboard.addKey(Phaser.Input.Keyboard.R_KEY))) { this.lives = 3; this.score = 0; Phaser.Actions.Call(this.bricks.children.list, function(child) { child.setActive(true); child.setVisible(true); }, this); } // Display lives and score this.add.text(10,580, 'Lives: ' + this.lives, style); this.add.text(10,600, 'Score: ' + this.score, style); // Check if paddle is in the playfield this.physics.checkCollision(this.paddle, this.wall, false, true, true); this.physics.checkCollision(this.paddle, this.bricks, false, false, false); // Collision handling this.physics.collide(this.paddle, this.bricks, function(paddle, bricks) { paddle.x += 2; }, this); this.physics.collide(this.ball, this.paddle, function(ball, paddle) { this.ball.x = paddle.x + 30; this.ball.y = paddle.y - 10; }, this); this.physics.collide(this.ball, this.wall, function(ball) { this.ball.y = 300; this.ball.x = 395; this.ball.setVelocity(Math.sqrt(this.ball.velocityX ** 2 + this.ball.velocityY ** 2) * Math.cos(Math.asin(this.ball.velocityY / Math.sqrt(this.ball.velocityX ** 2 + this.ball.velocityY ** 2)))); }, this); this.physics.collide(this.ball, this.bricks, function(ball, brick) { this.ball.x = brick.x; this.ball.y = brick.y; this.ball.setVelocityX(-this.ball.velocityX); this.ball.setVelocityY(-this.ball.velocityY); }, this); } var style = { font: '24px Arial', fill: '#ffffff' }; } const game = new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, scene: new Phaser.Scene('game') }); </script>

<edit>index.html</edit>{"path": "/tmp/job-Sc9gOi/index.html"}

Now the complete app has been written to index.html in the current directory. You can verify the app and finish.