flappy bird with a flying bird's game

Click here for free DL of the app version that can save data.

No:37145

←

Prev Next

→

flappy bird with a flying bird
Developer User17003｜Date and time 24/1/20 13:45:35
Build time 12.881 sec｜Game capacity 4.39KB｜

Script

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript:

You can copy the above code into an HTML file (e.g., `flappy_bird.html`) and open it in a web browser to play the game. The game can be played by clicking anywhere on the screen to make the bird jump and avoid the pipes. The score is displayed at the top left corner of the canvas, and if the bird collides with a pipe or hits the ground, the game ends and a "Game Over" message is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="480" height="320"></canvas>

// Initialize the game
        function init() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");

birdX = 50;
            birdY = canvas.height / 2;
            gravity = 0.5;
            jumpForce = 7;
            gapHeight = 85;
            gapPosition = canvas.width;
            score = 0;
            gameover = false;

pipes = [];
            pipes.push({
                x: canvas.width,
                y: 0
            });

// Event listener for jump action
            canvas.addEventListener("click", function () {
                birdY -= jumpForce;
            });

// Start the game loop
            gameLoop();
        }

// Update game objects
        function update() {
            if (!gameover) {
                // Move bird
                birdY += gravity;

// Move pipes
                for (var i = 0; i < pipes.length; i++) {
                    pipes[i].x--;

// Check collision with bird
                    if (birdX + 40 >= pipes[i].x && birdX <= pipes[i].x + 50 && (birdY <= pipes[i].y + 320 || birdY + 24 >= pipes[i].y + gapHeight + 80) || birdY + 24 >= canvas.height) {
                        gameover = true;
                    }

// Pass the pipe, increase score
                    if (pipes[i].x == birdX - 10) {
                        score++;
                    }

// Remove passed pipes
                    if (pipes[i].x <= -50) {
                        pipes.splice(i, 1);
                    }
                }

// Add new pipe
                if (gapPosition % 90 == 0) {
                    pipes.push({
                        x: canvas.width,
                        y: Math.floor(Math.random() * (canvas.height - gapHeight))
                    });
                }

// Increment gap position
                gapPosition--;

// Reset gap position
                if (gapPosition == 0) {
                    gapPosition = canvas.width;
                }
            }
        }

// Render game objects
        function render() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Render bird
            ctx.fillStyle = "yellow";
            ctx.fillRect(birdX, birdY, 40, 24);

// Render pipes
            ctx.fillStyle = "green";
            for (var i = 0; i < pipes.length; i++) {
                ctx.fillRect(pipes[i].x, pipes[i].y, 50, canvas.height);
                ctx.fillRect(pipes[i].x, pipes[i].y + gapHeight + 80, 50, canvas.height);
            }

// Render score
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 25);

// Render game over message
            if (gameover) {
                ctx.fillStyle = "red";
                ctx.font = "40px Arial";
                ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2 - 20);
            }
        }

// Game loop
        function gameLoop() {
            update();
            render();

if (!gameover) {
                requestAnimationFrame(gameLoop);
            }
        }

// Start the game
        init();
    </script>
</body>
</html>
```