かんたんなゲーム's game

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

No:20224

←

Prev Next

→

かんたんなゲーム
Developer User8984｜Date and time 23/10/8 21:40:14
Build time 14.8 sec｜Game capacity 1.978KB｜

Script

了解しました。以下は簡単なゲームの実装例です。

🎾

このプログラムでは、スマホの傾きを利用して操作するボールを表示します。スマホを傾けるとボールがその方向に移動し、画面の端に当たると跳ね返ります。ボールの位置はCSSの変数を使用して更新され、ゲームループごとに次のフレームが描画されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下は簡単なゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>簡単なゲーム</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <script>
        // ボールの初期位置
        let x = 50;
        let y = 50;

// ボールの移動量
        let dx = 3;
        let dy = 3;

// ゲームループ
        function gameLoop() {
            // ボールの位置を更新
            x += dx;
            y += dy;

// スマホが傾いた角度を取得
            window.addEventListener('deviceorientation', function (event) {
                // 傾きの値を調整し、移動量に反映
                dx = event.gamma / 25;
                dy = event.beta / 25;
            });

// 画面からはみ出さないように制御
            if (x < 0 || x > window.innerWidth - 50) {
                dx *= -1;
            }
            if (y < 0 || y > window.innerHeight - 50) {
                dy *= -1;
            }

// ボールの表示位置を更新
            document.body.style.setProperty("--x", `${x}px`);
            document.body.style.setProperty("--y", `${y}px`);

// 次のフレームを描画
            requestAnimationFrame(gameLoop);
        }

// ゲーム開始
        gameLoop();
    </script>
    <div class="ball">🎾</div>
</body>
</html>
```