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

No:7194

943

←

Prev Next

→

motion captur
Developer User3788｜Date and time 23/7/6 12:29:10
Build time 15.974 sec｜Game capacity 2.36KB｜

Script

了解しました！以下にモーションキャプチャのゲームを作成するためのHTMLファイルの実装例を示します。

Motion Capture Game

この例では、スマートフォンのジャイロセンサーを使用して、動きを検知し、円を描画します。モバイルデバイスでこのHTMLファイルを開いて、デバイスを傾けることで円が移動する様子を確認することができます。ご参考までに、上記のコードはHTMLとJavaScriptが1枚のファイルに含まれており、スクリプトタグで囲まれています。また、canvas要素を使用してグラフィックを描画しています。もしご希望のゲームが他にありましたら、お教えいただければと思います。

←

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>Motion Capture Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
  </style>
</head>
<body>
  <h1>Motion Capture Game</h1>
  <canvas id="game-canvas" width="400" height="400"></canvas>

function drawCircle() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(positionX, positionY, radius, 0, Math.PI * 2);
      context.fillStyle = 'yellow';
      context.fill();
      context.closePath();
    }

function updatePosition(event) {
      const { gamma, beta } = event.accelerationIncludingGravity;

positionX += gamma / 10;
      positionY += beta / 10;

if (positionX < radius) {
        positionX = radius;
      } else if (positionX > canvas.width - radius) {
        positionX = canvas.width - radius;
      }

if (positionY < radius) {
        positionY = radius;
      } else if (positionY > canvas.height - radius) {
        positionY = canvas.height - radius;
      }

drawCircle();
    }

function initializeMotionCapture() {
      if (window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', updatePosition);
      }
    }

initializeMotionCapture();
  </script>
</body>
</html>
```

この例では、スマートフォンのジャイロセンサーを使用して、動きを検知し、円を描画します。モバイルデバイスでこのHTMLファイルを開いて、デバイスを傾けることで円が移動する様子を確認することができます。

ご参考までに、上記のコードはHTMLとJavaScriptが1枚のファイルに含まれており、スクリプトタグで囲まれています。また、canvas要素を使用してグラフィックを描画しています。

もしご希望のゲームが他にありましたら、お教えいただければと思います。