Um labirinto muito complexo e tem que achar a joia Controles: AWSD's game

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

No:42313

←

Prev Next

→

Um labirinto muito complexo e tem que achar a joia..ALL
Developer User18853｜Date and time 24/2/11 10:54:09
Build time 8.3 sec｜Game capacity 2.497KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Labirinto da Joia</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

#maze {
      position: relative;
      width: 500px;
      height: 500px;
      border: 2px solid black;
    }

.player {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: url('player.png') no-repeat;
      background-size: contain;
    }

.goal {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50px;
      height: 50px;
      background: url('goal.png') no-repeat;
      background-size: contain;
    }
  </style>
</head>
<body>
  <div id="maze">
    <div class="player"></div>
    <div class="goal"></div>
  </div>

function handleKeyPress(event) {
      const key = event.key.toLowerCase();

switch (key) {
        case 'w':
          movePlayer(0, -50);
          break;
        case 'a':
          movePlayer(-50, 0);
          break;
        case 's':
          movePlayer(0, 50);
          break;
        case 'd':
          movePlayer(50, 0);
          break;
      }

checkCollision();
    }

function movePlayer(x, y) {
      const player = document.querySelector('.player');
      const maze = document.querySelector('#maze');

const playerLeft = player.offsetLeft;
      const playerTop = player.offsetTop;

const newLeft = playerLeft + x;
      const newTop = playerTop + y;

if (newLeft >= 0 && newLeft < maze.offsetWidth - player.offsetWidth) {
        player.style.left = newLeft + 'px';
      }
      if (newTop >= 0 && newTop < maze.offsetHeight - player.offsetHeight) {
        player.style.top = newTop + 'px';
      }
    }

function checkCollision() {
      const player = document.querySelector('.player');
      const goal = document.querySelector('.goal');

const playerLeft = player.offsetLeft;
      const playerTop = player.offsetTop;

const goalLeft = goal.offsetLeft;
      const goalTop = goal.offsetTop;

if (playerLeft === goalLeft && playerTop === goalTop) {
        alert('Parabéns! Você encontrou a joia!');
        resetGame();
      }
    }

function resetGame() {
      const player = document.querySelector('.player');
      player.style.top = '0';
      player.style.left = '0';
    }
  </script>
</body>
</html>