A game where you tilt your phone to get through the maze! This is a game in which you control a ball by tilting your phone to get through a maze. The ball stops moving when the phone is placed parallel to the ground.'s game

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

No:6617

239

←

Prev Next

→

A game where you tilt your phone to get through th..ALL
Developer もちきなこ｜Date and time 23/7/2 23:57:47
Build time 28.144 sec｜Game capacity 2.628KB｜

Script

以下は、スマホを傾けて迷路を抜けるゲームのHTMLファイルの実装例です。

このプログラムでは、スマホの傾きを利用してボールを操作し、迷路を抜けるゲームを実装しています。スマホの傾きは、`mousemove` イベントを使用して取得しています。ボールの位置は、傾きに応じて更新されます。なお、このプログラムはスマホでしか正常に動作しないため、デスクトップブラウザで実行しても効果はありません。また、一部のスマホブラウザで正確に傾きを検出できない場合があることに注意してください。

←

Prev　Next

→ 　

Back　

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

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

以下は、スマホを傾けて迷路を抜けるゲームのHTMLファイルの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>迷路ゲーム</title>
  <style>
    #maze {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: #EEE;
      border: 1px solid #AAA;
    }

#ball {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      transition: left 0.1s, top 0.1s;
    }
  </style>
</head>
<body>
  <div id="maze">
    <div id="ball"></div>
  </div>

var mazeWidth = maze.offsetWidth;
      var mazeHeight = maze.offsetHeight;
      var ballWidth = ball.offsetWidth;
      var ballHeight = ball.offsetHeight;

var x = mazeWidth / 2 - ballWidth / 2;
      var y = mazeHeight / 2 - ballHeight / 2;

function updateBallPosition(event) {
        var rotationX = event.beta;
        var rotationY = event.gamma;

x += rotationY / 10;
        y += rotationX / 10;

if (x < 0) {
          x = 0;
        } else if (x > mazeWidth - ballWidth) {
          x = mazeWidth - ballWidth;
        }

if (y < 0) {
          y = 0;
        } else if (y > mazeHeight - ballHeight) {
          y = mazeHeight - ballHeight;
        }

ball.style.left = x + "px";
        ball.style.top = y + "px";
      }

window.addEventListener("deviceorientation", updateBallPosition);

// ゲーム終了時にイベントリスナーを解除する
      window.addEventListener("devicemotion", function(event) {
        if (event.acceleration.x === null && event.acceleration.y === null && event.acceleration.z === null) {
          window.removeEventListener("deviceorientation", updateBallPosition);
        }
      });
    });
  </script>
</body>
</html>
```

このプログラムでは、スマホの傾きを利用してボールを操作し、迷路を抜けるゲームを実装しています。スマホの傾きは、`deviceorientation` イベントを使用して取得しています。ボールの位置は、傾きに応じて更新されます。

なお、このプログラムはスマホでしか正常に動作しないため、デスクトップブラウザで実行しても効果はありません。また、一部のスマホブラウザで正確に傾きを検出できない場合があることに注意してください。