Flappy bird where you play as a yellow circle and you tap on screen to jump, if you collide into the green pipes(green boxes) you die. There is a score board on top of screem's game

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

No:43558

←

Prev Next

→

Flappy bird where you play as a yellow circle and ..ALL
Developer User19162｜Date and time 24/2/16 3:09:26
Build time 13.663 sec｜Game capacity 4.011KB｜

Script

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

To play the game, you can copy the entire code into a single HTML file and open it in a web browser on your smartphone or any other device with a web browser. Tap the screen to make the yellow circle (the bird) jump. Avoid colliding with the green pipes. Your score will be displayed on the top of the screen, and the game will end if you collide with a pipe.

←

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 with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Initialization
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

score = 0;

bird = {
                x: 50,
                y: canvas.height / 2,
                radius: 20,
                gravity: 0.6,
                velocity: 0,
                jump: 12,
                draw: function() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.fillStyle = "yellow";
                    ctx.fill();
                    ctx.closePath();
                }
            };

pipes = [];
            pipes[0] = {
                x: canvas.width,
                y: 0,
                width: 50,
                height: Math.random() * canvas.height / 2 + 50,
                draw: function() {
                    ctx.fillStyle = "green";
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }
            };

// Event listeners
            canvas.addEventListener("click", function() {
                bird.velocity -= bird.jump;
            });

// Start game loop
            setInterval(gameLoop, 30);
        }

// Game loop
        function gameLoop() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move bird
            bird.velocity += bird.gravity;
            bird.y += bird.velocity;

// Draw bird
            bird.draw();

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

if (pipes[i].x === canvas.width / 2) {
                    pipes.push({
                        x: canvas.width,
                        y: 0,
                        width: 50,
                        height: Math.random() * canvas.height / 2 + 50
                    });
                }

if (pipes[i].x + pipes[i].width < 0) {
                    pipes.splice(i, 1);
                }

// Collision detection
                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 ||
                        bird.y + bird.radius > pipes[i].y + pipes[i].height)
                ) {
                    // Game over
                    restartGame();
                    return;
                }

// Increase score if bird passes through pipes
                if (pipes[i].x === bird.x - pipes[i].width) {
                    score++;
                }

pipes[i].draw();
            }

// Draw score
            ctx.fillStyle = "black";
            ctx.font = "24px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Restart game
        function restartGame() {
            alert("Game Over. Your Score: " + score);
            location.reload();
        }

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