Asteroids · qwen-2.5-72b-instruct

It looks like there are a couple of issues in the initial setup of the game: 1. **Console Warnings and Errors**: - **Warning**: "An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing." - **Error**: "Assignment to constant variable." 2. **Game Behavior**: - The game canvas is not displaying properly. - The ship and asteroids are not being drawn. Let's address these issues step by step. ### Step 1: Fix the "Assignment to constant variable" Error This error typically occurs when you try to reassign a value to a constant variable. In the code, the `keys` object is defined with constants, but we are reassigning values to these constants in the event listeners. We need to use `let` or `var` instead of `const` for the `keys` object. ### Step 2: Ensure the Game Canvas is Displaying Properly We need to make sure that the game loop is correctly updating and rendering the game state. Here is the updated code: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Asteroids Game</title> <style> body { margin: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } canvas { background-color: black; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const asteroids = []; const bullets = []; const ship = { x: canvas.width / 2, y: canvas.height / 2, angle: 0, speed: 0, thrust: 0, lives: 3, score: 0, invulnerable: 0, radius: 15, color: '#FFFFFF' }; let keys = { up: false, left: false, right: false, space: false }; document.addEventListener('keydown', (e) => { switch (e.key) { case 'ArrowUp': keys.up = true; break; case 'ArrowLeft': keys.left = true; break; case 'ArrowRight': keys.right = true; break; case ' ': keys.space = true; break; } }); document.addEventListener('keyup', (e) => { switch (e.key) { case 'ArrowUp': keys.up = false; break; case 'ArrowLeft': keys.left = false; break; case 'ArrowRight': keys.right = false; break; case ' ': keys.space = false; break; } }); function createAsteroid(size) { const asteroid = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, angle: Math.random() * Math.PI * 2, speed: Math.random() * 1.5 + 1, size: size, vertices: 8, radius: size * 20, rotation: Math.random() * Math.PI * 2 }; return asteroid; } function wrapAround(object) { if (object.x < 0) object.x += canvas.width; if (object.x > canvas.width) object.x -= canvas.width; if (object.y < 0) object.y += canvas.height; if (object.y > canvas.height) object.y -= canvas.height; } function updateAsteroids() { for (let asteroid of asteroids) { asteroid.x += Math.cos(asteroid.angle) * asteroid.speed; asteroid.y += Math.sin(asteroid.angle) * asteroid.speed; wrapAround(asteroid); } } function updateShip() { if (keys.up) { ship.speed += 0.05; ship.thrust = 1; } else { ship.thrust = 0; ship.speed *= 0.98; } if (keys.left) ship.angle -= 0.05; if (keys.right) ship.angle += 0.05; ship.x += Math.cos(ship.angle) * ship.speed; ship.y += Math.sin(ship.angle) * ship.speed; wrapAround(ship); } function updateBullets() { for (let bullet of bullets) { bullet.x += Math.cos(bullet.angle) * 10; bullet.y += Math.sin(bullet.angle) * 10; wrapAround(bullet); } bullets = bullets.filter(bullet => bullet.life-- > 0); } function drawAsteroid(asteroid) { ctx.save(); ctx.translate(asteroid.x, asteroid.y); ctx.rotate(asteroid.rotation); ctx.beginPath(); for (let i = 0; i < asteroid.vertices; i++) { const angle = (i / asteroid.vertices) * Math.PI * 2; const radius = asteroid.radius * (0.7 + 0.3 * Math.random()); const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = '#FFFFFF'; ctx.fill(); ctx.restore(); } function drawShip() { ctx.save(); ctx.translate(ship.x, ship.y); ctx.rotate(ship.angle); ctx.beginPath(); ctx.moveTo(0, -ship.radius); ctx.lineTo(ship.radius * 0.6, ship.radius); ctx.lineTo(-ship.radius * 0.6, ship.radius); ctx.closePath(); ctx.fillStyle = ship.color; ctx.fill(); if (ship.thrust) { ctx.beginPath(); ctx.moveTo(-ship.radius * 0.4, ship.radius * 0.7); ctx.lineTo(-ship.radius * 0.4, -ship.radius * 0.7); ctx.lineTo(-ship.radius, 0); ctx.closePath(); ctx.fillStyle = '#FF0000'; ctx.fill(); } ctx.restore(); } function drawBullets() { for (let bullet of bullets) { ctx.beginPath(); ctx.arc(bullet.x, bullet.y, 2, 0, Math.PI * 2); ctx.fillStyle = '#FFFFFF'; ctx.fill(); } } function updateGame() { if (keys.space && bullets.length < 5) { bullets.push({ x: ship.x, y: ship.y, angle: ship.angle, life: 60 }); } updateAsteroids(); updateShip(); updateBullets(); for (let i = 0; i < asteroids.length; i++) { const asteroid = asteroids[i]; const dx = asteroid.x - ship.x; const dy = asteroid.y - ship.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < asteroid.radius + ship.radius && ship.invulnerable <= 0) { ship.lives--; ship.x = canvas.width / 2; ship.y = canvas.height / 2; ship.speed = 0; ship.angle = 0; ship.invulnerable = 60; asteroids.splice(i, 1); i--; } } for (let i = 0; i < asteroids.length; i++) { const asteroid = asteroids[i]; for (let j = 0; j < bullets.length; j++) { const bullet = bullets[j]; const dx = bullet.x - asteroid.x; const dy = bullet.y - asteroid.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < asteroid.radius) { ship.score += 10; if (asteroid.size > 1) { asteroids.push(createAsteroid(asteroid.size - 1)); asteroids.push(createAsteroid(asteroid.size - 1)); } asteroids.splice(i, 1); bullets.splice(j, 1); i--; j--; } } } if (asteroids.length === 0) { for (let i = 0; i < 3; i++) { asteroids.push(createAsteroid(3)); } } if (ship.lives <= 0) { ctx.font = '30px Arial'; ctx.fillStyle = '#FFFFFF'; ctx.textAlign = 'center'; ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2); ctx.fillText('Score: ' + ship.score, canvas.width / 2, canvas.height / 2 + 40); ctx.fillText('Press R to Restart', canvas.width / 2, canvas.height / 2 + 80); document.addEventListener('keydown', (e) => { if (e.key === 'r') { ship.lives = 3; ship.score = 0; asteroids.length = 0; for (let i = 0; i < 3; i++) { asteroids.push(createAsteroid(3)); } } }); return; } ctx.clearRect(0, 0, canvas.width, canvas.height); drawShip(); drawAsteroid(ship); drawBullets(); ctx.fillStyle = '#FFFFFF'; ctx.font = '20px Arial'; ctx.fillText('Lives: ' + ship.lives, 10, 20); ctx.fillText('Score: ' + ship.score, 10, 40); } function gameLoop() { if (ship.lives > 0) { updateGame(); } requestAnimationFrame(gameLoop); } for (let i = 0; i < 3; i++) { asteroids.push(createAsteroid(3)); } gameLoop(); </script> </body> </html> ``` Let's write this updated code to `index.html` and reload the browser to check the game.