Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alien Invaders</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
            color: white;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        canvas {
            display: block;
            margin: 0 auto;
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600" style="border: 2px solid red; margin-top: 150px;"></canvas>
    <div id="score" style="margin-top: 30px;">Points: 0</div>
    <script src="asd.js"></script>
</body>
</html>


JAVASCRIPT
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

class Spaceship {
    constructor() {
        this.width = 40;
        this.height = 40;
        this.x = canvas.width / 2 - this.width / 2;
        this.y = canvas.height - this.height - 10;
        this.speed = 5;
    }

    draw() {
        ctx.fillStyle = 'white';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    moveLeft() {
        if (this.x > 0) this.x -= this.speed;
    }

    moveRight() {
        if (this.x < canvas.width - this.width) this.x += this.speed;
    }
}

class Bullet {
    constructor(x, y) {
        this.width = 5;
        this.height = 10;
        this.x = x;
        this.y = y;
        this.speed = 7;
    }

    draw() {
        ctx.fillStyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    update() {
        this.y -= this.speed;
    }
}

class Alien {
    constructor(x, y) {
        this.width = 40;
        this.height = 30;
        this.x = x;
        this.y = y;
        this.speed = 3;
    }

    draw() {
        ctx.fillStyle = 'green';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    update() {
        this.y += this.speed;
    }
}

const spaceship = new Spaceship();
const bullets = [];
const aliens = [];
const keys = {};
let score = 0;

function createAlien() {
    const x = Math.random() * (canvas.width - 40);
    const y = 40;
    aliens.push(new Alien(x, y));
}

function createAliensRandomly() {
    setInterval(() => {
        createAlien();
    }, Math.random() * 4000 + 1000); // Random interval between 1000ms and 5000ms
}

function updateScore() {
    document.getElementById('score').textContent = `Points: ${score}`;
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    spaceship.draw();

    bullets.forEach((bullet, index) => {
        bullet.update();
        bullet.draw();

        if (bullet.y < 0) bullets.splice(index, 1);
    });

    aliens.forEach((alien, alienIndex) => {
        alien.update();
        alien.draw();

        bullets.forEach((bullet, bulletIndex) => {
            if (
                bullet.x < alien.x + alien.width &&
                bullet.x + bullet.width > alien.x &&
                bullet.y < alien.y + alien.height &&
                bullet.y + bullet.height > alien.y
            ) {
                setTimeout(() => aliens.splice(alienIndex, 1), 0);
                bullets.splice(bulletIndex, 1);
                score++;
                updateScore();
            }
        });
    });

    if (keys['ArrowLeft']) spaceship.moveLeft();
    if (keys['ArrowRight']) spaceship.moveRight();

    requestAnimationFrame(update);
}

createAliensRandomly();
update();

window.addEventListener('keydown', (e) => {
    keys[e.key] = true;

    if (e.key === ' ') {
        bullets.push(new Bullet(spaceship.x + spaceship.width / 2 - 2.5, spaceship.y));
    }
});

window.addEventListener('keyup', (e) => {
    keys[e.key] = false;
});
Editor is loading...