Flappy bird where I am a bird continuously, moving forward. I tap the screen to jump, and I am trying to fit between the gap between two tubes one on the top of the screen and one of the bottom.'s game

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

No:10437

←

Prev Next

→

Flappy bird where I am a bird continuously, moving..ALL
Developer Micah｜Date and time 23/7/31 11:36:37
Build time 24.905 sec｜Game capacity 4.097KB｜

Script

Sure, here's a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript:

To use this code, save it as a `.html` file, and make sure to have an image file named "emozi_all/bird.png" in the same directory as the HTML file. Open the HTML file in a web browser, and you can play the Flappy Bird game by tapping the screen to make the bird jump and try to fit between the gap between the two tubes. The score will be displayed in the browser console, and the game will end if the bird hits the top or bottom of the game container or collides with the tubes.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            border: 2px solid black;
            margin: 0 auto;
            overflow: hidden;
        }

#bird {
            position: absolute;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background-image: url('bird.png');
            background-size: cover;
        }

.tube {
            position: absolute;
            width: 120px;
            height: 400px;
            background-color: green;
        }

#tube-top {
            top: 0;
        }

#tube-bottom {
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="bird"></div>
        <div id="tube-top" class="tube"></div>
        <div id="tube-bottom" class="tube"></div>
    </div>

var birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue("top"));
        var gameContainer = document.getElementById("game-container");
        var gameTimer;

// Start the game on tap
        gameContainer.addEventListener("click", function() {
            jump();
            startGame();
        });
        
        // Function to handle bird jump
        function jump() {
            bird.style.animation = "jump 0.6s";
            setTimeout(function() {
                bird.style.animation = "";
            }, 600);
        }

// Function to start the game
        function startGame() {
            var tubePosition = 400;
            var tubeGap = 200;
            var birdGravity = 2;
            var birdJump = 30;
            var score = 0;

bird.style.top = birdTop + "px";
            
            gameTimer = setInterval(function() {
                var birdTopNumeric = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));

// Check collision
                if (
                    birdTopNumeric <= 0 ||
                    birdTopNumeric + birdGravity >= gameContainer.offsetHeight ||
                    (birdTopNumeric + birdGravity >= tubePosition &&
                    birdTopNumeric + birdGravity <= tubePosition + tubeGap &&
                    tubeTop.offsetLeft <= 50)
                ) {
                    gameOver();
                } else {
                    tubePosition -= 10;
                    tubeTop.style.left = tubePosition + "px";
                    tubeBottom.style.left = tubePosition + "px";

// Increase score if bird passes the tubes
                    if (tubePosition === 200) {
                        score++;
                        console.log("Score:", score);
                    }

// Move the bird downwards
                    birdTop += birdGravity;
                    bird.style.top = birdTop + "px";
                }
            }, 30);
        }
        
        // Function to end the game
        function gameOver() {
            clearInterval(gameTimer);
            alert("Game Over! Your score: " + score);
            bird.style.top = "50%";
            startGame();
        }
    </script>
</body>
</html>
```

To use this code, save it as a `.html` file, and make sure to have an image file named "bird.png" in the same directory as the HTML file. Open the HTML file in a web browser, and you can play the Flappy Bird game by tapping the screen to make the bird jump and try to fit between the gap between the two tubes. The score will be displayed in the browser console, and the game will end if the bird hits the top or bottom of the game container or collides with the tubes.