Flappy bird remake where you dodge pipes and you get 1 point every time you pass a pipe without getting hit. When you start the game, you have a home screen that says FLAPPY BIRD and you need to press start to start game. If you hit pipe, you get game over and get sent to title screen again. You tap the screen to jump once.'s game

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

No:43916

114

←

Prev Next

→

Flappy bird remake where you dodge pipes and you g..ALL
Developer User19162｜Date and time 24/2/17 1:04:03
Build time 21.532 sec｜Game capacity 6.315KB｜

Script

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

Score: 0

FLAPPY BIRD

Game Over!

Please note that you need to have an image file named "emozi_all/bird.png" in the same directory as the HTML file for the bird's graphics to display properly. You can replace this image with your own flappy bird image or use any other suitable image. To play the game, simply open the HTML file in a web browser, and you can control the bird by tapping/clicking on the screen to make it jump. The objective is to avoid hitting the pipes and earn points by passing through them. Good luck and have fun playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird</title>
<style>
    #game {
        position: relative;
        width: 400px;
        height: 600px;
        border: 1px solid #000;
        margin: 0 auto;
        overflow: hidden;
    }
    
    #bird {
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url('bird.png');
        background-size: cover;
        top: 50%;
        left: 50px;
        transform: translateY(-50%);
    }
    
    .pipe {
        position: absolute;
        width: 100px;
        height: 400px;
        background-color: #5fcde4;
    }
    
    #score {
        position: absolute;
        top: 10px;
        right: 10px;
        font-family: Arial; 
        font-size: 24px;
    }
    
    #start-screen {
        position: absolute;
        top: 200px;
        left: 100px;
        width: 200px;
        height: 200px;
        text-align: center;
        font-family: Arial;
        font-size: 32px;
    }
    
    #game-over-screen {
        position: absolute;
        top: 200px;
        left: 100px;
        width: 200px;
        height: 200px;
        text-align: center;
        font-family: Arial;
        font-size: 32px;
    }
</style>
</head>
<body>
<div id="game">
    <div id="bird"></div>
    <div id="score">Score: 0</div>
    <div id="start-screen">
        <p>FLAPPY BIRD</p>
        <button id="start-button">Start</button>
    </div>
    <div id="game-over-screen">
        <p>Game Over!</p>
        <button id="restart-button">Restart</button>
    </div>
</div>

// Start game
    document.getElementById('start-button').addEventListener('click', function() {
        startGame();
    });

// Restart game
    document.getElementById('restart-button').addEventListener('click', function() {
        restartGame();
    });

// Event listener for player interaction
    document.addEventListener('click', function(event) {
        if (gameStarted && !gameover) {
            jump();
        }
    });

// Start the game
    function startGame() {
        document.getElementById('start-screen').style.display = 'none';
        gameStarted = true;
        pipes.push(createPipe());
        movePipes();
    }

// Restart the game
    function restartGame() {
        document.getElementById('game-over-screen').style.display = 'none';
        gameover = false;
        score = 0;
        document.getElementById('score').textContent = 'Score: ' + score;
        bird.style.top = '50%';
        bird.style.transform = 'translateY(-50%)';
        pipes = [];
        pipes.push(createPipe());
        movePipes();
    }

// Update bird position
    function updateBirdPosition() {
        let currentTop = parseFloat(bird.style.top) || 0;
        let newTop = currentTop + 2;
        bird.style.top = newTop + '%';
    }

// Jump
    function jump() {
        bird.style.transition = 'top 0.4s';
        bird.style.top = '-10%';
        setTimeout(function() {
            bird.style.transition = '';
        }, 400);
    }

// Create pipe
    function createPipe() {
        let pipe = document.createElement('div');
        pipe.classList.add('pipe');
        pipe.style.left = '100%';
        pipe.style.top = Math.floor(Math.random() * (400 - 200 + 1)) + 200 + 'px';
        document.getElementById('game').appendChild(pipe);
        return pipe;
    }

// Move pipes
    function movePipes() {
        if (!gameover) {
            let gameWidth = document.getElementById('game').offsetWidth;
            pipes.forEach(function(pipe) {
                let currentLeft = parseFloat(pipe.style.left) || 0;
                let newLeft = currentLeft - 2;
                if (newLeft < -100) {
                    score++;
                    document.getElementById('score').textContent = 'Score: ' + score;
                    pipe.remove();
                    pipes.splice(pipes.indexOf(pipe), 1);
                } else {
                    pipe.style.left = newLeft + 'px';
                    if (isCollision(pipe)) {
                        endGame();
                    }
                }
            });
            if (gameStarted) {
                if (birdIsOnScreen() && !isCollision()) {
                    updateBirdPosition();
                } else {
                    endGame();
                }
                requestAnimationFrame(movePipes);
            }
        }
    }

// Check collision
    function isCollision(pipe) {
        let birdRect = bird.getBoundingClientRect();
        let pipeRect = pipe ? pipe.getBoundingClientRect() : null;
        if (pipeRect) {
            return (
                birdRect.top < pipeRect.top + pipeRect.height &&
                birdRect.right > pipeRect.left &&
                birdRect.left < pipeRect.right &&
                birdRect.bottom > pipeRect.top
            );
        } else {
            return (
                birdRect.bottom > 0 ||
                birdRect.top < document.getElementById('game').offsetHeight
            );
        }
    }

// Check if bird is on screen
    function birdIsOnScreen() {
        let birdRect = bird.getBoundingClientRect();
        return (
            birdRect.top > 0 &&
            birdRect.bottom < document.getElementById('game').offsetHeight
        );
    }

// End game
    function endGame() {
        gameover = true;
        gameStarted = false;
        document.getElementById('game-over-screen').style.display = 'block';
    }
</script>
</body>
</html>
```

Please note that you need to have an image file named "bird.png" in the same directory as the HTML file for the bird's graphics to display properly. You can replace this image with your own flappy bird image or use any other suitable image.

To play the game, simply open the HTML file in a web browser, and you can control the bird by tapping/clicking on the screen to make it jump. The objective is to avoid hitting the pipes and earn points by passing through them. Good luck and have fun playing!