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

let width = window.innerWidth;
let height = window.innerHeight;

canvas.width = width;
canvas.height = height;

let star = {
    x: width / 2,
    y: height / 2,
    radius: 50,
    color: "yellow",
};

let towers = [];
let enemies = [];

function drawStar() {
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
    ctx.fillStyle = star.color;
    ctx.fill();
}

function drawTowers() {
    towers.forEach(tower => {
        ctx.beginPath();
        ctx.arc(tower.x, tower.y, tower.radius, 0, Math.PI * 2);
        ctx.fillStyle = "blue";
        ctx.fill();
    });
}

function drawEnemies() {
    enemies.forEach(enemy => {
        ctx.beginPath();
        ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
    });
}

function spawnEnemies() {
    let enemy = {
        x: Math.random() * width,
        y: 0,
        radius: 20,
        speed: 2,
    };
    enemies.push(enemy);
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawStar();
    drawTowers();
    drawEnemies();
    spawnEnemies();
    requestAnimationFrame(update);
}

update();