A game with a flying bird's game

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

No:72

379

←

Prev Next

→

A game with a flying bird
Developer anonymous｜Date and time 23/5/11 23:23:26
Build time 47.889 sec｜Game capacity 2.378KB｜

Script

スタート

このアプリは「飛ぶ鳥のゲーム」という簡単なゲームです。プレイヤーは画面中央にある鳥をタップすると、３秒間上に飛びます。それを繰り返して、できるだけ高く飛ばすことが目的です。スマホで操作が前提となっています。画像を使っていないので、データ通信による外部ドメインへのアクセスはありません。また、遷移処理もありません。ゲーム説明は以上になります。さあ、プレイしてみましょう！

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>飛ぶ鳥のゲーム</title>
    <style>
        body {
            background-color: #7EC0EE;
            margin: 0;
            padding: 0;
        }
        #bird {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #F08080;
            border-radius: 50%;
            cursor: pointer;
            animation: fly 3s forwards;
        }
        #play {
            position: absolute;
            top: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            color: white;
            cursor: pointer;
            border: 2px solid white;
            border-radius: 30px;
            padding: 10px 20px;
        }
        @keyframes fly {
            0% {
                top: 50%;
            }
            50% {
                top: 10%;
            }
            100% {
                top: 50%;
            }
        }
    </style>
</head>
<body>
    <div id="bird"></div>
    <div id="play">スタート</div>
    <script>
        const bird = document.getElementById("bird");
        const play = document.getElementById("play");
        let isPlaying = false;

play.addEventListener("click", () => {
            if (!isPlaying) {
                isPlaying = true;
                bird.style.animationPlayState = "running";
                play.style.display = "none";
            }
        });

bird.addEventListener("animationend", () => {
            isPlaying = false;
            bird.style.animationPlayState = "paused";
            play.style.display = "block";
        });
    </script>
</body>
</html>