🌻バジルくん🌻を探そう！(OMORI) 【プレイヤーの操作方法】 * プレイヤーは🔪🎀🏀🍳です。🔪🎀🏀🍳は十字キーで移動できます。【ゲーム内容】 * 画面には🍉が5つ配置されています。🔪が🍉に接触すると、接触した🍉が消滅しますが、一つだけ🌻が表示されるものがあります。 * 🌻を表示させると「見付けてくれてありがとう」というテキストが表示されます。 * 画面の端には🎹が表示されています。🎹に接触すると「バジルくん🌻をみつけてね！」と表示されます。's game | AI game creator

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

No:5690

1335

🌻バジルくん🌻を探そう！(OMORI) 【プレイヤーの操作方法】 * プレイヤーは🔪🎀🏀🍳で..ALL
Developer もちきなこ｜Date and time 23/6/30 16:07:52
Build time 48.787 sec｜Game capacity 3.846KB｜

以下は、HTMLファイル内で実装されたバジルくんを探すゲームの例です。

🍉

🍉

🍉

🌻

🍉

このゲームでは、プレイヤー（🔪🎀🏀🍳）を十字キーで移動させ、画面上のメロン（🍉）に接触すると消え、一つだけ表示されるバジルくん（🌻）を見つけることが目的です。プレイヤーは画面上の端にあるピアノ（🎹）に接触することで、バジルくんの存在を知らせるメッセージが表示されます。このHTMLファイルをブラウザで開くと、ゲームがプレイできます。十字キーを押すとプレイヤーが移動し、メロンに接触すると消えます。バジルくんの位置に接触するか、バジルくんが表示されたメロンに接触すると、該当するメッセージが表示されます。なお、この例ではスマートフォンでの操作は前提にはしていませんが、ブラウザ標準のタッチイベントを利用すればスマートフォンでも遊ぶことができます。

→ 　

2　

1　

　
　
　
　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

以下は、HTMLファイル内で実装されたバジルくんを探すゲームの例です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>バジルくんを探そう！</title>
  <style>
    body {
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <script>
    // プレイヤーの初期位置
    let playerX = 0;
    let playerY = 0;
    
    // 画面上の要素を取得
    const player = document.getElementById("player");
    const melons = Array.from(document.getElementsByClassName("melon"));
    const message = document.getElementById("message");
    
    // プレイヤーの初期表示
    player.innerText = "🔪";
    player.style.gridRow = playerY + 1;
    player.style.gridColumn = playerX + 1;
    
    // ゲーム開始時にメロンの位置をランダムに設定
    melons.forEach((melon) => {
      melon.style.gridRow = Math.floor(Math.random() * 6) + 1;
      melon.style.gridColumn = Math.floor(Math.random() * 6) + 1;
    });
    
    // キーイベントのリスナーを追加
    document.addEventListener("keydown", (event) => {
      // 十字キーの押下に応じてプレイヤーの位置を更新
      switch (event.key) {
        case "ArrowUp": // 上
          playerY = Math.max(playerY - 1, 0);
          break;
        case "ArrowDown": // 下
          playerY = Math.min(playerY + 1, 5);
          break;
        case "ArrowLeft": // 左
          playerX = Math.max(playerX - 1, 0);
          break;
        case "ArrowRight": // 右
          playerX = Math.min(playerX + 1, 5);
          break;
      }
      
      // プレイヤーの位置を反映
      player.style.gridRow = playerY + 1;
      player.style.gridColumn = playerX + 1;
      
      // メロンとの接触判定
      melons.forEach((melon) => {
        if (
          parseInt(melon.style.gridRow) - 1 === playerY &&
          parseInt(melon.style.gridColumn) - 1 === playerX
        ) {
          melon.style.display = "none";
          if (melon.innerText === "🌻") {
            message.innerText = "見つけてくれてありがとう！";
          }
        }
      });
      
      // バジルくんのいる位置との接触判定
      if (
        (playerX === 0 && playerY === 2) ||
        (playerX === 5 && playerY === 2)
      ) {
        message.innerText = "バジルくん🌻を見つけてね！";
      }
    });
  </script>
  <div id="gameboard" style="display: grid; grid-template-columns: repeat(6, auto);">
    <div id="player"></div>
    <div class="melon">🍉</div>
    <div class="melon">🍉</div>
    <div class="melon">🍉</div>
    <div class="melon">🌻</div>
    <div class="melon">🍉</div>
    <div id="message"></div>
  </div>
</body>
</html>
```

このゲームでは、プレイヤー（🔪🎀🏀🍳）を十字キーで移動させ、画面上のメロン（🍉）に接触すると消え、一つだけ表示されるバジルくん（🌻）を見つけることが目的です。プレイヤーは画面上の端にあるピアノ（🎹）に接触することで、バジルくんの存在を知らせるメッセージが表示されます。

このHTMLファイルをブラウザで開くと、ゲームがプレイできます。十字キーを押すとプレイヤーが移動し、メロンに接触すると消えます。バジルくんの位置に接触するか、バジルくんが表示されたメロンに接触すると、該当するメッセージが表示されます。

なお、この例ではスマートフォンでの操作は前提にはしていませんが、ブラウザ標準のタッチイベントを利用すればスマートフォンでも遊ぶことができます。