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

No:4986

←

Prev Next

→

Lost Forest
Developer User3806｜Date and time 23/6/29 6:00:54
Build time 32.291 sec｜Game capacity 3.197KB｜

Script

この要件に基づいて、以下のようなゲームを作成しました。

迷いの森

スマホを傾けてキャラクターを操作し、迷いの森を抜けましょう。

このゲームでは、「迷いの森」というタイトルの迷路ゲームをプレイします。スマートフォンを傾けることでキャラクターを操作し、迷路の出口へと進みます。迷路の出口に到達すると、「抜け出しました！おめでとう！」とメッセージが表示されます。キャラクターとして🌳の絵文字を使用しています。注意：このゲームは「mousemove」イベントを使用しており、ユーザーがスマートフォンを傾けたり回転させたりできる環境が必要です。デスクトップでは動作しません。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

この要件に基づいて、以下のようなゲームを作成しました。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>迷いの森</title>
</head>
<body>
  <h1>迷いの森</h1>
  <p>スマホを傾けてキャラクターを操作し、迷いの森を抜けましょう。</p>
  <p id="message"></p>
  <div id="gameArea"></div>

// キャラクターの初期位置
    let characterX = 50;
    let characterY = 50;

// ゲームエリアのサイズ（スマホ画面に合わせて調整）
    const gameAreaWidth = window.innerWidth;
    const gameAreaHeight = window.innerHeight;

gameArea.style.width = gameAreaWidth + "px";
    gameArea.style.height = gameAreaHeight + "px";
    gameArea.style.backgroundColor = "lightgreen";

// キャラクターを表示
    const character = document.createElement("span");
    character.style.fontFamily = "Arial, sans-serif";
    character.style.fontSize = "40px";
    character.innerText = "🌳";
    character.style.position = "absolute";
    character.style.top = characterY + "px";
    character.style.left = characterX + "px";
    gameArea.appendChild(character);

// スマホの傾きを検知してキャラクターを移動
    window.addEventListener("deviceorientation", handleOrientation);

function handleOrientation(event) {
      const gamma = event.gamma; // 傾き（左右の傾き）
      const beta = event.beta; // 傾き（前後の傾き）

characterX += gamma;
      characterY += beta;

if (characterX < 0) characterX = 0;
      if (characterY < 0) characterY = 0;
      if (characterX + character.offsetWidth > gameAreaWidth) characterX = gameAreaWidth - character.offsetWidth;
      if (characterY + character.offsetHeight > gameAreaHeight) characterY = gameAreaHeight - character.offsetHeight;

character.style.top = characterY + "px";
      character.style.left = characterX + "px";

checkVictory();
    }

// 勝利判定
    function checkVictory() {
      if (characterX > gameAreaWidth / 2 && characterY > gameAreaHeight / 2) {
        message.innerText = "抜け出しました！おめでとう！";
        window.removeEventListener("deviceorientation", handleOrientation);
      }
    }
  </script>
</body>
</html>
```

このゲームでは、「迷いの森」というタイトルの迷路ゲームをプレイします。スマートフォンを傾けることでキャラクターを操作し、迷路の出口へと進みます。

迷路の出口に到達すると、「抜け出しました！おめでとう！」とメッセージが表示されます。

キャラクターとして🌳の絵文字を使用しています。

注意：このゲームは「deviceorientation」イベントを使用しており、ユーザーがスマートフォンを傾けたり回転させたりできる環境が必要です。デスクトップでは動作しません。