Artificial intelligence goes through a maze's game

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

No:15088

←

Prev Next

→

Artificial intelligence goes through a maze
Developer User6503｜Date and time 23/9/6 3:45:18
Build time 31.297 sec｜Game capacity 2.049KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
        display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  </style>
</head>
<body>
<script>
// Maze Game

var maze = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
  [1, 1, 1, 0, 1, 1, 1, 1, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

var player = { x: 1, y: 1 };

// Function to render the maze
function renderMaze() {
  var output = "";
  for (var i = 0; i < maze.length; i++) {
    output += "<div class='row'>";
    for (var j = 0; j < maze[i].length; j++) {
      if (maze[i][j] === 1) {
        output += "<div class='wall'></div>";
      } else if (player.x === j && player.y === i) {
        output += "<div class='player'></div>";
      } else {
        output += "<div class='empty'></div>";
      }
    }
    output += "</div>";
  }
  document.getElementById("maze").innerHTML = output;
}

// Function to handle key presses
function handleKeyPress(e) {
  var newPlayerX = player.x;
  var newPlayerY = player.y;

switch (e.keyCode) {
    case 37: // Left arrow key
      newPlayerX = player.x - 1;
      break;
    case 38: // Up arrow key
      newPlayerY = player.y - 1;
      break;
    case 39: // Right arrow key
      newPlayerX = player.x + 1;
      break;
    case 40: // Down arrow key
      newPlayerY = player.y + 1;
      break;
    default:
      return;
  }

// Check if the new position is valid
  if (maze[newPlayerY][newPlayerX] === 0) {
    player.x = newPlayerX;
    player.y = newPlayerY;
    renderMaze();
  }

// Check if the player reached the end of the maze
  if (player.x === maze[0].length - 2 && player.y === maze.length - 2) {
    alert("Congratulations! You reached the end of the maze.");
    document.removeEventListener("keydown", handleKeyPress);
  }
}

// Start the game
document.addEventListener("keydown", handleKeyPress);
renderMaze();
</script>
</body>
</html>