Endless Runner Game: Build an endless runner game where players control a character and try to run as far as possible, avoiding obstacles along the way. The time u survived will be display in the upper left corner and when u die it will show the longest time u survived to others and yourself's game

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

No:21078

←

Prev Next

→

Endless Runner Game: Build an endless runner game ..ALL
Developer User9316｜Date and time 23/10/13 6:51:48
Build time 69.714 sec｜Game capacity 3.248KB｜

Script

Sure, here's an example code for an endless runner game implemented as a single HTML file using JavaScript and enclosed in script tags:

This code sets up the game canvas, initializes variables, handles key press events, updates the game frame, and calculates the score and highscore. The player can control the character by using the left and right arrow keys. Obstacles will continuously move downwards, and if the player collides with an obstacle, the game ends. The score represents the time survived, and the highscore is displayed at the top left corner of the canvas. The highscore is stored in the browser's local storage for future sessions.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example code for an endless runner game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Endless Runner Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize Game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      playerX = canvas.width / 2;
      playerY = canvas.height - 50;
      playerSize = 20;
      obstacleX = Math.random() * (canvas.width - 50);
      obstacleY = -50;
      obstacleSize = 50;
      obstacleSpeed = 2;
      score = 0;
      isCollided = false;

// Update game frame
      setInterval(update, 10);

// Handle key press events
      document.addEventListener("keydown", handleKeyPress);

// Display highscore
      if(localStorage.getItem("highscore")) {
        highscore = localStorage.getItem("highscore");
      } else {
        highscore = 0;
      }
    }

// Handle key press events
    function handleKeyPress(event) {
      if(event.keyCode === 37 && playerX > 0) {
        playerX -= 10;
      } else if(event.keyCode === 39 && playerX < canvas.width - playerSize) {
        playerX += 10;
      }
    }

// Update game frame
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      ctx.fillStyle = "#000000";
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw obstacle
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);

// Move obstacle downwards
      obstacleY += obstacleSpeed;

// Check collision
      if(obstacleY + obstacleSize >= playerY && obstacleY <= playerY + playerSize &&
        obstacleX + obstacleSize >= playerX && obstacleX <= playerX + playerSize) {
        isCollided = true;
      }

// Update score
      if(!isCollided) {
        score += 0.1;
        if(score > highscore) {
          highscore = score;
          localStorage.setItem("highscore", highscore);
        }
      }

// Display score and highscore
      ctx.font = "16px Arial";
      ctx.fillStyle = "#000000";
      ctx.fillText("Time survived: " + Math.floor(score), 10, 20);
      ctx.fillText("Highscore: " + Math.floor(highscore), 10, 40);
    }

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