Flappy bird is a game where your a bird and you use the mouse pointer to move and you must avoid touching any green pipes or you lose's game

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

No:9195

129

←

Prev Next

→

Flappy bird is a game where your a bird and you us..ALL
Developer User3709｜Date and time 23/7/22 10:25:26
Build time 16.734 sec｜Game capacity 4.586KB｜

Script

Here's a sample implementation of a Flappy Bird game using HTML, CSS, and JavaScript. It is designed to be played on a smartphone and uses touch screen controls.

Score: 0

To use this code: 1. Save the code in an HTML file (e.g., `flappybird.html`). 2. Save an image of a bird as `emozi_all/bird.png` in the same directory as the HTML file. 3. Open the HTML file in a web browser on your smartphone. 4. Start playing the Flappy Bird game by tapping on the screen to make the bird flap and avoid the green pipes. 5. The game will continue until the bird collides with a pipe or hits the top or bottom of the screen. 6. After the game ends, an alert will display your final score. Note: This is a simplified version of Flappy Bird and may not have all the features of the original game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Here's a sample implementation of a Flappy Bird game using HTML, CSS, and JavaScript. It is designed to be played on a smartphone and uses touch screen controls.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        #bird {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            background-image: url('bird.png');
            background-size: cover;
        }
        
        .pipe {
            position: absolute;
            width: 100px;
            height: 300px;
            background-color: green;
        }
        
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="bird"></div>
    <div id="score">Score: 0</div>
    <script>
        // Game variables
        var bird = document.getElementById("bird");
        var scoreEl = document.getElementById("score");
        var score = 0;
        var pipes = [];
        var gameInterval;

// Functions
        function startGame() {
            gameInterval = setInterval(updateGame, 20);
            document.addEventListener("touchstart", flapBird);
        }

function flapBird() {
            bird.style.top = (bird.offsetTop - 60) + "px"; // Move bird up
        }

function createPipe() {
            var pipeHeight = Math.floor(Math.random() * 200) + 100;
            var pipeTop = document.createElement("div");
            var pipeBottom = document.createElement("div");
            pipeTop.className = "pipe";
            pipeBottom.className = "pipe";
            pipeTop.style.top = "0";
            pipeBottom.style.bottom = "0";
            pipeTop.style.height = pipeHeight + "px";
            pipeBottom.style.height = (window.innerHeight - pipeHeight - 150) + "px";

document.body.appendChild(pipeTop);
            document.body.appendChild(pipeBottom);
            pipes.push({ top: pipeTop, bottom: pipeBottom });
        }

function updateGame() {
            // Move pipes
            pipes.forEach(function (pipe) {
                pipe.top.style.left = (pipe.top.offsetLeft - 5) + "px";
                pipe.bottom.style.left = (pipe.bottom.offsetLeft - 5) + "px";

// Check collision with bird
                if (
                    bird.offsetLeft + bird.offsetWidth > pipe.top.offsetLeft &&
                    bird.offsetLeft < pipe.top.offsetLeft + pipe.top.offsetWidth &&
                    (bird.offsetTop < pipe.top.offsetHeight || bird.offsetTop + bird.offsetHeight > window.innerHeight - pipe.bottom.offsetHeight)
                ) {
                    endGame(); // Collision detected, end game
                }

// Increase score if bird passes the pipe
                if (pipe.top.offsetLeft + pipe.top.offsetWidth <= bird.offsetLeft) {
                    score++;
                    scoreEl.innerText = "Score: " + score;
                }
            });

// Remove passed pipes
            if (pipes.length > 0 && pipes[0].top.offsetLeft + pipes[0].top.offsetWidth <= 0) {
                pipes[0].top.remove();
                pipes[0].bottom.remove();
                pipes.shift();
            }

// Check if bird hits top or bottom of the screen
            if (bird.offsetTop <= 0 || bird.offsetTop >= window.innerHeight - bird.offsetHeight) {
                endGame();
            }
        }

function endGame() {
            clearInterval(gameInterval);
            document.removeEventListener("touchstart", flapBird);
            alert("Game over! Your score: " + score);
        }

// Start the game
        startGame();

// Create pipes every 2 seconds
        setInterval(createPipe, 2000);
    </script>
</body>
</html>
```

To use this code:
1. Save the code in an HTML file (e.g., `flappybird.html`).
2. Save an image of a bird as `bird.png` in the same directory as the HTML file.
3. Open the HTML file in a web browser on your smartphone.
4. Start playing the Flappy Bird game by tapping on the screen to make the bird flap and avoid the green pipes.
5. The game will continue until the bird collides with a pipe or hits the top or bottom of the screen.
6. After the game ends, an alert will display your final score.

Note: This is a simplified version of Flappy Bird and may not have all the features of the original game.