Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Canvas Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #70c5ce;
        }
        canvas {
            border: 2px solid #000;
        }
    </style>
</head>
<body>

<canvas id="flappyBirdCanvas" width="320" height="480"></canvas>

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

    const bird = {
        x: 50,
        y: 200,
        width: 20,
        height: 20,
        gravity: 0.6,
        lift: -15,
        velocity: 0
    };

    const pipes = [];
    const pipeWidth = 50;
    const pipeGap = 100;
    let pipeFrequency = 90; // Time between pipes
    let score = 0;

    // Game loop
    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw bird
        bird.velocity += bird.gravity;
        bird.y += bird.velocity;

        ctx.fillStyle = '#ff0';
        ctx.fillRect(bird.x, bird.y, bird.width, bird.height);

        // Draw pipes
        if (Math.random() < 0.02) {
            const pipeHeight = Math.floor(Math.random() * (canvas.height - pipeGap));
            pipes.push({ x: canvas.width, y: pipeHeight });
        }

        pipes.forEach((pipe, index) => {
            pipe.x -= 2;
            ctx.fillStyle = '#008000';

            // Top pipe
            ctx.fillRect(pipe.x, 0, pipeWidth, pipe.y);

            // Bottom pipe
            ctx.fillRect(pipe.x, pipe.y + pipeGap, pipeWidth, canvas.height - pipe.y - pipeGap);

            // Remove pipes that go out of bounds
            if (pipe.x + pipeWidth < 0) {
                pipes.splice(index, 1);
                score++;
            }

            // Collision detection
            if (pipe.x < bird.x + bird.width && pipe.x + pipeWidth > bird.x) {
                if (bird.y < pipe.y || bird.y + bird.height > pipe.y + pipeGap) {
                    endGame();
                }
            }
        });

        // Ground collision
        if (bird.y + bird.height > canvas.height) {
            endGame();
        }

        // Draw score
        ctx.fillStyle = '#000';
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 30);

        requestAnimationFrame(gameLoop);
    }

    // Bird control (up when clicked)
    canvas.addEventListener('click', () => {
        bird.velocity = bird.lift;
    });

    // End game
    function endGame() {
        alert('Game Over! Score: ' + score);
        bird.y = 200;
        bird.velocity = 0;
        pipes.length = 0;
        score = 0;
    }

    gameLoop(); // Start game loop

</script>

</body>
</html>
Editor is loading...