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

No:21590

←

Prev Next

→

ぽけもんgoを応用したゲーム
Developer User9913｜Date and time 23/10/16 18:12:50
Build time 122.159 sec｜Game capacity 3.279KB｜

Script

了解しました。以下にぽけもんgoを応用したゲームの実装例を示します。

ぽけもんGO

スマホを傾けてぽけもんをゲットしよう！

このゲームでは、スマートフォンの傾き（加速度）を取得し、ぽけもんを操作します。画面の中央にぽけもんを表示し、スマートフォンの傾きに応じてぽけもんの位置を更新します。ぽけもんが画面の中央に入った場合、ポケモンをゲットしたとみなしてアラートを表示し、ゲームを終了します。注意：このゲームは、スマートフォンでのみ動作します。モバイルブラウザで開いてスマートフォンを傾けて遊んでみてください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下にぽけもんgoを応用したゲームの実装例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ぽけもんGO</title>
  <style>
    body {
      background-color: lightblue;
      text-align: center;
    }
    #map {
      width: 300px;
      height: 300px;
      border: 2px solid darkblue;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h1>ぽけもんGO</h1>
  <p>スマホを傾けてぽけもんをゲットしよう！</p>
  <div id="map"></div>

// 画面の幅と高さ
    let screenWidth, screenHeight;

// 画面の幅と高さを取得する関数
    function getScreenSize() {
      screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }

// 画面の幅と高さを取得する
    getScreenSize();

// ぽけもんの座標を更新する関数
    function updatePokemonPosition(event) {
      let x = event.accelerationIncludingGravity.x;
      let y = event.accelerationIncludingGravity.y;

// スマホの傾きを計算
      let newX = pokemonX + x;
      let newY = pokemonY - y;

// ぽけもんが画面内に収まるように調整
      if (newX < 0) {
        newX = 0;
      } else if (newX > screenWidth) {
        newX = screenWidth;
      }

if (newY < 0) {
        newY = 0;
      } else if (newY > screenHeight) {
        newY = screenHeight;
      }

pokemonX = newX;
      pokemonY = newY;

// ぽけもんの位置を更新
      const map = document.getElementById("map");
      map.style.left = pokemonX + "px";
      map.style.top = pokemonY + "px";

// ぽけもんをゲットした場合の処理
      const centerX = pokemonX + 50;
      const centerY = pokemonY + 50;
      if (centerX >= screenWidth / 2 - 50 && centerX <= screenWidth / 2 + 50 && centerY >= screenHeight / 2 - 50 && centerY <= screenHeight / 2 + 50) {
        alert("ぽけもんをゲットしました！");
        document.removeEventListener("devicemotion", updatePokemonPosition);
      }
    }

// ぽけもんを初期位置に表示
    const map = document.getElementById("map");
    map.style.left = pokemonX + "px";
    map.style.top = pokemonY + "px";

// スマホの傾きを検知してぽけもんの位置を更新するイベントリスナーを追加
    document.addEventListener("devicemotion", updatePokemonPosition);
  </script>
</body>
</html>
```

このゲームでは、スマートフォンの傾き（加速度）を取得し、ぽけもんを操作します。画面の中央にぽけもんを表示し、スマートフォンの傾きに応じてぽけもんの位置を更新します。ぽけもんが画面の中央に入った場合、ポケモンをゲットしたとみなしてアラートを表示し、ゲームを終了します。

注意：このゲームは、スマートフォンでのみ動作します。モバイルブラウザで開いてスマートフォンを傾けて遊んでみてください。