Random maze generation; NPCs are moving in the maze.'s game | AI game creator

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

No:2899

1089

Random maze generation; NPCs are moving in the maz..ALL
Developer User3641｜Date and time 23/6/23 1:52:52
Build time 67.455 sec｜Game capacity 6.514KB｜

ようなシンプルな迷路ゲームを作ってみました。以下がそのプログラムです。

このプログラムはHTMLとJavaScriptで実装されています。HTMLの部分は、迷路を表示するためのもので、JavaScriptの部分は、全体の処理を担当しています。なお、このプログラムはモバイル端末でも遊べるように、タッチイベントは対応していませんが、キーボードイベントによって操作することができます。プログラムの流れとしては、まずランダムで迷路を生成し、それをHTML上に描画します。プレイヤーとNPCは、それぞれ赤い円と青い円で表され、プレイヤーはキーボードで操作できます。NPCはランダムで動くようになっていて、プレイヤーと重なるとゲームオーバーになります。プレイヤーが迷路の最後のセルに到達すると、ゲームクリアになります。なお、このプログラムはあくまでシンプルなものであり、機能不足や改善の余地があると思われます。しかし、これをベースにして、より洗練された迷路ゲームを作ることもできるかもしれません。

→ 　

1　

0　

　
　
　
　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

ようなシンプルな迷路ゲームを作ってみました。以下がそのプログラムです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>迷路ゲーム</title>
  <style type="text/css">
    #gameArea {
      width: 100%;
      height: 100%;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #maze {
      width: 80vw;
      height: 80vh;
      display: grid;
      grid-template-columns: repeat(20, 1fr);
      grid-template-rows: repeat(20, 1fr);
    }
    .cell {
      border: 2px solid #fff;
      background-color: #333;
    }
    #player {
      width: 100%;
      height: 100%;
      background-color: #f00;
      border-radius: 50%;
    }
    .npc {
      width: 100%;
      height: 100%;
      background-color: #00f;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="maze"></div>
  </div>
  
  <script type="text/javascript">
    const mazeWidth = 20;
    const mazeHeight = 20;
    const cellWidth = 100 / mazeWidth;
    const cellHeight = 100 / mazeHeight;
    let maze = [];
    let playerRow = 0;
    let playerCol = 0;
    let player = null;
    let npc = null;
    let npcRow = 0;
    let npcCol = 0;
      
    function createMaze() {
      maze = [];
      for (let i = 0; i < mazeHeight; i++) {
        let row = [];
        for (let j = 0; j < mazeWidth; j++) {
          if (i === 0 || i === mazeHeight - 1 || j === 0 || j === mazeWidth - 1) {
            row.push(1);
          } else {
            row.push(Math.round(Math.random()));
          }
        }
        maze.push(row);
      }
      maze[1][0] = 0;
      maze[mazeHeight - 2][mazeWidth - 1] = 0;
    }
    
    function renderMaze() {
      const mazeEl = document.getElementById('maze');
      mazeEl.innerHTML = '';
      for (let i = 0; i < mazeHeight; i++) {
        for (let j = 0; j < mazeWidth; j++) {
          let cell = document.createElement('div');
          cell.setAttribute('class', 'cell');
          cell.setAttribute('style', `width: ${cellWidth}%; height: ${cellHeight}%;`);
          if (maze[i][j] === 1) {
            cell.classList.add('wall');
          }
          mazeEl.appendChild(cell);
        }
      }
      player = document.createElement('div');
      player.setAttribute('id', 'player');
      player.setAttribute('style', `width: ${cellWidth}%; height: ${cellHeight}%;`);
      mazeEl.appendChild(player);
      playerRow = 1;
      playerCol = 0;
      player.style.top = `${playerRow * cellHeight}%`;
      player.style.left = `${playerCol * cellWidth}%`;
      
      npc = document.createElement('div');
      npc.setAttribute('class', 'npc');
      npc.setAttribute('style', `width: ${cellWidth}%; height: ${cellHeight}%; top: ${npcRow * cellHeight}%; left: ${npcCol * cellWidth}%;`);
      mazeEl.appendChild(npc);
      setInterval(moveNPC, 500);
    }
    
    function movePlayer(event) {
      switch (event.keyCode) {
        case 37: // left
          if (playerCol > 0 && maze[playerRow][playerCol - 1] !== 1) {
            playerCol--;
            player.style.left = `${playerCol * cellWidth}%`;
          }
          break;
        case 39: // right
          if (playerCol < mazeWidth - 1 && maze[playerRow][playerCol + 1] !== 1) {
            playerCol++;
            player.style.left = `${playerCol * cellWidth}%`;
          }
          break;
        case 38: // up
          if (playerRow > 0 && maze[playerRow - 1][playerCol] !== 1) {
            playerRow--;
            player.style.top = `${playerRow * cellHeight}%`;
          }
          break;
        case 40: // down
          if (playerRow < mazeHeight - 1 && maze[playerRow + 1][playerCol] !== 1) {
            playerRow++;
            player.style.top = `${playerRow * cellHeight}%`;
          }
          break;
      }
      if (playerRow === npcRow && playerCol === npcCol) {
        alert('You lost!');
        createMaze();
        renderMaze();
      }
      if (playerRow === mazeHeight - 2 && playerCol === mazeWidth - 1) {
        alert('You won!');
        createMaze();
        renderMaze();
      }
    }
    
    function moveNPC() {
      const rand = Math.floor(Math.random() * 4);
      switch (rand) {
        case 0: // left
          if (npcCol > 0 && maze[npcRow][npcCol - 1] !== 1) {
            npcCol--;
            npc.style.left = `${npcCol * cellWidth}%`;
          }
          break;
        case 1: // right
          if (npcCol < mazeWidth - 1 && maze[npcRow][npcCol + 1] !== 1) {
            npcCol++;
            npc.style.left = `${npcCol * cellWidth}%`;
          }
          break;
        case 2: // up
          if (npcRow > 0 && maze[npcRow - 1][npcCol] !== 1) {
            npcRow--;
            npc.style.top = `${npcRow * cellHeight}%`;
          }
          break;
        case 3: // down
          if (npcRow < mazeHeight - 1 && maze[npcRow + 1][npcCol] !== 1) {
            npcRow++;
            npc.style.top = `${npcRow * cellHeight}%`;
          }
          break;
      }
      if (playerRow === npcRow && playerCol === npcCol) {
        alert('You lost!');
        createMaze();
        renderMaze();
      }
    }
    
    createMaze();
    renderMaze();
    document.addEventListener('keydown', movePlayer);
  </script>
</body>
</html>

このプログラムはHTMLとJavaScriptで実装されています。HTMLの部分は、迷路を表示するためのもので、JavaScriptの部分は、全体の処理を担当しています。なお、このプログラムはモバイル端末でも遊べるように、タッチイベントは対応していませんが、キーボードイベントによって操作することができます。

プログラムの流れとしては、まずランダムで迷路を生成し、それをHTML上に描画します。プレイヤーとNPCは、それぞれ赤い円と青い円で表され、プレイヤーはキーボードで操作できます。NPCはランダムで動くようになっていて、プレイヤーと重なるとゲームオーバーになります。プレイヤーが迷路の最後のセルに到達すると、ゲームクリアになります。

なお、このプログラムはあくまでシンプルなものであり、機能不足や改善の余地があると思われます。しかし、これをベースにして、より洗練された迷路ゲームを作ることもできるかもしれません。