A fun bird-themed jumping game that responds to spacebar and mouse clicks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sky Hopper</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-3xl font-bold mb-4">Sky Hopper</h1>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <p class="mt-4 text-lg">Press spacebar or click to jump!</p>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Bird
        let bird = {
            x: 50,
            y: 300,
            velocity: 0,
            gravity: 0.5,
            jump: -10,
            radius: 20
        };

        // Pipes
        let pipes = [];
        const pipeWidth = 50;
        const pipeGap = 150;

        // Game state
        let score = 0;
        let gameOver = false;

        function drawBird() {
            ctx.beginPath();
            ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
            ctx.fillStyle = 'yellow';
            ctx.fill();
            ctx.closePath();
        }

        function drawPipes() {
            pipes.forEach(pipe => {
                ctx.fillStyle = 'green';
                ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top);
                ctx.fillRect(pipe.x, pipe.bottom, pipeWidth, canvas.height - pipe.bottom);
            });
        }

        function drawScore() {
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

        function update() {
            if (gameOver) return;

            // Update bird position
            bird.velocity += bird.gravity;
            bird.y += bird.velocity;

            // Generate new pipes
            if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
                let pipeY = Math.random() * (canvas.height - pipeGap) + pipeGap / 2;
                pipes.push({
                    x: canvas.width,
                    top: pipeY - pipeGap / 2,
                    bottom: pipeY + pipeGap / 2
                });
            }

            // Move pipes
            pipes.forEach(pipe => {
                pipe.x -= 2;
            });

            // Remove off-screen pipes
            if (pipes[0].x < -pipeWidth) {
                pipes.shift();
                score++;
            }

            // Check collisions
            pipes.forEach(pipe => {
                if (
                    bird.x + bird.radius > pipe.x &&
                    bird.x - bird.radius < pipe.x + pipeWidth &&
                    (bird.y - bird.radius < pipe.top || bird.y + bird.radius > pipe.bottom)
                ) {
                    gameOver = true;
                }
            });

            // Check if bird is out of bounds
            if (bird.y + bird.radius > canvas.height || bird.y - bird.radius < 0) {
                gameOver = true;
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBird();
            drawPipes();
            drawScore();

            if (gameOver) {
                ctx.fillStyle = 'black';
                ctx.font = '48px Arial';
                ctx.fillText('Game Over!', canvas.width / 2 - 100, canvas.height / 2);
            }
        }

        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        function jump() {
            if (!gameOver) {
                bird.velocity = bird.jump;
            } else {
                // Reset game
                bird.y = 300;
                bird.velocity = 0;
                pipes = [];
                score = 0;
                gameOver = false;
            }
        }

        // Event listeners
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') jump();
        });

        canvas.addEventListener('click', jump);

        gameLoop();
    </script>
</body>
</html>

SPARKS

Sky Hopper