AI game creator

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

No:42978

←

Prev Next

→

Maze generator
Developer User19028｜Date and time 24/2/13 16:11:34
Build time 16.728 sec｜Game capacity 4.413KB｜

Script

Sure, here is a simple maze generator game implemented as a single HTML file using JavaScript:

To use this code, save it in a new HTML file and open it in a web browser. The maze will be displayed, and you can use the arrow keys to move the player (represented by a pictogram) to reach the goal (also represented by a pictogram). Please note that you need to replace `emozi_himawari.png` and `emozi_cat.png` with actual images for the player and goal pictograms. You can adjust the `MAZE_SIZE` and `CELL_SIZE` variables to change the size of the maze and individual cells if desired.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here is a simple maze generator game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Generator Game</title>
  <style>
    #maze {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
      height: 400px;
    }
    .cell {
      box-sizing: border-box;
      width: calc(100% / 20);
      height: calc(100% / 20);
      border: 1px solid black;
    }
    .player {
      background-image: url(player_icon.png);
      background-size: cover;
    }
    .goal {
      background-image: url(goal_icon.png);
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="maze"></div>

// Maze representation
    const maze = [];

// Player position
    let playerX = 0;
    let playerY = 0;

// Goal position
    let goalX = MAZE_SIZE - 1;
    let goalY = MAZE_SIZE - 1;

// Initialize maze
    for (let y = 0; y < MAZE_SIZE; y++) {
      maze[y] = [];
      for (let x = 0; x < MAZE_SIZE; x++) {
        maze[y][x] = true;
      }
    }

// Generate maze using recursive backtracking algorithm
    const generateMaze = (x, y) => {
      maze[y][x] = false;

const directions = [
        { dx: 1, dy: 0 }, // Right
        { dx: -1, dy: 0 }, // Left
        { dx: 0, dy: 1 }, // Down
        { dx: 0, dy: -1 } // Up
      ];

shuffleArray(directions);

for (let i = 0; i < 4; i++) {
        const { dx, dy } = directions[i];
        const nextX = x + dx;
        const nextY = y + dy;

if (nextX >= 0 && nextY >= 0 && nextX < MAZE_SIZE && nextY < MAZE_SIZE && maze[nextY][nextX]) {
          const middleX = x + dx / 2;
          const middleY = y + dy / 2;

maze[middleY][middleX] = false;
          generateMaze(nextX, nextY);
        }
      }
    };

// Shuffle array in place using Fisher-Yates algorithm
    const shuffleArray = (array) => {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    };

// Render maze
    const renderMaze = () => {
      const mazeContainer = document.getElementById('maze');
      mazeContainer.innerHTML = '';

for (let y = 0; y < MAZE_SIZE; y++) {
        for (let x = 0; x < MAZE_SIZE; x++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');

if (x === playerX && y === playerY) {
            cell.classList.add('player');
          } else if (x === goalX && y === goalY) {
            cell.classList.add('goal');
          }

if (!maze[y][x]) {
            cell.style.backgroundColor = 'white';
          }

mazeContainer.appendChild(cell);
        }
      }
    };

// Handle keyboard input for player movement
    document.addEventListener('keydown', (event) => {
      const key = event.key;

let newPlayerX = playerX;
      let newPlayerY = playerY;

if (key === 'ArrowUp' && playerY > 0 && !maze[playerY - 1][playerX]) {
        newPlayerY--;
      } else if (key === 'ArrowDown' && playerY < MAZE_SIZE - 1 && !maze[playerY + 1][playerX]) {
        newPlayerY++;
      } else if (key === 'ArrowLeft' && playerX > 0 && !maze[playerY][playerX - 1]) {
        newPlayerX--;
      } else if (key === 'ArrowRight' && playerX < MAZE_SIZE - 1 && !maze[playerY][playerX + 1]) {
        newPlayerX++;
      }

if (newPlayerX !== playerX || newPlayerY !== playerY) {
        playerX = newPlayerX;
        playerY = newPlayerY;
        renderMaze();

if (playerX === goalX && playerY === goalY) {
          alert('Congratulations! You reached the goal!');
          // Game completed logic here...
        }
      }
    });

// Generate and render the maze
    generateMaze(0, 0);
    renderMaze();
  </script>
</body>
</html>
```

Please note that you need to replace `player_icon.png` and `goal_icon.png` with actual images for the player and goal pictograms. You can adjust the `MAZE_SIZE` and `CELL_SIZE` variables to change the size of the maze and individual cells if desired.