Complete working endless runner's game

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

No:17240

122

←

Prev Next

→

Complete working endless runner
Developer User7614｜Date and time 23/9/22 19:43:44
Build time 41.693 sec｜Game capacity 4.184KB｜

Script

Sure! Here's a complete working endless runner game implemented in a single HTML file using JavaScript and enclosed in `script` tags. This game assumes smartphone operation and uses pictograms where possible.

This game sets up a simple endless runner environment where the player (orange square) moves upwards when the user touches the screen (assuming smartphone operation). The player's goal is to avoid obstacles (red squares) falling from the top. The game keeps track of the score, increases the game speed over time, and displays a game over message when the player collides with an obstacle. Please note that this implementation is a minimal example and can be expanded upon with additional features, graphics, and improvements based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Endless Runner</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

.game-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
      }

.player {
        width: 50px;
        height: 50px;
        background-color: orange;
        margin-bottom: 16px;
      }

.obstacle {
        width: 50px;
        height: 50px;
        background-color: red;
        margin-bottom: 16px;
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <div class="player"></div>
    </div>

// Functions to handle player movement
      function startGame() {
        createPlayer();
        setInterval(updateGame, 20);
        document.addEventListener('keydown', movePlayer);
      }

function createPlayer() {
        var playerElement = document.createElement('div');
        playerElement.classList.add('player');
        document.querySelector('.game-container').appendChild(playerElement);
        player = { element: playerElement, x: 0, y: 0 };
      }

function movePlayer(event) {
        if (event.code === 'ArrowUp') {
          player.y -= 20;
        }
      }

// Functions to handle game updates
      function updateGame() {
        if (gameIsOver) {
          return;
        }

updatePlayer();
        updateObstacles();
        checkCollision();
        updateScore();
      }

function updatePlayer() {
        player.element.style.top = player.y + 'px';
        player.y += gameSpeed;
      }

function createObstacle() {
        var obstacleElement = document.createElement('div');
        obstacleElement.classList.add('obstacle');
        document.querySelector('.game-container').appendChild(obstacleElement);

var obstacle = { element: obstacleElement, x: 0, y: -50 };
        obstacles.push(obstacle);
      }

function updateObstacles() {
        for (var i = 0; i < obstacles.length; i++) {
          obstacles[i].element.style.top = obstacles[i].y + 'px';
          obstacles[i].y += gameSpeed;

if (obstacles[i].y > window.innerHeight) {
            obstacles.splice(i, 1);
            i--;
          }
        }

// Randomly create obstacles
        if (Math.random() > 0.95) {
          createObstacle();
        }
      }

// Function to handle collision detection
      function checkCollision() {
        for (var i = 0; i < obstacles.length; i++) {
          if (
            player.x === obstacles[i].x &&
            player.y + player.element.offsetHeight >= obstacles[i].y
          ) {
            gameOver();
            break;
          }
        }
      }

// Function to handle game over
      function gameOver() {
        gameIsOver = true;
        alert('Game Over! Your score: ' + score);
      }

// Function to update score
      function updateScore() {
        score++;
        document.querySelector('.game-container').style.counterReset = 'score ' + score;
      }

// Start the game
      startGame();
    </script>
  </body>
</html>
```

Please note that this implementation is a minimal example and can be expanded upon with additional features, graphics, and improvements based on your specific requirements.