Motion Sensor Alternative Games's game

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

No:7401

2323

←

Prev Next

→

Motion Sensor Alternative Games
Developer User3589｜Date and time 23/7/7 14:11:09
Build time 13.719 sec｜Game capacity 2.338KB｜

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>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// スマホの加速度センサーから取得した値を処理する関数
    function handleMotion(event) {
      // スマホの傾き方向に応じて、ボールの速度を更新
      ballSpeedX = event.accelerationIncludingGravity.x / 10;
      ballSpeedY = event.accelerationIncludingGravity.y / 10;
    }

// ゲーム画面の初期化と、ゲームループの設定
    function gameLoop() {
      // ゲーム画面の初期化
      let canvas = document.getElementById("gameCanvas");
      let context = canvas.getContext("2d");
      context.clearRect(0, 0, canvas.width, canvas.height);

// ボールの位置を更新
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// ボールが画面外に出ないように制御
      if (ballX < 0) {
        ballX = 0;
      }
      if (ballX > canvas.width) {
        ballX = canvas.width;
      }
      if (ballY < 0) {
        ballY = 0;
      }
      if (ballY > canvas.height) {
        ballY = canvas.height;
      }

// ボールを描画
      context.beginPath();
      context.arc(ballX, ballY, 20, 0, Math.PI * 2, false);
      context.fillStyle = "#FF0000";
      context.fill();
      context.closePath();

// 次のフレームに進む前にゲームループを再実行
      requestAnimationFrame(gameLoop);
    }

// モーションイベントのリスナーを追加
    window.addEventListener("devicemotion", handleMotion);

// ゲームループを開始
    gameLoop();
  </script>
</body>
</html>
```