Character running from object and dodging objects, endless runner's game

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

No:48923

←

Prev Next

→

Character running from object and dodging objects,..ALL
Developer User20885｜Date and time 24/3/3 10:02:56
Build time 6.959 sec｜Game capacity 2.039KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Endless Runner Game</title>
  <style>
    #player {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }

.obstacle {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  
  <script>
   const player = document.getElementById('player');
   let obstacles = [];
   let isGameOver = false;
  
   function createObstacle() {
    const obstacle = document.createElement('div');
    obstacle.classList.add('obstacle');
    obstacle.style.left = `${Math.random() * 90}vw`;
    document.body.appendChild(obstacle);
    obstacles.push(obstacle);
   }
  
   function moveObstacles() {
    if (!isGameOver) {
      obstacles.forEach(obstacle => {
        const currentTop = obstacle.offsetTop;
        obstacle.style.top = `${currentTop + 1}px`;

if (currentTop > window.innerHeight) {
          obstacle.remove();
        }

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

if (
      playerRect.top <= obstacleRect.bottom &&
      playerRect.right >= obstacleRect.left &&
      playerRect.left <= obstacleRect.right
    ) {
      gameOver();
    }
   }

function gameOver() {
    isGameOver = true;
    alert('Game over! Refresh the page to play again.');
   }

</script>
</body>
</html>