Loop road survival's game | AI game creator

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

No:46437

64

Loop road survival
Developer User20087｜Date and time 24/2/24 22:20:12
Build time 9.841 sec｜Game capacity 2.732KB｜

→ 　

0　

0　

　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loop Road Survival</title>
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  canvas {
    background-color: #f0f0f0;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="480"></canvas>

<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  
  const player = {
    x: canvas.width / 2,
    y: canvas.height - 50,
    width: 30,
    height: 30,
    speed: 5
  };
  
  let obstacles = [];
  let score = 0;
  let gameOver = false;
  
  function drawPlayer() {
    ctx.fillStyle = '#0000FF';
    ctx.fillRect(player.x, player.y, player.width, player.height);
  }
  
  function drawObstacles() {
    ctx.fillStyle = '#FF0000';
    obstacles.forEach(obstacle => {
      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    });
  }
  
  function drawScore() {
    ctx.fillStyle = '#000000';
    ctx.font = '24px Arial';
    ctx.fillText('Score: ' + score, 10, 30);
  }
  
  function movePlayer(direction) {
    player.x += direction * player.speed;
    if (player.x < 0) {
      player.x = canvas.width;
    } else if (player.x > canvas.width) {
      player.x = 0;
    }
  }
  
  function spawnObstacle() {
    const obstacleWidth = Math.random() * (canvas.width - 20) + 20;
    const obstacleX = Math.random() * (canvas.width - obstacleWidth);
    const obstacle = {
      x: obstacleX,
      y: 0,
      width: obstacleWidth,
      height: 20
    };
    obstacles.push(obstacle);
  }
  
  function updateObstacles() {
    obstacles.forEach(obstacle => {
      obstacle.y += 2;
      if (obstacle.y > canvas.height) {
        obstacles.shift();
        score++;
      }
      if (obstacle.y + obstacle.height > player.y && obstacle.x + obstacle.width > player.x && obstacle.x < player.x + player.width) {
        gameOver = true;
      }
    });
  }
  
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (!gameOver) {
      drawPlayer();
      drawObstacles();
      drawScore();
      updateObstacles();
      if (Math.random() < 0.02) {
        spawnObstacle();
      }
    } else {
      ctx.fillStyle = '#FF0000';
      ctx.font = '48px Arial';
      ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
    }
    requestAnimationFrame(gameLoop);
  }
  
  document.addEventListener('keydown', event => {
    if (event.key === 'ArrowLeft') {
      movePlayer(-1);
    } else if (event.key === 'ArrowRight') {
      movePlayer(1);
    }
  });
  
  gameLoop();
</script>
</body>
</html>