maze with person that you control enemy with closets you hide in moveing enemy's game

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

No:31743

←

Prev Next

→

maze with person that you control enemy with close..ALL
Developer User15107｜Date and time 23/12/28 8:26:54
Build time 20.552 sec｜Game capacity 2.679KB｜

Script

Sure, here's an example of a simple maze game where you control a person and avoid an enemy. The game uses pictograms and can be played on a smartphone.

👱 👾

In this game, you control a person represented by the 👱 emoji. You can move the person using the arrow keys on your smartphone. The goal is to avoid the enemy represented by the 👾 emoji. If the player collides with the enemy, an alert saying "You Lose!" will appear. The maze is represented by a 300x300 pixel div element with a black border. The player and enemy are absolutely positioned inside the maze and can move within its boundaries. The `movePlayer` function handles the player's movements and checks for collisions. The `isColliding` function uses the `getBoundingClientRect` method to check if the player's and enemy's bounding rectangles intersect. Note: You can customize the maze layout, add more levels, or enhance the game as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple maze game where you control a person and avoid an enemy. The game uses pictograms and can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    #maze {
      border: 1px solid black;
      height: 300px;
      width: 300px;
      position: relative;
    }
    .player {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 30px;
    }
    .enemy {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="maze">
    <span class="player">👱</span>
    <span class="enemy">👾</span>
  </div>
  
  <script>
    document.addEventListener("keydown", movePlayer);

var maze = document.getElementById("maze");
    var player = document.querySelector(".player");
    var enemy = document.querySelector(".enemy");

var playerTop = 0;
    var playerLeft = 0;

function movePlayer(e) {
      switch (e.key) {
        case "ArrowUp":
          if (playerTop > 0) playerTop -= 50;
          break;
        case "ArrowDown":
          if (playerTop < 250) playerTop += 50;
          break;
        case "ArrowLeft":
          if (playerLeft > 0) playerLeft -= 50;
          break;
        case "ArrowRight":
          if (playerLeft < 250) playerLeft += 50;
          break;
      }

if (isColliding()) {
        // Player collided with enemy
        alert("You Lose!");
      } else {
        player.style.top = playerTop + "px";
        player.style.left = playerLeft + "px";
      }
    }

function isColliding() {
      var rect1 = player.getBoundingClientRect();
      var rect2 = enemy.getBoundingClientRect();

return (
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top &&
        rect1.left < rect2.right &&
        rect1.right > rect2.left
      );
    }
  </script>
</body>
</html>
```

The maze is represented by a 300x300 pixel div element with a black border. The player and enemy are absolutely positioned inside the maze and can move within its boundaries. The `movePlayer` function handles the player's movements and checks for collisions. The `isColliding` function uses the `getBoundingClientRect` method to check if the player's and enemy's bounding rectangles intersect.

Note: You can customize the maze layout, add more levels, or enhance the game as per your requirements.