AI game creator

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

No:20491

←

Prev Next

→

Maze
Developer User9082｜Date and time 23/10/10 2:39:46
Build time 26.374 sec｜Game capacity 3.877KB｜

Script

Try to find the path through the invisible maze.

In this game, you navigate a player represented as a colored cell in a maze grid. Your goal is to reach the goal cell marked in red. You can use arrow keys on your smartphone to move the player around the maze. The maze is represented by a 2D array, where `1` represents wall cells 1)` and the goal cell is located at position `(4, 4)`. You can modify the maze array and add more levels or customize the visual representation of the game as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Try to find the path through the invisible maze.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Invisible maze</title>
  <style>
    body {
      background-color: #f0f0f0;
    }

#maze {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-gap: 2px;
      margin: 50px auto;
      width: 300px;
      height: 300px;
    }

.cell {
      background-color: white;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.player {
      background-color: #007bff;
      color: white;
      font-size: 20px;
    }

.goal {
      background-color: #dc3545;
      color: white;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="maze"></div>

// Maze grid
      const maze = [
        [1, 1, 1, 1, 1],
        [1, 0, 1, 0, 1],
        [1, 0, 0, 0, 1],
        [1, 0, 1, 1, 1],
        [1, 0, 0, 0, 2]
      ];

// Render maze
      for (let i = 0; i < maze.length; i++) {
        for (let j = 0; j < maze[i].length; j++) {
          const cell = document.createElement("div");
          cell.classList.add("cell");

if (maze[i][j] === 1) {
            cell.classList.add("wall");
          } else if (maze[i][j] === 2) {
            cell.classList.add("goal");
          }

mazeElement.appendChild(cell);
        }
      }

// Current player position
      let playerX = 1;
      let playerY = 1;

// Update player position
      function updatePlayerPosition() {
        const cells = document.querySelectorAll(".cell");

cells.forEach(function (cell) {
          cell.classList.remove("player");
        });

const currentPlayerCell = document.querySelector(
          `.cell:nth-child(${playerY + 1 + playerX * 5})`
        );
        currentPlayerCell.classList.add("player");
      }

// Handle key presses
      document.addEventListener("keydown", function (event) {
        let moved = false;

if (event.key === "ArrowUp") {
          if (maze[playerX - 1] && maze[playerX - 1][playerY] !== 1) {
            playerX -= 1;
            moved = true;
          }
        }

if (event.key === "ArrowDown") {
          if (maze[playerX + 1] && maze[playerX + 1][playerY] !== 1) {
            playerX += 1;
            moved = true;
          }
        }

if (event.key === "ArrowLeft") {
          if (maze[playerX][playerY - 1] !== 1) {
            playerY -= 1;
            moved = true;
          }
        }

if (event.key === "ArrowRight") {
          if (maze[playerX][playerY + 1] !== 1) {
            playerY += 1;
            moved = true;
          }
        }

if (moved) {
          updatePlayerPosition();

if (maze[playerX][playerY] === 2) {
            alert("Congratulations! You reached the goal!");
            // Game finished, you can add more logic here to restart the game
          }
        }
      });

// Initial player position
      updatePlayerPosition();
    });
  </script>
</body>
</html>
```

The maze is represented by a 2D array, where `1` represents wall cells 1)` and the goal cell is located at position `(4, 4)`.

You can modify the maze array and add more levels or customize the visual representation of the game as per your requirements.