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

No:36531

25

Crie um jogo runner arcade assim como o Subway Sur..ALL
Developer User16820｜Date and time 24/1/17 22:34:50
Build time 15.543 sec｜Game capacity 3.277KB｜

Score: 0

→ 　

0　

0　

　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <style>
    #player {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: red;
    }

#obstacle {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: blue;
    }
  </style>
</head>
<body>
  <script>
    const player = document.getElementById("player");
    const obstacle = document.getElementById("obstacle");
    let score = 0;
    let isJumping = false;
    let gravity = 0.9;
    let playerSpeed = 3;
    let obstacleSpeed = 5;

function jump() {
      if (!isJumping) {
        player.style.animation = "jump 0.6s";
        setTimeout(() => {
          player.style.animation = "";
        }, 600);
        isJumping = true;
        let jumpCount = 0;
        let jumpInterval = setInterval(() => {
          let playerBottom = parseInt(
            window.getComputedStyle(player).getPropertyValue("bottom")
          );
          if (playerBottom < 150 && jumpCount < 15) {
            player.style.bottom = playerBottom + playerSpeed + "px";
            jumpCount++;
          } else {
            clearInterval(jumpInterval);
            isJumping = false;
            jumpCount = 0;
          }
        }, 10);
      }
    }

function checkCollision() {
      let playerLeft = parseInt(
        window.getComputedStyle(player).getPropertyValue("left")
      );
      let obstacleRight = parseInt(
        window.getComputedStyle(obstacle).getPropertyValue("right")
      );
      let playerBottom = parseInt(
        window.getComputedStyle(player).getPropertyValue("bottom")
      );
      if (playerLeft <= obstacleRight + 50 && playerBottom <= 50) {
        alert("Game Over!");
        obstacle.style.animation = "";
        score = 0;
        obstacle.style.right = 0;
      } else {
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
      }
    }

function startGame() {
      let gameInterval = setInterval(() => {
        let obstacleRight = parseInt(
          window.getComputedStyle(obstacle).getPropertyValue("right")
        );
        if (obstacleRight > 0 && obstacleRight < 50) {
          checkCollision();
        }
      }, 10);
      let moveInterval = setInterval(() => {
        let playerLeft = parseInt(
          window.getComputedStyle(player).getPropertyValue("left")
        );
        let obstacleRight = parseInt(
          window.getComputedStyle(obstacle).getPropertyValue("right")
        );
        if (obstacleRight > 0 && obstacleRight < 50) {
          checkCollision();
        }
        obstacle.style.right = obstacleRight + obstacleSpeed + "px";
        if (playerLeft < 250) {
          player.style.left = playerLeft + playerSpeed + "px";
        }
        if (obstacleRight > 300) {
          score++;
          document.getElementById("score").innerHTML = "Score: " + score;
          obstacle.style.right = 0;
        }
      }, 10);
    }

document.addEventListener("keydown", (event) => {
      if (event.key === "ArrowUp") {
        jump();
      }
    });

startGame();
  </script>

<h1 id="score">Score: 0</h1>
  <div id="player"></div>
  <div id="obstacle"></div>
</body>
</html>