Make a endless runner game like temple run and his has so many opticals's game

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

No:30536

←

Prev Next

→

Make a endless runner game like temple run and his..ALL
Developer User14826｜Date and time 23/12/22 14:43:41
Build time 22.293 sec｜Game capacity 3.811KB｜

Script

Sure! Here's a simple implementation of an endless runner game like Temple Run using JavaScript and HTML:

🏃

To play the game, simply copy and paste the above code into a blank HTML file, save it as "endless_runner.html", and open it in a web browser. The player can control the character with the left, right, and up arrow keys on their smartphone. The player needs to avoid colliding with the randomly generated obstacles (red squares) and can also jump by pressing the up arrow key. If the player collides with an obstacle, a "Game Over" message will be displayed, and the game will restart automatically. Note: The above code is a basic implementation and can be enhanced further with additional features and improvements to create a more complete and enjoyable game experience.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a simple implementation of an endless runner game like Temple Run using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Endless Runner Game</title>
  <style>
    #game {
      position: relative;
      width: 400px;
      height: 600px;
      border: 1px solid black;
      margin: 0 auto;
      overflow: hidden;
    }

#player {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      font-size: 50px; /* Use pictograms or icons for the player */
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player">🏃</div>
  </div>

var gameLoop = setInterval(function() {
      var gameWidth = game.offsetWidth;
      var playerWidth = player.offsetWidth;

// Move the player horizontally
      document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowLeft') {
          player.style.left = Math.max(0, parseInt(player.style.left) - playerSpeed) + 'px';
        } else if (event.key === 'ArrowRight') {
          player.style.left = Math.min(gameWidth - playerWidth, parseInt(player.style.left) + playerSpeed) + 'px';
        }
      });

// Move the player vertically (simulate jumping)
      document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowUp') {
          player.style.bottom = parseInt(player.style.bottom) + playerJump + 'px';
          setTimeout(function() {
            player.style.bottom = "10px";
          }, 500);
        }
      });

// Generate random obstacles
      var obstacle = document.createElement('div');
      obstacle.style.position = 'absolute';
      obstacle.style.bottom = '50px';
      obstacle.style.left = Math.floor(Math.random() * (gameWidth - playerWidth)) + 'px';
      obstacle.style.width = '50px';
      obstacle.style.height = '50px';
      obstacle.style.backgroundColor = 'red';
      game.appendChild(obstacle);

// Move obstacles downwards
      var obstacleMove = setInterval(function() {
        obstacle.style.bottom = parseInt(obstacle.style.bottom) - 10 + 'px';

if (parseInt(obstacle.style.bottom) + parseInt(obstacle.style.height) < 0) {
          obstacle.remove();
          clearInterval(obstacleMove);
        }

// Game over if player collides with an obstacle
        if (isColliding(player, obstacle)) {
          clearInterval(gameLoop);
          clearInterval(obstacleMove);
          alert('Game Over');
          window.location.reload(); // Restart the game
        }
      }, 50);

// Function to check collision between two elements
      function isColliding(element1, element2) {
        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();
        return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
      }
    }, 1000);

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

Note: The above code is a basic implementation and can be enhanced further with additional features and improvements to create a more complete and enjoyable game experience.