runner's game | AI game creator

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

No:37711

29

runner
Developer User17102｜Date and time 24/1/21 12:56:06
Build time 8.271 sec｜Game capacity 2.339KB｜

Sure! Here's an example of a simple endless runner game implemented as a single HTML file with JavaScript code enclosed in script tags:

This game creates a canvas where it draws a player object as a blue circle that can jump. The player can jump once by pressing the up arrow key. The game loop continuously redraws the game elements on the canvas to create the illusion of animation. Feel free to modify and enhance the game according to your preferences!

→ 　

0　

0　

　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple endless runner game implemented as a single HTML file with JavaScript code enclosed in script tags:

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

<script>
    // Game variables
    var playerX = 50;
    var playerY = 150;
    var playerSpeed = 5;
    var isJumping = false;
    var jumpHeight = 80;
  
    // Game initialization
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
  
    // Handle player movement
    function handleInput(event) {
      if (event.key === "ArrowUp" && !isJumping) {
        isJumping = true;
        jump();
      }
    }
  
    // Handle player jump
    function jump() {
      var jumpInterval = setInterval(function() {
        if (playerY > 70) {
          playerY -= 10;
        } else {
          clearInterval(jumpInterval);
          isJumping = false;
          fall();
        }
        draw();
      }, 10);
    }
  
    // Handle player falling after jump
    function fall() {
      var fallInterval = setInterval(function() {
        if (playerY < 150) {
          playerY += 10;
        } else {
          clearInterval(fallInterval);
        }
        draw();
      }, 10);
    }
  
    // Draw the game elements
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      // Draw player
      context.beginPath();
      context.arc(playerX, playerY, 10, 0, 2 * Math.PI);
      context.fillStyle = "blue";
      context.fill();
  
      // Draw ground
      context.beginPath();
      context.moveTo(0, 160);
      context.lineTo(canvas.width, 160);
      context.stroke();
    }
  
    // Game loop
    function gameLoop() {
      window.addEventListener("keydown", handleInput);
      draw();
    }
  
    // Start the game
    gameLoop();
  </script>
</body>
</html>
```

This game creates a canvas where it draws a player object as a blue circle that can jump. The player can jump once by pressing the up arrow key. The game loop continuously redraws the game elements on the canvas to create the illusion of animation.

Feel free to modify and enhance the game according to your preferences!