body.html
Changed around line 1
+
+
AIroids
+
Dodge and destroy AI company logos in this modern twist on the classic Asteroids game!
+
+
+
+
+
+
+
Score: 0
+
+
+
+
Use arrow keys to move and spacebar to shoot. Survive as long as you can!
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://airoids.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AIroids - Asteroids Game with AI Companies Logos
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # airoids.scroll.pub
+ Website generated by DeepSeek from prompt: Asteroids game with AI companies logos. Use state-of-the-art UI and render features well
script.js
Changed around line 1
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ const startButton = document.getElementById('startButton');
+ const pauseButton = document.getElementById('pauseButton');
+ const scoreDisplay = document.getElementById('scoreDisplay');
+
+ let ship, asteroids, bullets, score, gameOver, paused;
+
+ const SHIP_SIZE = 30;
+ const ASTEROID_SIZE = 50;
+ const BULLET_SPEED = 5;
+ const ASTEROID_SPEED = 2;
+
+ class Ship {
+ constructor() {
+ this.x = canvas.width / 2;
+ this.y = canvas.height / 2;
+ this.angle = 0;
+ this.speed = 0;
+ this.rotation = 0;
+ }
+
+ draw() {
+ ctx.save();
+ ctx.translate(this.x, this.y);
+ ctx.rotate(this.angle);
+ ctx.beginPath();
+ ctx.moveTo(SHIP_SIZE, 0);
+ ctx.lineTo(-SHIP_SIZE, -SHIP_SIZE / 2);
+ ctx.lineTo(-SHIP_SIZE, SHIP_SIZE / 2);
+ ctx.closePath();
+ ctx.strokeStyle = 'white';
+ ctx.stroke();
+ ctx.restore();
+ }
+
+ update() {
+ this.angle += this.rotation;
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+
+ if (this.x < 0) this.x = canvas.width;
+ if (this.x > canvas.width) this.x = 0;
+ if (this.y < 0) this.y = canvas.height;
+ if (this.y > canvas.height) this.y = 0;
+ }
+ }
+
+ class Asteroid {
+ constructor() {
+ this.x = Math.random() < 0.5 ? 0 : canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.angle = Math.atan2(ship.y - this.y, ship.x - this.x);
+ this.speed = ASTEROID_SPEED;
+ this.size = ASTEROID_SIZE;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.strokeStyle = 'red';
+ ctx.stroke();
+ }
+
+ update() {
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+ }
+ }
+
+ class Bullet {
+ constructor(x, y, angle) {
+ this.x = x;
+ this.y = y;
+ this.angle = angle;
+ this.speed = BULLET_SPEED;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ }
+
+ update() {
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+ }
+ }
+
+ function init() {
+ ship = new Ship();
+ asteroids = [];
+ bullets = [];
+ score = 0;
+ gameOver = false;
+ paused = false;
+ scoreDisplay.textContent = `Score: ${score}`;
+ }
+
+ function update() {
+ if (paused || gameOver) return;
+
+ ship.update();
+ asteroids.forEach(asteroid => asteroid.update());
+ bullets.forEach(bullet => bullet.update());
+
+ // Check for collisions
+ asteroids.forEach((asteroid, aIndex) => {
+ bullets.forEach((bullet, bIndex) => {
+ if (Math.hypot(bullet.x - asteroid.x, bullet.y - asteroid.y) < asteroid.size) {
+ asteroids.splice(aIndex, 1);
+ bullets.splice(bIndex, 1);
+ score++;
+ scoreDisplay.textContent = `Score: ${score}`;
+ }
+ });
+
+ if (Math.hypot(ship.x - asteroid.x, ship.y - asteroid.y) < asteroid.size + SHIP_SIZE) {
+ gameOver = true;
+ }
+ });
+
+ // Spawn new asteroids
+ if (Math.random() < 0.02) {
+ asteroids.push(new Asteroid());
+ }
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ship.draw();
+ asteroids.forEach(asteroid => asteroid.draw());
+ bullets.forEach(bullet => bullet.draw());
+
+ if (gameOver) {
+ ctx.fillStyle = 'white';
+ ctx.font = '30px Arial';
+ ctx.fillText('Game Over!', canvas.width / 2 - 70, canvas.height / 2);
+ }
+ }
+
+ function gameLoop() {
+ update();
+ draw();
+ if (!gameOver) requestAnimationFrame(gameLoop);
+ }
+
+ function handleKeyDown(e) {
+ if (e.key === 'ArrowLeft') ship.rotation = -0.1;
+ if (e.key === 'ArrowRight') ship.rotation = 0.1;
+ if (e.key === 'ArrowUp') ship.speed = 2;
+ if (e.key === ' ') {
+ bullets.push(new Bullet(ship.x, ship.y, ship.angle));
+ }
+ }
+
+ function handleKeyUp(e) {
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') ship.rotation = 0;
+ if (e.key === 'ArrowUp') ship.speed = 0;
+ }
+
+ startButton.addEventListener('click', () => {
+ init();
+ gameLoop();
+ });
+
+ pauseButton.addEventListener('click', () => {
+ paused = !paused;
+ pauseButton.textContent = paused ? 'Resume' : 'Pause';
+ });
+
+ window.addEventListener('keydown', handleKeyDown);
+ window.addEventListener('keyup', handleKeyUp);
+
+ init();
style.css
Changed around line 1
+ :root {
+ --primary-color: #1a73e8;
+ --secondary-color: #34a853;
+ --background-color: #0f0f0f;
+ --text-color: #ffffff;
+ --font-family: 'Arial', sans-serif;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: var(--font-family);
+ background-color: var(--background-color);
+ color: var(--text-color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ h1 {
+ font-size: 3rem;
+ color: var(--primary-color);
+ margin: 0;
+ }
+
+ p {
+ font-size: 1.2rem;
+ color: var(--text-color);
+ }
+
+ main {
+ position: relative;
+ }
+
+ canvas {
+ border: 2px solid var(--primary-color);
+ background-color: #000;
+ display: block;
+ margin: 0 auto;
+ }
+
+ #gameControls {
+ margin-top: 1rem;
+ text-align: center;
+ }
+
+ button {
+ background-color: var(--primary-color);
+ color: var(--text-color);
+ border: none;
+ padding: 0.5rem 1rem;
+ margin: 0.5rem;
+ cursor: pointer;
+ font-size: 1rem;
+ border-radius: 4px;
+ transition: background-color 0.3s ease;
+ }
+
+ button:hover {
+ background-color: var(--secondary-color);
+ }
+
+ #scoreDisplay {
+ font-size: 1.5rem;
+ margin-top: 1rem;
+ }
+
+ footer {
+ margin-top: 2rem;
+ text-align: center;
+ font-size: 0.9rem;
+ color: var(--text-color);
+ }
+
+ @media (max-width: 768px) {
+ canvas {
+ width: 100%;
+ height: auto;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ p {
+ font-size: 1rem;
+ }
+ }