AI game creator

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

No:47324

←

Prev Next

→

Flappy bird
Developer User18896｜Date and time 24/2/28 1:06:15
Build time 17.382 sec｜Game capacity 4.038KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird Game</title>
    <style>
        #gameContainer {
            width: 400px;
            height: 600px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        #bird {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            left: 50px;
            bottom: 50%;
        }
        .pipe {
            width: 50px;
            height: 300px;
            background-color: green;
            position: absolute;
            top: 0;
        }
        .pipe.bottom {
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="bird"></div>
        <div id="score">0</div>
    </div>
    <script>
        window.onload = function() {
            const bird = document.getElementById('bird');
            let birdBottom = 250;
            let gravity = 2;
            let isGameOver = false;
            const gameContainer = document.getElementById('gameContainer');
            let gameTimerId;
            let score = 0;

function startGame() {
                if (gameTimerId) {
                    clearInterval(gameTimerId);
                }
                gameTimerId = setInterval(gameLoop, 20);
            }

function gameLoop() {
                birdBottom -= gravity;
                bird.style.bottom = birdBottom + 'px';

if (birdBottom <= 0) {
                    gameOver();
                }

const pipes = document.querySelectorAll('.pipe');
                pipes.forEach(function(pipe) {
                    checkCollision(bird, pipe);
                });

score++;
                document.getElementById('score').innerText = score;
            }

function createPipe() {
                const pipe = document.createElement('div');
                pipe.classList.add('pipe');
                const gap = 200;
                const height = Math.random() * 300;
                pipe.style.height = height + 'px';

gameContainer.appendChild(pipe);

setTimeout(() => {
                    pipe.remove();
                }, 5000);

movePipe(pipe, gap);
            }

function movePipe(pipe, gap) {
                let pipeLeft = 400;
                let randomOffset = Math.floor(Math.random() * 220) - 110;
                pipe.style.left = pipeLeft + 'px';

let pipeTimerId = setInterval(() => {
                    if (pipeLeft <= -50) {
                        pipe.remove();
                        clearInterval(pipeTimerId);
                    }

pipeLeft -= 2;
                    pipe.style.left = pipeLeft + 'px';

if (pipeLeft === 200) {
                        createPipe();
                    }
                }, 20);
            }

function checkCollision(bird, pipe) {
                const birdRect = bird.getBoundingClientRect();
                const pipeRect = pipe.getBoundingClientRect();

if (
                    birdRect.bottom > pipeRect.top &&
                    birdRect.top < pipeRect.bottom &&
                    birdRect.right > pipeRect.left &&
                    birdRect.left < pipeRect.right
                ) {
                    gameOver();
                }
            }

function gameOver() {
                clearInterval(gameTimerId);
                isGameOver = true;
                alert(`Game over! Your score is: ${score}`);
            }

document.addEventListener('keydown', function(event) {
                if (event.keyCode === 32 && !isGameOver) {
                    birdBottom += 50;
                }
            });

createPipe();
            startGame();
        }
    </script>
</body>
</html>