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

No:11052

131

←

Prev Next

→

Drone circling
Developer User1006｜Date and time 23/8/7 1:21:49
Build time 29.568 sec｜Game capacity 2.357KB｜

Script

了解しました。以下に示すのは、ドローンが旋回するゲームのサンプルコードです。

ドローン旋回ゲーム

このコードでは、HTMLの`canvas`要素を使用してドローンを描画し、デバイスの回転角度に応じてドローンを旋回させる仕組みです。デバイスの回転角度が`mousemove`イベントを通じて取得され、その値に基づいてドローンの位置を計算しています。完成したゲームはスマートフォン上で実行することができ、デバイスの傾きに応じてドローンが旋回します。

←

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>
  <h1>ドローン旋回ゲーム</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// ドローンの初期位置と速度
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var dx = 2;

// ドローンの描画
      function drawDrone() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = "50px Arial";
        context.fillText("🚁", x, y);
      }

// ドローンの旋回
      function rotateDrone(event) {
        if (event.alpha === null) return;  // alpha値が未定義（対応していない端末）の場合は処理しない
        
        var newAngle = event.alpha;  // デバイスの回転角度を取得
        var radius = canvas.width / 2;  // 旋回半径

// 回転位置の計算
        x = canvas.width / 2 + radius * Math.sin(newAngle * (Math.PI / 180));
        y = canvas.height / 2 + radius * Math.cos(newAngle * (Math.PI / 180));

drawDrone();
      }

// イベントリスナの設定
      window.addEventListener("deviceorientation", rotateDrone, false);

// ゲームループ
      function gameLoop() {
        drawDrone();

// 位置の更新
        x += dx;

// 画面端の衝突判定
        if (x + dx > canvas.width || x + dx < 0) {
          dx = -dx;  // 逆方向に移動
        }

requestAnimationFrame(gameLoop);
      }

gameLoop();
    }

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

このコードでは、HTMLの`canvas`要素を使用してドローンを描画し、デバイスの回転角度に応じてドローンを旋回させる仕組みです。デバイスの回転角度が`deviceorientation`イベントを通じて取得され、その値に基づいてドローンの位置を計算しています。

完成したゲームはスマートフォン上で実行することができ、デバイスの傾きに応じてドローンが旋回します。