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

No:6693

148

←

Prev Next

→

Save me, light, revive me!
Developer User3788｜Date and time 23/7/3 4:51:29
Build time 36.653 sec｜Game capacity 3.458KB｜

Script

了解しました。以下に、スマホ操作前提のシンプルな迷路ゲームを実装してみます。

迷路ゲーム

このプログラムは、5x5の迷路が表示され、スマホの矢印キーでプレイヤーを操作し、ゴールを目指す迷路ゲームです。指示された処理を実行しており、実際に遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、スマホ操作前提のシンプルな迷路ゲームを実装してみます。

```html
<!DOCTYPE html>
<html>
<head>
  <title>迷路ゲーム</title>
  <meta charset="UTF-8">
  <style>
    body, button {
      font-size: 48px;
      text-align: center;
    }
    #maze {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-gap: 10px;
      margin-top: 50px;
    }
    .cell {
      background-color: white;
      border: 2px solid black;
      border-radius: 10px;
      width: 100px;
      height: 100px;
    }
    .player {
      background-color: yellow;
      border-color: red;
    }
    .goal {
      background-color: green;
    }
  </style>
</head>
<body>
  <h1>迷路ゲーム</h1>
  <div id="maze"></div>
  <button onclick="restart()">リスタート</button>
  
  <script>
    const mazeSize = 5;
    let playerPosition;
    
    function createMaze() {
      const maze = document.getElementById("maze");
      
      for (let i = 0; i < mazeSize; i++) {
        for (let j = 0; j < mazeSize; j++) {
          const cell = document.createElement("div");
          cell.className = "cell";
          
          if (i === 0 && j === 0) {
            cell.className += " player";  // プレイヤーの初期位置
            playerPosition = {x: i, y: j};
          } else if (i === mazeSize - 1 && j === mazeSize - 1) {
            cell.className += " goal";  // ゴールの位置
          }
          
          maze.appendChild(cell);
        }
      }
    }
    
    function movePlayer(event) {
      let newPosition;
      
      switch (event.keyCode) {
        case 37:  // 左
          newPosition = {x: playerPosition.x, y: playerPosition.y - 1};
          break;
        case 38:  // 上
          newPosition = {x: playerPosition.x - 1, y: playerPosition.y};
          break;
        case 39:  // 右
          newPosition = {x: playerPosition.x, y: playerPosition.y + 1};
          break;
        case 40:  // 下
          newPosition = {x: playerPosition.x + 1, y: playerPosition.y};
          break;
        default:
          return;
      }
      
      if (isValidMove(newPosition)) {
        const currentCell = getCell(playerPosition.x, playerPosition.y);
        const newCell = getCell(newPosition.x, newPosition.y);
        
        currentCell.classList.remove("player");
        newCell.classList.add("player");
        
        playerPosition = newPosition;
      }
      
      if (playerPosition.x === mazeSize - 1 && playerPosition.y === mazeSize - 1) {
        alert("ゴールしました！");
      }
    }
    
    function isValidMove(position) {
      return position.x >= 0 && position.x < mazeSize &&
        position.y >= 0 && position.y < mazeSize &&
        !getCell(position.x, position.y).classList.contains("goal");
    }
    
    function getCell(x, y) {
      return document.getElementsByClassName("cell")[x * mazeSize + y];
    }
    
    function restart() {
      document.getElementById("maze").innerHTML = "";
      createMaze();
    }
    
    createMaze();
    window.addEventListener("keydown", movePlayer);
  </script>
</body>
</html>
```