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

No:21719

157

←

Prev Next

→

Maze game
Developer User10013｜Date and time 23/10/17 20:19:14
Build time 94.22 sec｜Game capacity 3.009KB｜

Script

Sure! Here's an example of a simple maze game implemented in a single HTML file, using JavaScript and pictograms:

Maze Game

🚶‍

In this game, the player (represented by the walking person pictogram) can click on the maze to move around. The maze consists of walls (represented by dark gray blocks) and an exit (represented by a red block). The goal is to reach the exit without colliding with the walls. If the player successfully reaches the exit, an alert message will be shown congratulating the player. Note: This is a basic example and can be expanded upon to create a more complex and interactive maze game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple maze game implemented in a single HTML file, using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    #maze {
      height: 400px;
      width: 400px;
      border: 2px solid black;
      position: relative;
    }

.player {
      position: absolute;
      top: 0;
      left: 0;
    }

.wall {
      background-color: #333;
    }

.exit {
      background-color: #e74c3c;
    }
  </style>
</head>
<body>
  <h1>Maze Game</h1>
  <div id="maze" onclick="move(event)">
    <div id="player" class="player">
      🚶‍
    </div>
    <div class="wall" style="top: 100px; left: 100px; height: 200px; width: 20px;"></div>
    <div class="wall" style="top: 200px; left: 200px; height: 20px; width: 200px;"></div>
    <div class="exit" style="top: 350px; left: 350px; height: 50px; width: 50px;"></div>
  </div>

const newPos = {
        x: event.clientX - mazeRect.left - playerRect.width / 2,
        y: event.clientY - mazeRect.top - playerRect.height / 2
      };

// Check for collisions with walls
      const walls = document.getElementsByClassName('wall');
      let collision = false;
      for (let i = 0; i < walls.length; i++) {
        const wallRect = walls[i].getBoundingClientRect();
        if (newPos.x < wallRect.right &&
            newPos.x + playerRect.width > wallRect.left &&
            newPos.y < wallRect.bottom &&
            newPos.y + playerRect.height > wallRect.top) {
          collision = true;
          break;
        }
      }

// Move the player if there are no collisions
      if (!collision) {
        player.style.left = newPos.x + 'px';
        player.style.top = newPos.y + 'px';

// Check if player reached the exit
        const exit = document.getElementsByClassName('exit')[0];
        const exitRect = exit.getBoundingClientRect();
        if (newPos.x < exitRect.right &&
            newPos.x + playerRect.width > exitRect.left &&
            newPos.y < exitRect.bottom &&
            newPos.y + playerRect.height > exitRect.top) {
          alert('Congratulations! You reached the exit!');
        }
      }
    }
  </script>
</body>
</html>
```

Note: This is a basic example and can be expanded upon to create a more complex and interactive maze game.