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

No:42977

101

←

Prev Next

→

Maze generator
Developer User19028｜Date and time 24/2/13 16:11:07
Build time 11.045 sec｜Game capacity 2.831KB｜

Script

Sure! Here's an example of a maze generator implemented as a single HTML file using JavaScript:

Maze Game

This code generates a maze using a simple algorithm called Recursive Backtracking, and displays it using HTML elements (divs) and CSS styling. The resulting maze will be displayed on the screen when you open the HTML file in a browser.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a maze generator implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #maze {
      display: inline-block;
      margin-top: 20px;
      border: 1px solid black;
    }
    .cell {
      width: 20px;
      height: 20px;
      background-color: white;
      display: inline-block;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Maze Game</h1>
  
  <div id="maze"></div>
  
  <script>
    var mazeSize = 15;
    var maze = generateMaze(mazeSize);
  
    function generateMaze(size) {
      var maze = [];
  
      // Initialize maze cells
      for (var i = 0; i < size; i++) {
        var row = [];
        for (var j = 0; j < size; j++) {
          row.push(1);
        }
        maze.push(row);
      }
  
      // Generate maze paths
      var stack = [];
      var current = { x: 0, y: 0 };
      maze[current.y][current.x] = 0;
  
      while (true) {
        var directions = [
          { x: 0, y: -2 },
          { x: 2, y: 0 },
          { x: 0, y: 2 },
          { x: -2, y: 0 }
        ];
  
        var validDirections = [];
  
        for (var direction of directions) {
          var nextX = current.x + direction.x;
          var nextY = current.y + direction.y;
  
          if (nextX >= 0 && nextX < size && nextY >= 0 && nextY < size && maze[nextY][nextX] == 1) {
            validDirections.push(direction);
          }
        }
  
        if (validDirections.length > 0) {
          stack.push(current);
  
          var randomDirection = validDirections[Math.floor(Math.random() * validDirections.length)];
          var nextX = current.x + randomDirection.x;
          var nextY = current.y + randomDirection.y;
  
          maze[nextY][nextX] = 0;
          maze[current.y + (randomDirection.y / 2)][current.x + (randomDirection.x / 2)] = 0;
          current = { x: nextX, y: nextY };
        } else if (stack.length > 0) {
          current = stack.pop();
        } else {
          break;
        }
      }
  
      return maze;
    }
  
    // Render the maze
    var mazeContainer = document.getElementById("maze");
  
    for (var row of maze) {
      for (var cell of row) {
        var cellElement = document.createElement("div");
        cellElement.className = "cell";
        if (cell === 1) {
          cellElement.style.backgroundColor = "black";
        }
        mazeContainer.appendChild(cellElement);
      }
    }
  </script>
</body>
</html>
```