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

No:21933

MAKE A GAME A HORROR GAME ITS A MAZE AND UR COOL S..ALL
Developer User10117｜Date and time 23/10/19 9:40:47
Build time 86.629 sec｜Game capacity 4.439KB｜

Script

Sure! Here's a simple horror maze game using JavaScript implemented as a single HTML file:

Horror Maze Game

This code creates a simple horror maze game where the player (represented by a red square) needs to navigate through the maze (represented by gray walls) using arrow keys on a smartphone. The objective is to reach the green finish square. If the player reaches the finish, an alert message is displayed congratulating the player. Please note that this is a basic implementation and can be expanded upon further to add more features, levels, and graphics as desired.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple horror maze game using JavaScript implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Horror Maze Game</title>
  <style>
    body {
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 20vh;
    }
    #maze {
      width: 400px;
      height: 400px;
      margin: 0 auto;
    }
    .player {
      width: 40px;
      height: 40px;
      background-color: red;
      position: absolute;
    }
    .wall {
      background-color: gray;
      width: 40px;
      height: 40px;
      position: absolute;
    }
    .finish {
      background-color: green;
      width: 40px;
      height: 40px;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Horror Maze Game</h1>
  
  <div id="maze">
    <div id="player" class="player"></div>
    <div id="finish" class="finish"></div>
    
    <div class="wall" style="top: 0; left: 80px;"></div>
    <div class="wall" style="top: 40px; left: 40px;"></div>
    <div class="wall" style="top: 80px; left: 40px;"></div>
    <div class="wall" style="top: 120px; left: 80px;"></div>
    <div class="wall" style="top: 120px; left: 160px;"></div>
    <div class="wall" style="top: 160px; left: 120px;"></div>
    <div class="wall" style="top: 200px; left: 80px;"></div>
    <div class="wall" style="top: 240px; left: 80px;"></div>
    <div class="wall" style="top: 240px; left: 200px;"></div>
    <div class="wall" style="top: 280px; left: 40px;"></div>
    <div class="wall" style="top: 320px; left: 0;"></div>
    <div class="wall" style="top: 320px; left: 120px;"></div>
    <div class="wall" style="top: 320px; left: 280px;"></div>
    <div class="wall" style="top: 360px; left: 0;"></div>
    <div class="wall" style="top: 360px; left: 200px;"></div>
    <div class="wall" style="top: 400px; left: 160px;"></div>
    <div class="wall" style="top: 400px; left: 240px;"></div>
  </div>
  
  <script>
    // Get player and finish elements
    const player = document.getElementById('player');
    const finish = document.getElementById('finish');
    
    // Set initial player position
    let playerX= 0;
    let playerY = 0;
    player.style.left = playerX + 'px';
    player.style.top = playerY + 'px';
    
    // Handle keyboard arrow key events
    document.addEventListener('keydown', (event) => {
      const key = event.key;
      let nextX = playerX;
      let nextY = playerY;
      
      if (key === 'ArrowUp') {
        nextY -= 40;
      } else if (key === 'ArrowDown') {
        nextY += 40;
      } else if (key === 'ArrowLeft') {
        nextX -= 40;
      } else if (key === 'ArrowRight') {
        nextX += 40;
      }
      
      // Check if the next position is a wall or out of bounds
      if (!isWall(nextX, nextY) && isInBounds(nextX, nextY)) {
        playerX = nextX;
        playerY = nextY;
        player.style.left = playerX + 'px';
        player.style.top = playerY + 'px';
        
        // Check if player reached the finish line
        if (isFinish(playerX, playerY)) {
          alert("Congratulations! You escaped the horror maze!");
        }
      }
    });
    
    function isWall(x, y) {
      const walls = Array.from(document.getElementsByClassName('wall'));
      for (let wall of walls) {
        const rect = wall.getBoundingClientRect();
        if (x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom) {
          return true;
        }
      }
      return false;
    }
    
    function isInBounds(x, y) {
      const maze = document.getElementById('maze');
      const rect = maze.getBoundingClientRect();
      return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
    }
    
    function isFinish(x, y) {
      const rect = finish.getBoundingClientRect();
      return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
    }
  </script>
</body>
</html>
```

Please note that this is a basic implementation and can be expanded upon further to add more features, levels, and graphics as desired.