AI game creator

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

No:6793

101

←

Prev Next

→

running high jump
Developer User3898｜Date and time 23/7/3 18:37:08
Build time 24.806 sec｜Game capacity 2.646KB｜

Script

以下は、1枚のHTMLファイルとして実装された走り高跳びゲームの例です。

🏃

このゲームでは、スマホの傾きを利用して走り高跳びのゲームをプレイします。画面上に表示されるランナーをスマホの傾きに応じて左右に移動させ、バーを避けるようにします。バーとランナーが衝突すると、「ゲームオーバー！」とアラートが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

以下は、1枚のHTMLファイルとして実装された走り高跳びゲームの例です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走り高跳びゲーム</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 72px;
        }

#runner {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: yellow;
            text-align: center;
        }

#bar {
            position: absolute;
            top: -200px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 10px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="runner">🏃</div>
    <div id="bar"></div>

function handleOrientation(event) {
            var x = event.beta;   // 前後の傾斜 (度)
            var y = event.gamma;  // 左右の傾斜 (度)
            
            var runner = document.getElementById("runner");
            var bar = document.getElementById("bar");
            
            // ランナーの移動
            runner.style.left = (50 + y * 2) + "%";
            
            // バーの移動
            bar.style.top = (-200 + x * 5) + "px";
            
            // ランナーとバーの衝突判定
            if (isCollide(runner, bar)) {
                alert("ゲームオーバー！");
                // ゲームオーバー時の処理を実装することも可能です
            }
        }

function isCollide(runner, bar) {
            var runnerRect = runner.getBoundingClientRect();
            var barRect = bar.getBoundingClientRect();
            
            return !(
                runnerRect.right < barRect.left || 
                runnerRect.left > barRect.right || 
                runnerRect.bottom < barRect.top || 
                runnerRect.top > barRect.bottom
            );
        }
    </script>
</body>
</html>
```