AI game creator

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

No:50885

116

←

Prev Next

→

Racing game
Developer User21386｜Date and time 24/3/10 3:12:46
Build time 9.082 sec｜Game capacity 2.353KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Racing Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

let car = {
      x: 50,
      y: 200,
      width: 50,
      height: 30,
      speed: 5
    };

let obstacles = [
      { x: 600, y: 50, width: 30, height: 60, speed: 4 },
      { x: 600, y: 200, width: 30, height: 60, speed: 3 }
    ];

let score = 0;

function drawCar() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(car.x, car.y, car.width, car.height);
    }

function drawObstacles() {
      ctx.fillStyle = 'red';
      obstacles.forEach((obstacle) => {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
      });
    }

function moveObstacles() {
      obstacles.forEach((obstacle) => {
        obstacle.x -= obstacle.speed;
        if (obstacle.x < 0) {
          obstacle.x = 800;
        }
      });
    }

function checkCollision() {
      obstacles.forEach((obstacle) => {
        if (car.x < obstacle.x + obstacle.width &&
            car.x + car.width > obstacle.x &&
            car.y < obstacle.y + obstacle.height &&
            car.y + car.height > obstacle.y) {
          gameOver();
        }
      });
    }

function gameOver() {
      alert(`Game Over! Your score: ${score}`);
      window.location.reload();
    }

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

function updateGameArea() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      checkCollision();
      moveObstacles();
      updateScore();
      drawCar();
      drawObstacles();
      requestAnimationFrame(updateGameArea);
    }

function moveUp() {
      if (car.y > 0) {
        car.y -= car.speed;
      }
    }

function moveDown() {
      if (car.y < canvas.height - car.height) {
        car.y += car.speed;
      }
    }

document.addEventListener('keydown', (event) => {
      switch(event.keyCode) {
        case 38: // Up arrow
          moveUp();
          break;
        case 40: // Down arrow
          moveDown();
          break;
      }
    });

updateGameArea();
  </script>
</body>
</html>