AI game creator

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

No:10033

←

Prev Next

→

flappy bird
Developer User4467｜Date and time 23/7/28 22:21:35
Build time 26.269 sec｜Game capacity 3.326KB｜

Script

了解しました。以下にスマホで遊べるフラッピーバードの実装例を示します。

🐦

このプログラムでは、スマホでの操作を前提としています。画面をタップすると、鳥が上に飛ぶ動作が発生します。パイプを避けながら鳥を飛ばし続け、ゲームオーバーになるまでスコアを獲得するゲームです。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にスマホで遊べるフラッピーバードの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>フラッピーバード</title>
    <style>
        #container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            background-color: #69c;
        }
        #bird {
            position: absolute;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 32px;
        }
        #pipe {
            position: absolute;
            width: 80px;
        }
        .top {
            background-color: #8db;
            height: 250px;
        }
        .bottom {
            background-color: #8db;
            height: 350px;
        }
    </style>
</head>
<body>
    <div id="container">
        <span id="bird">🐦</span>
        <div id="pipe">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </div>

function moveBird() {
            bird.style.top = (parseInt(bird.style.top) - 10) + "px";
        }

function movePipe() {
            var pipeLeft = parseInt(pipe.style.left);
            pipe.style.left = (pipeLeft - 10) + "px";

if (pipeLeft <= -80) {
                pipe.style.left = "100%";
                updateScore();
            }

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

function updateScore() {
            score++;
            container.style.setProperty('--score', '"' + score + '"');
        }

function collisionDetection() {
            var birdTop = parseInt(bird.style.top);
            var pipeLeft = parseInt(pipe.style.left);
            var pipeTop = parseInt(pipe.style.top);
            var pipeBottom = parseInt(pipe.style.bottom);

if (birdTop <= 0 || birdTop >= (container.offsetHeight - bird.offsetHeight)) {
                return true;
            }

if (pipeLeft >= 20 && pipeLeft <= (bird.offsetWidth + 20)) {
                if (birdTop <= pipeTop || birdTop >= (pipeTop + pipe.offsetHeight - bird.offsetHeight)) {
                    return true;
                }
            }

return false;
        }

function gameOver() {
            clearInterval(gameLoop);
            alert("Game Over! Score: " + score);
            score = 0;
            container.style.setProperty('--score', '""');
            bird.style.top = "50%";
        }

document.addEventListener("click", function() {
            bird.style.top = (parseInt(bird.style.top) + 60) + "px";
        });

var gameLoop = setInterval(function() {
            moveBird();
            movePipe();
        }, 100);
    </script>
</body>
</html>
```