AI game creator

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

No:49477

←

Prev Next

→

Endless runner
Developer User21066｜Date and time 24/3/5 5:48:46
Build time 11.072 sec｜Game capacity 1.884KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Endless Runner Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    let player = {
      x: 50,
      y: 200,
      width: 30,
      height: 30,
      color: "blue"
    };
    
    let obstacle = {
      x: canvas.width,
      y: 200,
      width: 20,
      height: 20,
      color: "red",
      speed: 5
    };
    
    function drawPlayer() {
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }
    
    function drawObstacle() {
      ctx.fillStyle = obstacle.color;
      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }
    
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawPlayer();
      drawObstacle();
      
      player.x += 1;
      
      if (obstacle.x > 0) {
        obstacle.x -= obstacle.speed;
      } else {
        obstacle.x = canvas.width;
      }
      
      if (isColliding(player, obstacle)) {
        alert("Game Over!");
        window.location.reload();
      }
      
      requestAnimationFrame(updateGame);
    }
    
    function isColliding(rect1, rect2) {
      if (rect1.x < rect2.x + rect2.width &&
          rect1.x + rect1.width > rect2.x &&
          rect1.y < rect2.y + rect2.height &&
          rect1.y + rect1.height > rect2.y) {
          return true;
      }
      return false;
    }
    
    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowUp" && player.y > 0) {
        player.y -= 10;
      } else if (event.key === "ArrowDown" && player.y < canvas.height - player.height) {
        player.y += 10;
      }
    });
    
    updateGame();
  </script>
</body>
</html>