Jogo de Parkour do Quadrado Azul's game

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

No:43973

←

Prev Next

→

Jogo de Parkour do Quadrado Azul
Developer User19302｜Date and time 24/2/17 1:57:07
Build time 10.966 sec｜Game capacity 3.203KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Jogo de Parkour do Quadrado Azul</title>
    <style>
      /* Define o estilo do quadrado azul */
      #player {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

/* Define o estilo dos obstáculos */
      .obstacle {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="player"></div>
      <div class="obstacle" style="top: 200px; left: 200px;"></div>
      <div class="obstacle" style="top: 350px; left: 400px;"></div>
      <div class="obstacle" style="top: 100px; left: 600px;"></div>
      <div class="obstacle" style="top: 450px; left: 800px;"></div>
    </div>

var player = document.getElementById("player");
      var obstacles = document.getElementsByClassName("obstacle");

function movePlayer(event) {
        var step = 10; // Define o tamanho do passo do jogador

if (event.key === "ArrowUp") {
          var topPosition = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
          player.style.top = topPosition - step + "px";
          checkCollision();
        }

if (event.key === "ArrowDown") {
          var topPosition = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
          player.style.top = topPosition + step + "px";
          checkCollision();
        }

if (event.key === "ArrowLeft") {
          var leftPosition = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
          player.style.left = leftPosition - step + "px";
          checkCollision();
        }

if (event.key === "ArrowRight") {
          var leftPosition = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
          player.style.left = leftPosition + step + "px";
          checkCollision();
        }
      }

function checkCollision() {
        for (var i = 0; i < obstacles.length; i++) {
          var obstacle = obstacles[i];

if (
            isColliding(obstacle, player) &&
            !obstacle.classList.contains("collision")
          ) {
            obstacle.classList.add("collision");
            gameOver();
          }
        }
      }

function isColliding(element1, element2) {
        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();

return !(
          rect1.top > rect2.bottom ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right ||
          rect1.right < rect2.left
        );
      }

function gameOver() {
        alert("Game Over! Você colidiu com um obstáculo.");
        resetGame();
      }

function resetGame() {
        player.style.top = "50%";
        player.style.left = "50%";

for (var i = 0; i < obstacles.length; i++) {
          obstacles[i].classList.remove("collision");
        }
      }
    </script>
  </body>
</html>