Coins: 0
    
Upgrade Cost: 10 💰
    Left
    Up
    Right
    Down
    Buy Upgrade

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

        const spaceship = {
            x: 50,
            y: canvas.height / 2,
            speed: 5,
        };

        const coinBag = {
            x: 0,
            y: 0,
            radius: 15,
            value: 5,
            isCollected: false,
        };

        let coins = 0;
        let upgradeCost = 10;
        let upgradeMultiplier = 2;

        // Function to draw a space background
        function drawSpaceBackground() {
            ctx.fillStyle = "#000"; // Black color for space
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw stars
            ctx.fillStyle = "#fff"; // White color for stars
            for (let i = 0; i < 50; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                ctx.fillRect(x, y, 2, 2);
            }
        }

        function drawSpaceship() {
            ctx.beginPath();
            ctx.rect(spaceship.x, spaceship.y, 30, 20);
            ctx.fillStyle = "#3498db";
            ctx.fill();
            ctx.closePath();
        }

        function drawCoinBag() {
            if (!coinBag.isCollected) {
                ctx.beginPath();
                ctx.arc(coinBag.x, coinBag.y, coinBag.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#f39c12";
                ctx.fill();
                ctx.closePath();
            }
        }

        function drawCoins() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#f39c12";
            ctx.fillText("💰", canvas.width - 30, 20);
            ctx.fillText(coins, canvas.width - 15, 20);
        }

        function drawUpgradeCost() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#2ecc71";
            ctx.fillText("Upgrade Cost: " + upgradeCost + " 💰", canvas.width - 120, canvas.height - 20);
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function updateGameArea() {
            drawSpaceBackground(); // Draw the space background first
            drawSpaceship();
            drawCoinBag();
            drawCoins();
            drawUpgradeCost();
        }

        function moveSpaceship(direction) {
            switch (direction) {
                case "left":
                    if (spaceship.x > 0) spaceship.x -= spaceship.speed;
                    break;
                case "up":
                    if (spaceship.y > 0) spaceship.y -= spaceship.speed;
                    break;
                case "right":
                    if (spaceship.x = upgradeCost) {
                coins -= upgradeCost;
                spaceship.speed += 1; // Upgrade speed
                upgradeCost *= upgradeMultiplier;
                document.getElementById("coinCount").innerHTML = coins;
                document.getElementById("upgradeCost").innerHTML = "Upgrade Cost: " + upgradeCost + " 💰";
                updateGameArea();
            }
        }

        function spawnCoinBag() {
            coinBag.x = Math.random() * (canvas.width - 2 * coinBag.radius) + coinBag.radius;
            coinBag.y = Math.random() * (canvas.height - 2 * coinBag.radius) + coinBag.radius;
            coinBag.isCollected = false;
        }

        function checkCollision() {
            const distance = Math.sqrt(
                Math.pow(coinBag.x - spaceship.x, 2) + Math.pow(coinBag.y - spaceship.y,