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

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

No:31740

←

Prev Next

→

maze with person that you control enemy with close..ALL
Developer User15107｜Date and time 23/12/28 8:22:53
Build time 26.512 sec｜Game capacity 3.733KB｜

Script

Sure! Here's an example of a simple maze game implemented as a single HTML file with JavaScript:

In this game, you control a player character (represented by a blue div) in a maze. The goal is to reach the closet (represented by a green div) without getting caught by the enemy (represented by a red div). Use the arrow keys to move the player character around the maze. If you collide with the enemy, you lose and see a game over alert. If you reach the closet, you win and see a congratulations alert. The game automatically resets after winning or losing.

←

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 implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    #maze {
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid #000;
    }
    
    .maze-cell {
      width: 20px;
      height: 20px;
      background-color: #ccc;
    }
    
    .player, .enemy, .closet {
      width: 20px;
      height: 20px;
      position: absolute;
    }
    
    .player {
      background-color: #00f;
    }
    
    .enemy {
      background-color: #f00;
    }
    
    .closet {
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div id="maze"></div>
  <script>
    function generateMaze() {
      const maze = [];
      const mazeElement = document.getElementById('maze');
      const mazeWidth = Math.floor(mazeElement.offsetWidth / 20);
      const mazeHeight = Math.floor(mazeElement.offsetHeight / 20);
      
      for (let row = 0; row < mazeHeight; row++) {
        const newRow = [];
        for (let col = 0; col < mazeWidth; col++) {
          const cell = document.createElement('div');
          cell.classList.add('maze-cell');
          mazeElement.appendChild(cell);
          newRow.push(cell);
        }
        maze.push(newRow);
      }
      
      return maze;
    }
    
    function createEntity(className, x, y) {
      const entity = document.createElement('div');
      entity.classList.add(className);
      entity.style.left = `${x}px`;
      entity.style.top = `${y}px`;
      document.getElementById('maze').appendChild(entity);
      return entity;
    }
    
    function moveEntity(entity, dx, dy) {
      const x = parseInt(entity.style.left);
      const y = parseInt(entity.style.top);
      entity.style.left = `${x + dx}px`;
      entity.style.top = `${y + dy}px`;
    }
    
    const maze = generateMaze();
    const player = createEntity('player', 0, 0);
    const enemy = createEntity('enemy', 380, 380);
    const closet = createEntity('closet', 180, 180);
    
    function handleKeyPress(event) {
      switch (event.key) {
        case 'ArrowUp':
          moveEntity(player, 0, -20);
          break;
        case 'ArrowDown':
          moveEntity(player, 0, 20);
          break;
        case 'ArrowLeft':
          moveEntity(player, -20, 0);
          break;
        case 'ArrowRight':
          moveEntity(player, 20, 0);
          break;
      }
      
      if (isColliding(player, enemy)) {
        alert('Game Over! The enemy has caught you!');
        resetGame();
      } else if (isColliding(player, closet)) {
        alert('Congratulations! You have found a closet!');
        resetGame();
      }
    }
    
    function isColliding(entity1, entity2) {
      const rect1 = entity1.getBoundingClientRect();
      const rect2 = entity2.getBoundingClientRect();
      return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
      );
    }
    
    function resetGame() {
      player.style.left = '0';
      player.style.top = '0';
    }
    
    document.addEventListener('keydown', handleKeyPress);
  </script>
</body>
</html>
```