Make a endless runner game's game

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

No:30535

←

Prev Next

→

Make a endless runner game
Developer User14826｜Date and time 23/12/22 14:42:19
Build time 18.578 sec｜Game capacity 2.666KB｜

Script

Sure! Here's an example implementation of an endless runner game using JavaScript and HTML:

In this game, you control a blue square (the player) using the up and down arrow keys on your smartphone. The goal is to avoid the red rectangles (obstacles) that move towards the player from the right side of the screen. If the player collides with an obstacle, it's game over and the final score is displayed. Please note that this is a basic implementation to give you an idea of how an endless runner game can be created using JavaScript and HTML. You can further enhance and customize it according to your preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example implementation of an endless runner game using JavaScript and HTML:

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

// Variables
    let playerX = 200;
    let playerY = 350;
    let obstacleX = 400;
    let obstacleY = Math.floor(Math.random() * 300) + 50;
    let score = 0;

// Event listeners for player movement
    document.addEventListener('keydown', handleKeyDown);

function handleKeyDown(e) {
      if (e.key === 'ArrowUp') {
        playerY -= 20;
      } else if (e.key === 'ArrowDown') {
        playerY += 20;
      }
    }

function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, playerY, 20, 20);
    }

function drawObstacle() {
      ctx.fillStyle = 'red';
      ctx.fillRect(obstacleX, obstacleY, 40, 20);
    }

function updateScore() {
      ctx.font = '16px Arial';
      ctx.fillStyle = 'black';
      ctx.fillText('Score: ' + score, 10, 20);
    }

function detectCollision() {
      if (
        playerX < obstacleX + 40 &&
        playerX + 20 > obstacleX &&
        playerY < obstacleY + 20 &&
        playerY + 20 > obstacleY
      ) {
        gameOver();
      }
    }

function gameOver() {
      alert('Game Over! Your final score: ' + score);
      window.location.reload(); // Restart the game
    }

function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawObstacle();
      updateScore();
      detectCollision();

obstacleX -= 5; // Move the obstacle towards the player
      if (obstacleX <= 0) {
        obstacleX = 400;
        obstacleY = Math.floor(Math.random() * 300) + 50;
        score++; // Increase score when obstacle passes the player
      }

requestAnimationFrame(drawGame);
    }

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

Please note that this is a basic implementation to give you an idea of how an endless runner game can be created using JavaScript and HTML. You can further enhance and customize it according to your preferences.