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

No:26452

127

←

Prev Next

→

Monsters move around the map (this is monsters "💀"..ALL
Developer Dooz studio｜Date and time 23/11/30 23:54:14
Build time 44.246 sec｜Game capacity 4.064KB｜

Script

Sure! Here's a simple game implementation in a single HTML file that meets your requirements:

Monster Escape

👤 💀 💀

To play the game, open the HTML file in a web browser (preferably on a smartphone for optimal experience). Use the arrow keys to move the player character ("👤") around the map. The goal is to reach the door ("🚪") without getting caught by the monsters ("💀"). If a monster touches the player, it's game over. If you reach the door, you win and a congratulatory message is displayed. You can then reset the game by clicking the door.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's a simple game implementation in a single HTML file that meets your requirements:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Monster Escape</title>
    <style>
      #map {
        width: 400px;
        height: 400px;
        position: relative;
        border: 1px solid black;
      }

#player {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 30px;
      }

.monster {
        position: absolute;
        font-size: 30px;
      }

#door {
        position: absolute;
        font-size: 30px;
        bottom: 0;
        right: 0;
        cursor: pointer;
      }

.hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Monster Escape</h1>
    <div id="map">
      <span id="player">👤</span>
      <span class="monster">💀</span>
      <span class="monster">💀</span>
      <span id="door" class="hidden">🚪</span>
    </div>

// Set starting position for player
      let playerX = 0;
      let playerY = 0;
      updatePlayerPosition();

// Set starting positions for monsters
      let monsterPositions = [
        { x: 100, y: 100 },
        { x: 200, y: 300 }
      ];
      updateMonsterPositions();

// Move the player based on arrow key input
      document.addEventListener("keydown", function (event) {
        const key = event.key;
        if (key === "ArrowUp") {
          playerY -= 50;
        } else if (key === "ArrowDown") {
          playerY += 50;
        } else if (key === "ArrowLeft") {
          playerX -= 50;
        } else if (key === "ArrowRight") {
          playerX += 50;
        }

updatePlayerPosition();
      });

// Check for collisions between player and monsters
      setInterval(function () {
        for (let i = 0; i < monsters.length; i++) {
          const monster = monsters[i];
          const monsterX = parseInt(monster.style.left);
          const monsterY = parseInt(monster.style.top);

if (playerX === monsterX && playerY === monsterY) {
            gameOver();
            break;
          }
        }
      }, 100);

// Update player position on the map
      function updatePlayerPosition() {
        player.style.top = playerY + "px";
        player.style.left = playerX + "px";

checkWinCondition();
      }

// Update monster positions on the map
      function updateMonsterPositions() {
        for (let i = 0; i < monsters.length; i++) {
          const monster = monsters[i];
          const position = monsterPositions[i];

monster.style.top = position.y + "px";
          monster.style.left = position.x + "px";
        }
      }

// Check if player reached the door
      function checkWinCondition() {
        if (playerX === 350 && playerY === 350) {
          door.classList.remove("hidden");
          door.addEventListener("click", function () {
            alert("Congratulations! You escaped!");
            resetGame();
          });
        }
      }

// Show game over message and reset game
      function gameOver() {
        alert("Game Over! The monsters got you!");
        resetGame();
      }

// Reset game to initial state
      function resetGame() {
        playerX = 0;
        playerY = 0;
        updatePlayerPosition();

door.classList.add("hidden");
      }
    </script>
  </body>
</html>
```