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

No:50560

←

Prev Next

→

Parkour
Developer User21344｜Date and time 24/3/9 1:02:04
Build time 6.778 sec｜Game capacity 2.043KB｜

Script

Parkour Game

Touch the screen to jump over obstacles!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Parkour Game</title>
    <style>
      body {
        text-align: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

#player {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #ff3333;
        border-radius: 50%;
      }

#obstacle {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #3333ff;
      }
    </style>
  </head>
  <body>
    <h1>Parkour Game</h1>
    <p>Touch the screen to jump over obstacles!</p>
    <div id="player"></div>
    <div id="obstacle"></div>

function moveObstacle() {
        obstacleLeft -= 5;
        if (obstacleLeft < -50) {
          obstacleLeft = 600;
        }
        obstacle.style.left = obstacleLeft + 'px';

if (checkCollision()) {
          alert('Game Over! Refresh the page to play again.');
        } else {
          requestAnimationFrame(moveObstacle);
        }
      }

function checkCollision() {
        let playerRect = player.getBoundingClientRect();
        let obstacleRect = obstacle.getBoundingClientRect();

return !(
          playerRect.right < obstacleRect.left ||
          playerRect.left > obstacleRect.right ||
          playerRect.bottom < obstacleRect.top ||
          playerRect.top > obstacleRect.bottom
        );
      }

moveObstacle();
    </script>
  </body>
</html>