Falling Star Catcher Game with JavaScript Canvas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Catcher</title>
    <style>
        body {
            background-color: #1a1a2e;
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

#game-container {
            text-align: center;
        }

canvas {
            border: 3px solid #e94560;
            border-radius: 8px;
            background-color: #0f3460;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        }

.controls {
            margin-top: 15px;
            font-size: 14px;
            color: #8d99ae;
        }
    </style>
</head>
<body>

<div id="game-container">
    <canvas id="gameCanvas" width="500" height="400"></canvas>
    <div class="controls">Use <b>Left / Right Arrows</b> or <b>A / D</b> to move</div>
</div>

// Game Variables
    let score = 0;
    let lives = 3;
    let gameOver = false;

// Paddle Setup
    const paddle = {
        width: 100,
        height: 15,
        x: (canvas.width - 100) / 2,
        y: canvas.height - 25,
        speed: 7,
        dx: 0
    };

// Falling Item Setup
    const star = {
        x: Math.random() * (canvas.width - 20) + 10,
        y: 0,
        radius: 10,
        speed: 3
    };

// Key Listeners
    document.addEventListener("keydown", (e) => {
        if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") {
            paddle.dx = -paddle.speed;
        } else if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") {
            paddle.dx = paddle.speed;
        } else if (e.key === " " && gameOver) {
            resetGame();
        }
    });

document.addEventListener("keyup", (e) => {
        if (
            e.key === "ArrowLeft" || e.key === "a" || e.key === "A" ||
            e.key === "ArrowRight" || e.key === "d" || e.key === "D"
        ) {
            paddle.dx = 0;
        }
    });

function resetGame() {
        score = 0;
        lives = 3;
        gameOver = false;
        star.speed = 3;
        resetStar();
        loop();
    }

function resetStar() {
        star.x = Math.random() * (canvas.width - 30) + 15;
        star.y = -10;
    }

function update() {
        if (gameOver) return;

// Move Paddle
        paddle.x += paddle.dx;
        if (paddle.x < 0) paddle.x = 0;
        if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;

// Move Star
        star.y += star.speed;

// Collision Check (Paddle catches star)
        if (
            star.y + star.radius >= paddle.y &&
            star.x >= paddle.x &&
            star.x <= paddle.x + paddle.width
        ) {
            score += 10;
            star.speed += 0.2; // Gradually speed up
            resetStar();
        }

// Missed Star
        if (star.y > canvas.height) {
            lives--;
            if (lives <= 0) {
                gameOver = true;
            } else {
                resetStar();
            }
        }
    }

function draw() {
        // Clear Canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

if (gameOver) {
            ctx.fillStyle = "#ffffff";
            ctx.font = "30px Arial";
            ctx.textAlign = "center";
            ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2 - 20);
            ctx.font = "20px Arial";
            ctx.fillText(`Final Score: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
            ctx.font = "16px Arial";
            ctx.fillStyle = "#e94560";
            ctx.fillText("Press Spacebar to Restart", canvas.width / 2, canvas.height / 2 + 60);
            return;
        }

// Draw Paddle
        ctx.fillStyle = "#e94560";
        ctx.beginPath();
        ctx.roundRect(paddle.x, paddle.y, paddle.width, paddle.height, 5);
        ctx.fill();

// Draw Star/Ball
        ctx.fillStyle = "#f9d71c";
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
        ctx.fill();

// Draw HUD (Score & Lives)
        ctx.fillStyle = "#ffffff";
        ctx.font = "16px Arial";
        ctx.textAlign = "left";
        ctx.fillText(`Score: ${score}`, 15, 25);
        ctx.textAlign = "right";
        ctx.fillText(`Lives: ${lives}`, canvas.width - 15, 25);
    }

function loop() {
        update();
        draw();
        if (!gameOver) {
            requestAnimationFrame(loop);
        }
    }

// Start Game Loop
    loop();
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Catcher</title>
    <style>
        body {
            background-color: #1a1a2e;
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }