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

No:8969

126

Horror maze
Developer User4276｜Date and time 23/7/20 0:39:46
Build time 47.775 sec｜Game capacity 4.636KB｜

Jogo de Labirinto de Terror

→ 　

1　

1　

　

　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Jogo de Labirinto de Terror</title>
<style>
body {
  text-align: center;
  font-family: Arial, sans-serif;
}

#game {
  margin-top: 50px;
}

#startBtn {
  padding: 10px 20px;
  font-size: 20px;
}

#maze {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 400px;
  border: 2px solid black;
}

.player {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: red;
}

.wall {
  position: absolute;
  background-color: black;
}

.finish {
  position: absolute;
  background-color: green;
}

</style>
</head>
<body>
<h1>Jogo de Labirinto de Terror</h1>

<div id="game">
  <button id="startBtn">Iniciar Jogo</button>
  <div id="maze"></div>
</div>

<script>
document.getElementById('startBtn').addEventListener('click', startGame);

function startGame() {
  document.getElementById('startBtn').style.display = 'none';
  
  const maze = document.getElementById('maze');
  const player = document.createElement('div');
  player.className = 'player';
  maze.appendChild(player);
  
  const walls = [
    { top: 0, left: 100, width: 200, height: 10 },
    { top: 60, left: 0, width: 10, height: 100 },
    { top: 60, left: 100, width: 10, height: 100 },
    { top: 60, left: 200, width: 10, height: 100 },
    { top: 60, left: 300, width: 10, height: 100 },
    { top: 160, left: 0, width: 10, height: 150 },
    { top: 160, left: 200, width: 10, height: 200 },
    { top: 310, left: 0, width: 310, height: 10 },
    { top: 360, left: 100, width: 200, height: 10 },
    { top: 210, left: 100, width: 10, height: 50 },
    { top: 260, left: 100, width: 100, height: 10 },
    { top: 210, left: 200, width: 10, height: 100 }
  ];
  
  for (let i = 0; i < walls.length; i++) {
    const wall = document.createElement('div');
    wall.className = 'wall';
    wall.style.top = walls[i].top + 'px';
    wall.style.left = walls[i].left + 'px';
    wall.style.width = walls[i].width + 'px';
    wall.style.height = walls[i].height + 'px';
    maze.appendChild(wall);
  }
  
  const finish = document.createElement('div');
  finish.className = 'finish';
  finish.style.top = '350px';
  finish.style.left = '350px';
  maze.appendChild(finish);
  
  document.addEventListener('keydown', movePlayer);
}

function movePlayer(e) {
  const player = document.querySelector('.player');
  
  const currentPosition = {
    top: player.offsetTop,
    left: player.offsetLeft
  };
  
  const keys = {
    37: { // left
      top: 0,
      left: -25
    },
    38: { // up
      top: -25,
      left: 0
    },
    39: { // right
      top: 0,
      left: 25
    },
    40: { // down
      top: 25,
      left: 0
    }
  };
  
  const move = keys[e.keyCode];
  
  if (move && isValidMove(currentPosition, move)) {
    player.style.top = currentPosition.top + move.top + 'px';
    player.style.left = currentPosition.left + move.left + 'px';
    
    if (checkWin()) {
      alert('Parabéns! Você venceu o jogo de labirinto!');
      document.removeEventListener('keydown', movePlayer);
    }
  }
}

function isValidMove(currentPosition, move) {
  const player = document.querySelector('.player');
  const walls = document.querySelectorAll('.wall');
  
  const playerRect = player.getBoundingClientRect();
  
  const newTop = currentPosition.top + move.top;
  const newLeft = currentPosition.left + move.left;
  
  const newRect = {
    top: playerRect.top + move.top,
    left: playerRect.left + move.left,
    width: playerRect.width,
    height: playerRect.height
  };
  
  for (let i = 0; i < walls.length; i++) {
    const wallRect = walls[i].getBoundingClientRect();
    
    if (isOverlap(newRect, wallRect)) {
      return false; // Invalid move
    }
  }
  
  const mazeRect = document.getElementById('maze').getBoundingClientRect();
  
  if (
    newRect.top < mazeRect.top ||
    newRect.left < mazeRect.left ||
    newRect.top + newRect.height > mazeRect.top + mazeRect.height ||
    newRect.left + newRect.width > mazeRect.left + mazeRect.width
  ) {
    return false; // Invalid move
  }
  
  return true; // Valid move
}

function isOverlap(rect1, rect2) {
  return !(
    rect1.top + rect1.height < rect2.top ||
    rect1.top > rect2.top + rect2.height ||
    rect1.left + rect1.width < rect2.left ||
    rect1.left > rect2.left + rect2.width
  );
}

function checkWin() {
  const player = document.querySelector('.player');
  const finish = document.querySelector('.finish');
  
  const playerRect = player.getBoundingClientRect();
  const finishRect = finish.getBoundingClientRect();
  
  return isOverlap(playerRect, finishRect);
}
</script>
</body>
</html>