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 Knockoff</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #70c5ce;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid #000;
            background-color: #70c5ce;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        let bird = { x: 50, y: 150, width: 30, height: 30, gravity: 0.6, lift: -15, velocity: 0 };
        let pipes = [];
        let frame = 0;
        let score = 0;
        let gameOver = false;

        function drawBird() {
            ctx.fillStyle = 'yellow';
            ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
        }

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

        function updatePipes() {
            if (frame % 75 === 0) {
                const top = Math.random() * (canvas.height / 2);
                const bottom = Math.random() * (canvas.height / 2);
                pipes.push({ x: canvas.width, top, bottom, width: 40 });
            }
            pipes.forEach(pipe => {
                pipe.x -= 2;
            });
            if (pipes.length && pipes[0].x < -pipes[0].width) {
                pipes.shift();
                score++;
            }
        }

        function checkCollision() {
            for (let pipe of pipes) {
                if (bird.x < pipe.x + pipe.width && bird.x + bird.width > pipe.x) {
                    if (bird.y < pipe.top || bird.y + bird.height > canvas.height - pipe.bottom) {
                        gameOver = true;
                    }
                }
            }
            if (bird.y + bird.height >= canvas.height || bird.y < 0) {
                gameOver = true;
            }
        }

        function resetGame() {
            bird.y = 150;
            bird.velocity = 0;
            pipes = [];
            score = 0;
            frame = 0;
            gameOver = false;
        }

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

        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (!gameOver) {
                bird.velocity += bird.gravity;
                bird.y += bird.velocity;

                drawBird();
                drawPipes();
                updatePipes();
                checkCollision();
                drawScore();
            } else {
                ctx.fillStyle = 'red';
                ctx.font = '30px Arial';
                ctx.fillText('Game Over!', 100, canvas.height / 2);
                ctx.fillText('Press Space to Restart', 70, canvas.height / 2 + 40);
            }
            frame++;
            requestAnimationFrame(gameLoop);
        }

        document.addEventListener('keydown', (event) => {
            if (event.code === 'Space') {
                if (gameOver) {
                    resetGame();
                } else {
                    bird.velocity = bird.lift;
                }
            }
        });

        gameLoop();
    </script>
</body>
</html>
Editor is loading...