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

No:12007

←

Prev Next

→

flappy bird
Developer User5019｜Date and time 23/8/13 13:24:53
Build time 15.387 sec｜Game capacity 2.969KB｜

Script

フラッピーバード

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>フラッピーバード</title>
    <style>
        #game {
            position: relative;
            width: 400px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            overflow: hidden;
        }

#bird {
            position: absolute;
            top: 50%;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: yellow;
            border-radius: 50%;
        }

#pipe {
            position: absolute;
            width: 80px;
            background-color: green;
            bottom: 0;
        }

.score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>フラッピーバード</h1>
    <div id="game">
        <div id="bird"></div>
        <div id="pipe"></div>
        <div class="score">0</div>
    </div>

function jump() {
                velocity -= 1.5;
            }

function update() {
                velocity += gravity;
                bird.style.top = bird.offsetTop + velocity + "px";

if (bird.offsetTop >= game.offsetHeight - bird.offsetHeight) {
                    gameOver();
                }

if (pipe.offsetLeft <= 0) {
                    pipe.style.left = game.offsetWidth + "px";
                    score++;
                    scoreElement.innerHTML = score;
                }

if (collisionDetection()) {
                    gameOver();
                }

pipe.style.left = pipe.offsetLeft - 5 + "px";

requestAnimationFrame(update);
            }

function collisionDetection() {
                var birdRect = bird.getBoundingClientRect();
                var pipeRect = pipe.getBoundingClientRect();

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

return false;
            }

function gameOver() {
                pipe.style.left = game.offsetWidth + "px";
                velocity = 0;
                bird.style.top = game.offsetHeight / 2 - bird.offsetHeight / 2 + "px";
                score = 0;
                scoreElement.innerHTML = score;
            }

document.addEventListener("keydown", jump);
            game.addEventListener("click", jump);

update();
        }
    </script>
</body>
</html>