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

No:4803

2615

←

Prev Next

→

スマホを傾けて迷路を抜けろ！スマホを傾けてボールを操作し、迷路を抜けるゲームです。スマホを地..ALL
Developer もちきなこ｜Date and time 23/6/28 21:42:10
Build time 30.425 sec｜Game capacity 2.883KB｜

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>
        #maze {
            width: 300px;
            height: 300px;
            background-color: #EEE;
            position: relative;
            overflow: hidden;
        }
        #ball {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
    <script>
        window.addEventListener('deviceorientation', handleOrientation);

var maze = document.getElementById('maze');
        var ball = document.getElementById('ball');

var mazeWidth = maze.offsetWidth;
        var mazeHeight = maze.offsetHeight;

var ballSize = ball.offsetWidth;
        var ballX = (mazeWidth - ballSize) / 2;
        var ballY = (mazeHeight - ballSize) / 2;

function handleOrientation(event) {
            var x = event.beta;  // スマホの傾きの角度（縦方向）
            var y = event.gamma; // スマホの傾きの角度（横方向）

// スマホを平行に置いた場合、ボールの移動を停止
            if (x > -5 && x < 5 && y > -5 && y < 5) {
                ball.style.left = ballX + 'px';
                ball.style.top = ballY + 'px';
                return;
            }

// ボールの新しい位置を計算
            ballX += y * 0.1;
            ballY += x * 0.1;

// ボールが迷路からはみ出さないように制限
            ballX = Math.max(0, Math.min(mazeWidth - ballSize, ballX));
            ballY = Math.max(0, Math.min(mazeHeight - ballSize, ballY));

// ボールの位置を更新
            ball.style.left = ballX + 'px';
            ball.style.top = ballY + 'px';

// ゴールに到達したかチェック
            if (ballX >= mazeWidth - ballSize && ballY >= mazeHeight - ballSize) {
                alert('ゴール！');
                resetGame();
            }
        }

function resetGame() {
            ballX = (mazeWidth - ballSize) / 2;
            ballY = (mazeHeight - ballSize) / 2;
            ball.style.left = ballX + 'px';
            ball.style.top = ballY + 'px';
        }
    </script>
</head>
<body>
    <h1>迷路ゲーム</h1>
    <div id="maze">
        <div id="ball"></div>
    </div>
</body>
</html>
```