Create game.js

game.js

@@ -0,0 +1,144 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = 800;
+canvas.height = 600;
+
+let spaceship;
+let bullets = [];
+let enemies = [];
+let gameOver = false;
+
+function startGame() {
+    spaceship = new Spaceship();
+    bullets = [];
+    enemies = [];
+    gameOver = false;
+    document.getElementById('gameOver').style.display = 'none';
+    gameLoop();
+}
+
+class Spaceship {
+    constructor() {
+        this.width = 50;
+        this.height = 50;
+        this.x = canvas.width / 2 - this.width / 2;
+        this.y = canvas.height - this.height - 10;
+        this.speed = 5;
+        this.image = new Image();
+        this.image.src = 'https://via.placeholder.com/50';  // Add spaceship image URL here
+    }
+
+    move(direction) {
+        if (direction === 'left' && this.x > 0) {
+            this.x -= this.speed;
+        } else if (direction === 'right' && this.x + this.width < canvas.width) {
+            this.x += this.speed;
+        }
+    }
+
+    draw() {
+        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+    }
+
+    shoot() {
+        const bullet = new Bullet(this.x + this.width / 2 - 5, this.y);
+        bullets.push(bullet);
+    }
+}
+
+class Bullet {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.width = 10;
+        this.height = 20;
+        this.speed = 5;
+    }
+
+    move() {
+        this.y -= this.speed;
+    }
+
+    draw() {
+        ctx.fillStyle = '#00ff99';
+        ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+}
+
+class Enemy {
+    constructor() {
+        this.width = 50;
+        this.height = 50;
+        this.x = Math.random() * (canvas.width - this.width);
+        this.y = -50;
+        this.speed = 2;
+    }
+
+    move() {
+        this.y += this.speed;
+    }
+
+    draw() {
+        ctx.fillStyle = '#ff4444';
+        ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+}
+
+function gameLoop() {
+    if (gameOver) {
+        document.getElementById('gameOver').style.display = 'block';
+        return;
+    }
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    spaceship.draw();
+
+    bullets.forEach((bullet, index) => {
+        bullet.move();
+        bullet.draw();
+        if (bullet.y < 0) {
+            bullets.splice(index, 1);
+        }
+    });
+
+    if (Math.random() < 0.02) {
+        enemies.push(new Enemy());
+    }
+
+    enemies.forEach((enemy, index) => {
+        enemy.move();
+        enemy.draw();
+
+        if (enemy.y > canvas.height) {
+            enemies.splice(index, 1);
+        }
+
+        bullets.forEach((bullet, bulletIndex) => {
+            if (
+                bullet.x < enemy.x + enemy.width &&
+                bullet.x + bullet.width > enemy.x &&
+                bullet.y < enemy.y + enemy.height &&
+                bullet.y + bullet.height > enemy.y
+            ) {
+                enemies.splice(index, 1);
+                bullets.splice(bulletIndex, 1);
+            }
+        });
+    });
+
+    requestAnimationFrame(gameLoop);
+}
+
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft') {
+        spaceship.move('left');
+    } else if (e.key === 'ArrowRight') {
+        spaceship.move('right');
+    } else if (e.key === ' ') {
+        spaceship.shoot();
+    }
+});
+
+startGame();