A Flappy Bird Type Game's game

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

No:47602

←

Prev Next

→

A Flappy Bird Type Game
Developer User20579｜Date and time 24/2/28 21:31:56
Build time 13.84 sec｜Game capacity 3.223KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <title>Flappy Bird Game</title>
    <style>
        #gameArea {
            width: 400px;
            height: 600px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        #bird {
            width: 50px;
            height: 50px;
            background: url('bird.png');
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .pipe {
            width: 100px;
            height: 600px;
            background: green;
            position: absolute;
        }
        .pipe.top {
            top: -600px;
        }
        .pipe.bottom {
            bottom: -600px;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="bird"></div>
    </div>

document.addEventListener('click', () => {
            if (!isGameOver) {
                jump();
            }
        });

function jump() {
            let position = 0;

gameTimer = setInterval(() => {
                if (position === 150) {
                    clearInterval(gameTimer);
                }

bird.style.top = position + 'px';
                position += 5;

let pipes = document.querySelectorAll('.pipe');
                pipes.forEach(pipe => {
                    if (checkCollision(bird, pipe)) {
                        gameOver();
                    }
                });
            }, 20);
        }

function createPipes() {
            let pipeGap = 200;
            let pipePosition = 0;

for (let i = 0; i < 6; i++) {
                pipePosition = pipeGap * i;
                createPipe(pipePosition);
            }
        }

function createPipe(pipePosition) {
            let pipe = document.createElement('div');
            pipe.style.left = gameArea.clientWidth + 'px';
            pipe.style.top = pipePosition + 'px';
            pipe.classList.add('pipe');

gameArea.appendChild(pipe);
        }

function movePipes() {
            let pipes = document.querySelectorAll('.pipe');
            pipes.forEach(pipe => {
                pipe.style.left = parseInt(pipe.style.left) - 2 + 'px';

if (parseInt(pipe.style.left) <= -100) {
                    pipe.remove();
                    createPipe(0);
                }
            });
        }

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

return (
                birdRect.top < pipeRect.bottom &&
                birdRect.right > pipeRect.left &&
                birdRect.bottom > pipeRect.top &&
                birdRect.left < pipeRect.right
            );
        }

function gameOver() {
            isGameOver = true;
            clearInterval(gameTimer);
            alert('Game Over!');
        }

createPipes();
        setInterval(movePipes, 20);
    </script>
</body>
</html>