Escape the maze with a full working controllable monkey's game

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

No:10226

130

←

Prev Next

→

Escape the maze with a full working controllable m..ALL
Developer User4499｜Date and time 23/7/29 12:47:29
Build time 19.126 sec｜Game capacity 3.631KB｜

Script

Sure, here's an example of a text-based maze game implemented as a single HTML file using JavaScript. Please note that this is a simplified version and does not include pictograms or smartphone-specific optimizations.

To play the game, run the above HTML code in a web browser. The maze layout is represented using ASCII characters: 'S' for the starting point, '#' for walls, 'G' for the goal, and empty spaces for the paths. Use the arrow keys on a keyboard or arrow buttons on a smartphone to control the monkey and navigate through the maze. The goal is to reach the 'G' character to escape the maze.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Monkey Maze Game</title>
</head>
<body>
  <div id="maze"></div>
  <script>
    // Define maze layout using a 2D array
    const mazeLayout = [
      ['S', '#', '#', '#', '#', '#', '#', '#', '#'],
      ['#', ' ', ' ', ' ', '#', ' ', ' ', ' ', '#'],
      ['#', '#', '#', ' ', '#', ' ', '#', ' ', '#'],
      ['#', ' ', ' ', ' ', ' ', ' ', '#', ' ', '#'],
      ['#', ' ', '#', '#', '#', '#', '#', ' ', '#'],
      ['#', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '#'],
      ['#', '#', '#', '#', '#', '#', '#', ' ', 'G'],
    ];

// Define player position
    let playerPosition = { x: 0, y: 0 };

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

mazeLayout.forEach((row) => {
        const rowElement = document.createElement('div');
        rowElement.className = 'maze-row';

row.forEach((cell) => {
          const cellElement = document.createElement('span');
          cellElement.className = 'maze-cell';
          cellElement.innerText = cell;
          rowElement.appendChild(cellElement);
        });

mazeContainer.appendChild(rowElement);
      });
    }

// Handle player movement
    function movePlayer(direction) {
      const newPosition = { ...playerPosition };

if (direction === 'up') {
        newPosition.y -= 1;
      } else if (direction === 'down') {
        newPosition.y += 1;
      } else if (direction === 'left') {
        newPosition.x -= 1;
      } else if (direction === 'right') {
        newPosition.x += 1;
      }

// Check if the new position is within bounds and not a wall
      if (
        newPosition.x >= 0 &&
        newPosition.x < mazeLayout[0].length &&
        newPosition.y >= 0 &&
        newPosition.y < mazeLayout.length &&
        mazeLayout[newPosition.y][newPosition.x] !== '#'
      ) {
        playerPosition = newPosition;
        renderMaze();

// Check if player reached the goal
        if (mazeLayout[playerPosition.y][playerPosition.x] === 'G') {
          alert('Congratulations! You escaped the maze!');
        }
      }
    }

// Handle arrow key press events
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowUp') {
        movePlayer('up');
      } else if (event.key === 'ArrowDown') {
        movePlayer('down');
      } else if (event.key === 'ArrowLeft') {
        movePlayer('left');
      } else if (event.key === 'ArrowRight') {
        movePlayer('right');
      }
    });

// Start the game
    renderMaze();
  </script>
  <style>
    /* Add some basic styles for the maze layout */
    .maze-row {
      display: flex;
    }

.maze-cell {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      text-align: center;
    }
  </style>
</body>
</html>
```