Flappy bird in one day's game

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

No:23549

←

Prev Next

→

Flappy bird in one day
Developer User10994｜Date and time 23/11/1 18:20:02
Build time 52.725 sec｜Game capacity 4.126KB｜

Script

Here's an example of implementing a simple Flappy Bird game using HTML, CSS, and JavaScript enclosed in script tags:

This is a basic implementation of the Flappy Bird game using HTML, CSS, and JavaScript. The bird is represented by a pictogram where you can replace it with your own bird icon. The game starts automatically and you can control the bird by clicking on the screen to make it jump. The goal is to avoid colliding with the green pipes and try to get the highest score.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Here's an example of implementing a simple Flappy Bird game using HTML, CSS, and JavaScript enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#flappy-bird {
            position: relative;
            width: 50px;
            height: 50px;
            background-image: url('bird-icon.png'); /* Replace with your bird icon */
            background-size: contain;
        }

.pipe {
            position: absolute;
            width: 75px;
            height: 100%;
            background-color: green;
            animation: pipeMovement 4s infinite linear;
            bottom: 0;
        }

@keyframes pipeMovement {
            0% { left: 100%; }
            100% { left: -75px; }
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: Arial, sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px #000;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="flappy-bird"></div>
        <div id="score">0</div>
    </div>

function startGame() {
            bird.style.top = '50%';
            currentScore = 0;
            isGameOver = false;
            score.textContent = currentScore;

gameLoop = setInterval(function () {
                var birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue('top'));
                var height = gameContainer.clientHeight;
                
                if (birdTop <= 0 || birdTop >= height - 50) {
                    endGame();
                }

var pipes = document.getElementsByClassName('pipe');
                for (var i = 0; i < pipes.length; i++) {
                    var pipe = pipes[i];
                    var pipeLeft = parseInt(window.getComputedStyle(pipe).getPropertyValue('left'));

if (pipeLeft === 10) {
                        currentScore++;
                        score.textContent = currentScore;
                    }

if (pipeLeft < -75) {
                        pipe.parentElement.removeChild(pipe);
                    }

if (pipeLeft <= 35 && pipeLeft >= -25 && birdTop <= 35 || birdTop >= height - 85) {
                        endGame();
                    }
                }
            }, 10);
        }

function createPipes() {
            var pipe = document.createElement('div');
            pipe.classList.add('pipe');
            pipe.style.left = '100%';
            gameContainer.appendChild(pipe);
        }

function endGame() {
            clearInterval(gameLoop);
            isGameOver = true;
        }

document.addEventListener('DOMContentLoaded', function () {
            startGame();
            setInterval(createPipes, 3000);
        });

document.addEventListener('click', function () {
            jump();
        });
    </script>
</body>
</html>
```