Maze game with six levels. The maze gets bigger and harder with each level. The user does not progress to the next level until they complete the previous one. The user's current position is a pictogram.'s game

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

No:31861

←

Prev Next

→

Maze game with six levels. The maze gets bigger an..ALL
Developer User15231｜Date and time 23/12/28 17:23:12
Build time 53.666 sec｜Game capacity 4.857KB｜

Script

Sure! Here's an example of a maze game implemented as a single HTML file, incorporating JavaScript and using pictograms for the user's current position. The maze will get bigger and harder with each level, and the user will need to complete each level before progressing to the next one. Please note that for the sake of simplicity, this game uses arrow keys for movement instead of touch controls.

To play the game, you'll need to save the above code as an HTML file (e.g., `maze_game.html`) and open it in your smartphone's web browser. The game starts automatically, and you can control the player's movement using the arrow keys. Each level becomes progressively harder, and you must complete one level to unlock the next. The pictogram representing the user's current position is a player icon displayed on the maze grid. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    #maze {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
      margin: 20px auto;
    }
    #player {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-image: url('player_icon.png');
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
    }
    .wall {
      background-color: black;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="maze"></div>
  <script>
    // Maze levels
    const levels = [
      { size: 4, playerPos: { row: 0, col: 0 } },
      { size: 6, playerPos: { row: 0, col: 0 } },
      { size: 8, playerPos: { row: 0, col: 0 } },
      { size: 10, playerPos: { row: 0, col: 0 } },
      { size: 12, playerPos: { row: 0, col: 0 } },
      { size: 14, playerPos: { row: 0, col: 0 } }
    ];

// Current level
    let currentLevel = 0;
    let maze;
    let player;

// Initialize game
    function initGame() {
      maze = document.getElementById('maze');
      player = document.createElement('div');
      player.id = 'player';
      maze.appendChild(player);
      drawMaze();
    }

// Draw the maze based on the current level
    function drawMaze() {
      maze.innerHTML = '';

const level = levels[currentLevel];
      const size = level.size;

for (let row = 0; row < size; row++) {
        for (let col = 0; col < size; col++) {
          const cell = document.createElement('div');
          cell.className = 'wall';
          cell.style.width = `${maze.offsetWidth / size}px`;
          cell.style.height = `${maze.offsetHeight / size}px`;
          cell.style.top = `${row * (maze.offsetHeight / size)}px`;
          cell.style.left = `${col * (maze.offsetWidth / size)}px`;

if (row === level.playerPos.row && col === level.playerPos.col) {
            player.style.top = cell.style.top;
            player.style.left = cell.style.left;
          }

maze.appendChild(cell);
        }
      }
    }

// Move the player in the maze
    function movePlayer(rowOffset, colOffset) {
      const level = levels[currentLevel];
      const size = level.size;
      const newRow = level.playerPos.row + rowOffset;
      const newCol = level.playerPos.col + colOffset;

if (newRow < 0 || newRow >= size || newCol < 0 || newCol >= size) {
        // Invalid move
        return;
      }

const newCell = getCellByPos(newRow, newCol);

if (newCell.classList.contains('wall')) {
        // Hit a wall
        return;
      }

player.style.top = newCell.style.top;
      player.style.left = newCell.style.left;

level.playerPos.row = newRow;
      level.playerPos.col = newCol;

if (newRow === size - 1 && newCol === size - 1) {
        // Level complete
        if (currentLevel === levels.length - 1) {
          // Game complete
          alert('Congratulations! You finished the game!');
          return;
        }

currentLevel++;
        drawMaze();
      }
    }

// Utility function to find a maze cell by its position
    function getCellByPos(row, col) {
      const cells = document.getElementsByClassName('wall');
      for (let i = 0; i < cells.length; i++) {
        if (cells[i].style.top === `${row * (maze.offsetHeight / levels[currentLevel].size)}px` &&
            cells[i].style.left === `${col * (maze.offsetWidth / levels[currentLevel].size)}px`) {
          return cells[i];
        }
      }
    }

// Handle key press events
    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
    initGame();
  </script>
</body>
</html>
```