Simple but fun maze game with 99 levels and it is completely offline's game

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

No:26752

←

Prev Next

→

Simple but fun maze game with 99 levels and it is ..ALL
Developer Rowdagriff｜Date and time 23/12/2 10:31:03
Build time 72.655 sec｜Game capacity 3.956KB｜

Script

Sure! Here's a simple but fun maze game implemented as a single HTML file using JavaScript:

This HTML file implements a maze game with 99 levels. The maze is displayed as a grid, and the player represented by a yellow square "P" needs to reach the green square "G" to clear each level. The player can use arrow keys on their smartphone to navigate through the maze. Once a level is cleared, a notification message appears, and the next level is loaded. If the player completes all 99 levels, a congratulatory message is displayed, and the game restarts from the first level. Please note that this is a simple example implementation, and you can modify or enhance it further based on your requirements and design preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple but fun maze game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    #maze {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      width: 400px;
      height: 400px;
    }

.cell {
      border: 1px solid black;
    }

#player {
      background: yellow;
    }

#goal {
      background: green;
    }
  </style>
</head>
<body>
  <div id="maze"></div>

let currentLevel = 0;
    let playerRow, playerCol;

function createMaze(level) {
      const mazeContainer = document.getElementById("maze");
      mazeContainer.innerHTML = "";

for (let row = 0; row < level.length; row++) {
        for (let col = 0; col < level[row].length; col++) {
          const cellDiv = document.createElement("div");
          cellDiv.className = "cell";

if (level[row][col] === "#") {
            cellDiv.style.background = "black";
          } else if (level[row][col] === "P") {
            cellDiv.id = "player";
            playerRow = row;
            playerCol = col;
          } else if (level[row][col] === "G") {
            cellDiv.id = "goal";
          }

mazeContainer.appendChild(cellDiv);
        }
      }
    }

function movePlayer(rowDiff, colDiff) {
      const newRow = playerRow + rowDiff;
      const newCol = playerCol + colDiff;
      const mazeContainer = document.getElementById("maze");
      const cells = mazeContainer.getElementsByClassName("cell");

if (newRow < 0 || newRow >= levels[currentLevel].length ||
          newCol < 0 || newCol >= levels[currentLevel][0].length) {
        return; // Invalid move
      }

const newIndex = newRow * levels[currentLevel][0].length + newCol;

if (cells[newIndex].style.background === "black") {
        return; // Wall, cannot move
      }

cells[newIndex].appendChild(document.getElementById("player"));
      playerRow = newRow;
      playerCol = newCol;

if (levels[currentLevel][playerRow][playerCol] === "G") {
        if (currentLevel < levels.length - 1) {
          currentLevel++;
          createMaze(levels[currentLevel]);
          alert("Level Cleared!");
        } else {
          alert("Congratulations! You completed all levels.");
          createMaze(levels[0]);
          currentLevel = 0;
        }
      }
    }

// Handle keyboard events for player movement
    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowUp") {
        movePlayer(-1, 0);
      } else if (event.key === "ArrowDown") {
        movePlayer(1, 0);
      } else if (event.key === "ArrowLeft") {
        movePlayer(0, -1);
      } else if (event.key === "ArrowRight") {
        movePlayer(0, 1);
      }
    });

// Start the game with the first level
    createMaze(levels[0]);
  </script>
</body>
</html>
```

Please note that this is a simple example implementation, and you can modify or enhance it further based on your requirements and design preferences.