AI game creator

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

No:4685

1392

←

Prev Next

→

quadcopter
Developer User3796｜Date and time 23/6/28 16:55:30
Build time 25.579 sec｜Game capacity 2.21KB｜

Script

了解です。クワッドコプターのゲームを作成しましょう。以下はHTMLファイルの実装例です。

🚁

このHTMLファイルをブラウザで開くと、クワッドコプター（絵文字のヘリコプター）が表示され、スマホの傾きに連動して移動します。画面内を移動し、壁や画面外にぶつからないように操作してください。ただし、スマホの傾きイベントは、実際のスマートフォンのみで動作します。ブラウザのデベロッパーツールのエミュレーションでは傾きイベントは発生しないため、実際のスマートフォンで試してみてください。

←

Prev　Next

→ 　

Back　

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

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

了解です。クワッドコプターのゲームを作成しましょう。以下はHTMLファイルの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>クワッドコプターゲーム</title>
    <style>
        #quadcopter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div id="quadcopter">🚁</div>

// スマホの傾きイベントを監視してクワッドコプターを移動させる
        window.addEventListener('deviceorientation', (event) => {
            // 加速度センサの傾き値を取得
            let beta = event.beta;
            let gamma = event.gamma;

// 傾き値を位置に反映
            posX += gamma * 5;
            posY += beta * 5;

// 移動範囲を制限
            if (posX < 0) posX = 0;
            if (posX > window.innerWidth) posX = window.innerWidth;
            if (posY < 0) posY = 0;
            if (posY > window.innerHeight) posY = window.innerHeight;

// 位置を更新
            quadcopter.style.left = posX + 'px';
            quadcopter.style.top = posY + 'px';
        });
    </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、クワッドコプター（絵文字のヘリコプター）が表示され、スマホの傾きに連動して移動します。画面内を移動し、壁や画面外にぶつからないように操作してください。

ただし、スマホの傾きイベントは、実際のスマートフォンのみで動作します。ブラウザのデベロッパーツールのエミュレーションでは傾きイベントは発生しないため、実際のスマートフォンで試してみてください。