<write>{"content": "<style>canvas { border: 1px solid black; }</style><script>var canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600; var ctx = canvas.getContext('2d'); document.body.appendChild(canvas); var ship = { x: canvas.width / 2, y: canvas.height / 2, angle: 0, speed: 0, rotationSpeed: 0.1, thrust: 0.1, bulletSpeed: 5, lives: 5, score: 0, asteroids: [{ x: 100, y: 100, size: 20, splits: 3 }] }; document.addEventListener('keydown', function(event) { if (event.key === 'w') { ship.thrust = 0.1; } else if (event.key === 's') { ship.thrust = -0.1; } else if (event.key === 'a') { ship.rotationSpeed = 0.1; } else if (event.key === 'd') { ship.rotationSpeed = -0.1; } else if (event.key === ' ') { ship.asteroids.push({ x: ship.x, y: ship.y, size: 10, splits: 3 }); } }); document.addEventListener('keyup', function(event) { if (event.key === 'w' || event.key === 's') { ship.thrust = 0; } if (event.key === 'a' || event.key === 'd') { ship.rotationSpeed = 0; } }); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(ship.angle); for (var i = 0; i < ship.asteroids.length; i++) { var asteroid = ship.asteroids[i]; ctx.beginPath(); ctx.arc(asteroid.x, asteroid.y, asteroid.size, 0, 2 * Math.PI); ctx.fillStyle = 'black'; ctx.fill(); for (var j = 0; j < asteroid.splits; j++) { ctx.beginPath(); ctx.arc(asteroid.x, asteroid.y, (1 - j / asteroid.splits) * asteroid.size, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); } } ctx.beginPath(); ctx.arc(0, 0, 10, 0, 2 * Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); ctx.restore(); ctx.fillStyle = 'black'; ctx.font = '24px Arial'; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.fillText('Lives: ' + ship.lives, 10, 10); ctx.fillText('Score: ' + ship.score, 10, 40); } function update() { ship.angle += ship.rotationSpeed; for (var i = 0; i < ship.asteroids.length; i++) { var asteroid = ship.asteroids[i]; asteroid.x += Math.cos(asteroid.x * Math.PI / 180) * ship.thrust; asteroid.y += Math.sin(-asteroid.x * Math.PI / 180) * ship.thrust; if (asteroid.x + asteroid.size > canvas.width / 2 || asteroid.x - asteroid.size < canvas.width / 2) { asteroid.x = -asteroid.x; } if (asteroid.y + asteroid.size > canvas.height / 2 || asteroid.y - asteroid.size < canvas.height / 2) { asteroid.y = -asteroid.y; } for (var j = 0; j < ship.asteroids.length; j++) { var bullet = ship.asteroids[j]; if (i !== j && Math.hypot(asteroid.x - bullet.x, asteroid.y - bullet.y) < asteroid.size + bullet.size) { ship.score += 1; ship.asteroids.splice(j, 1); } } } for (var i = 0; i < ship.asteroids.length; i++) { var asteroid = ship.asteroids[i]; if (Math.hypot(ship.x - asteroid.x, ship.y - asteroid.y) < asteroid.size) { ship.lives -= 1; if (ship.lives === 0) { alert('Game Over!'); } else { ship.score -= 10; ship.asteroids.splice(i, 1); } } } for (var i = 0; i < ship.asteroids.length; i++) { var asteroid = ship.asteroids[i]; if (asteroid.splits === 0 || Math.hypot(ship.x - asteroid.x, ship.y - asteroid.y) < asteroid.size) { asteroid.splits = ship.asteroids[i].size = asteroid.size / 2; } } requestAnimationFrame(update); draw(); } (function() { var lastFrame = 0; function tick() { var now = performance.now(); var delta = now - lastFrame; lastFrame = now; update(delta); } tick(); })();</script><script>setInterval(draw, 16);</script>","path": "/tmp/ws/index.html"};</function> <write>{"content": "<style>\n/* Default styles */\nbody, html {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: Arial, sans-serif;\n}\n\n.canvas {\n border: 1px solid black;\n}\n</style>","path": "/tmp/ws/index.html"};</function> <write>{"content": "<script>\nvar c = document.getElementById('canvas');\nvar ctx = c.getContext('2d');\n</script>","path": "/tmp/ws/index.html"};</function> <write>{"content": "<canvas id=\"canvas\" width=\"800\" height=\"600\"></canvas>","path": "/tmp/ws/index.html"};</function>