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

No:10778

You win if you escape the maze before the NPCs.
Developer User4376｜Date and time 23/8/3 0:19:33
Build time 37.639 sec｜Game capacity 3.139KB｜

Script

了解しました。以下に、要件に沿ったHTMLファイルの例を示します。

NPCより先に迷路を脱出せよ

このHTMLファイルでは、5x5の迷路が表示され、プレイヤーがキーボード操作で移動して迷路を脱出するゲームが実装されています。プレイヤーは「🚶」で、NPCは「🏁」で表示されます。プレイヤーがNPCより先に迷路を脱出すると、アラートが表示されてゲームクリアとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解しました。以下に、要件に沿ったHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NPCより先に迷路を脱出せよ</title>
</head>
<body>
  <h1>NPCより先に迷路を脱出せよ</h1>
  <div id="maze"></div>
  <div id="npc"></div>

// 初期位置
    let playerX = 0;
    let playerY = 0;
    let npcX = 4;
    let npcY = 1;

// 迷路の表示
    const mazeElement = document.getElementById("maze");
    mazeElement.style.display = "grid";
    mazeElement.style.gridTemplateColumns = `repeat(${maze[0].length}, 1fr)`;
    mazeElement.style.gap = "4px";

for (let y = 0; y < maze.length; y++) {
      for (let x = 0; x < maze[y].length; x++) {
        const cell = document.createElement("div");
        cell.style.aspectRatio = "1";
        cell.style.backgroundColor = maze[y][x] === "⛰️" ? "gray" : "white";
        cell.style.borderRadius = "50%";
        cell.style.display = "flex";
        cell.style.justifyContent = "center";
        cell.style.alignItems = "center";
        cell.textContent = maze[y][x];
        mazeElement.appendChild(cell);
      }
    }

// ゲームのメイン処理
    document.addEventListener("keydown", (event) => {
      switch (event.key) {
        case "ArrowUp":
          if (playerY > 0 && maze[playerY - 1][playerX] !== "⛰️") {
            playerY--;
          }
          break;
        case "ArrowDown":
          if (playerY < maze.length - 1 && maze[playerY + 1][playerX] !== "⛰️") {
            playerY++;
          }
          break;
        case "ArrowLeft":
          if (playerX > 0 && maze[playerY][playerX - 1] !== "⛰️") {
            playerX--;
          }
          break;
        case "ArrowRight":
          if (playerX < maze[playerY].length - 1 && maze[playerY][playerX + 1] !== "⛰️") {
            playerX++;
          }
          break;
      }

movePlayer();
      checkWin();
    });

function movePlayer() {
      const playerCell = mazeElement.children[playerY * maze[0].length + playerX];
      playerCell.textContent = "🚶";
    }

function checkWin() {
      if (playerX < npcX || (playerX === npcX && playerY < npcY)) {
        alert("NPCより先に迷路を脱出しました！おめでとう！");
      }
    }
  </script>
</body>
</html>
```