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</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="flappyCanvas" width="480" height="320"></canvas>
    <script>
        // Get the canvas and context
        var canvas = document.getElementById("flappyCanvas");
        var ctx = canvas.getContext("2d");

        // Flappy Bird properties
        var bird = { x: 50, y: canvas.height / 2, radius: 20, color: "#FF5733", velocityY: 0 };

        // Gravity and jump force
        var gravity = 1.5;
        var jumpForce = -15;

        // Pipes properties
        var pipes = [];

        // Game loop
        function gameLoop() {
            // Update
            bird.velocityY += gravity;
            bird.y += bird.velocityY;

            // Check if the bird hits the ground
            if (bird.y + bird.radius > canvas.height) {
                bird.y = canvas.height - bird.radius;
                bird.velocityY = 0;
            }

            // Check if the bird hits the top
            if (bird.y - bird.radius < 0) {
                bird.y = bird.radius;
                bird.velocityY = 0;
            }

            // Generate pipes
            if (Math.random() < 0.02) {
                pipes.push({ x: canvas.width, y: Math.random() * (canvas.height - 100) + 50, width: 30, height: Math.random() * 150 + 50 });
            }

            // Move pipes
            for (var i = pipes.length - 1; i >= 0; i--) {
                pipes[i].x -= 3;

                // Remove pipes that go offscreen
                if (pipes[i].x + pipes[i].width < 0) {
                    pipes.splice(i, 1);
                }

                // Check for collision with pipes
                if (
                    bird.x + bird.radius > pipes[i].x &&
                    bird.x - bird.radius < pipes[i].x + pipes[i].width &&
                    (bird.y + bird.radius > pipes[i].y + pipes[i].height || bird.y - bird.radius < pipes[i].y)
                ) {
                    // Game over
                    alert("Game Over!");
                    resetGame();
                }
            }

            // Draw
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw bird
            ctx.beginPath();
            ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
            ctx.fillStyle = bird.color;
            ctx.fill();
            ctx.closePath();

            // Draw pipes
            for (var i = 0; i < pipes.length; i++) {
                ctx.fillStyle = "#333";
                ctx.fillRect(pipes[i].x, 0, pipes[i].width, pipes[i].y);
                ctx.fillRect(pipes[i].x, pipes[i].y + pipes[i].height, pipes[i].width, canvas.height - pipes[i].y - pipes[i].height);
            }

            // Call the game loop recursively
            requestAnimationFrame(gameLoop);
        }

        // Handle key press (jump)
        window.addEventListener("keydown", function (e) {
            if (e.keyCode === 32) {
                bird.velocityY = jumpForce;
            }
        });

        // Reset the game
        function resetGame() {
            bird.y = canvas.height / 2;
            bird.velocityY = 0;
            pipes = [];
        }

        // Start the game loop
        gameLoop();
    </script>
</body>
</html>
Editor is loading...