AI game creator

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

No:36657

←

Prev Next

→

Flappy Bird
Developer User16822｜Date and time 24/1/18 6:57:02
Build time 10.564 sec｜Game capacity 2.982KB｜

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</title>
    <style>
        #game {
            position: absolute;
            width: 320px;
            height: 480px;
            border: 2px solid black;
        }
        #bird {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FFA500;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
        }
        .pipe {
            position: absolute;
            width: 60px;
            height: 320px;
            background-color: #008000;
        }
        #pipe1 {
            top: -320px;
        }
        #pipe2 {
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="bird"></div>
        <div id="pipe1" class="pipe"></div>
        <div id="pipe2" class="pipe"></div>
    </div>

var gameStarted = false;
            var gameInterval;
            var score = 0;

function startGame() {
                gameStarted = true;
                gameInterval = setInterval(updateGame, 20);
                document.addEventListener("keydown", flap);
            }

function updateGame() {
                var birdTop = parseInt(getComputedStyle(bird).top);
                var pipe1Left = parseInt(getComputedStyle(pipe1).left);
                var pipe2Left = parseInt(getComputedStyle(pipe2).left);

// Check collision
                if ((birdTop < 0 || birdTop > 430) || ((birdTop < pipe1.offsetHeight || birdTop > (pipe1.offsetHeight + 100))
                    && ((85 > pipe1Left && pipe1Left > 35) || (85 > pipe2Left && pipe2Left > 35)))) {
                    clearInterval(gameInterval);
                    gameStarted = false;
                    alert("Game Over! Score: " + score);
                    location.reload();
                } else {
                    if (pipe1Left < 0) {
                        pipe1.style.left = "320px";
                        score++;
                    }
                    if (pipe2Left < 0) {
                        pipe2.style.left = "320px";
                        score++;
                    }
                    pipe1.style.left = (pipe1Left - 2) + "px";
                    pipe2.style.left = (pipe2Left - 2) + "px";
                }
            }

function flap(e) {
                if (gameStarted && (e.keyCode === 32 || e.keyCode === 38)) {
                    bird.style.top = (bird.offsetTop - 50) + "px";
                }
            }

game.onclick = function() {
                startGame();
            };
        };
    </script>
</body>
</html>