AI game creator

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

No:10068

←

Prev Next

→

Racing game
Developer User4474｜Date and time 23/7/29 0:28:27
Build time 18.786 sec｜Game capacity 2.195KB｜

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>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
<canvas id="gameCanvas" width="500" height="300"></canvas>

// initialize the game
  function initialize() {
    canvas = document.getElementById('gameCanvas');
    context = canvas.getContext('2d');
    car = {
      x: 225,
      y: 250,
      width: 50,
      height: 50
    };
    obstacle = {
      x: Math.random() * (canvas.width - 50),
      y: 0,
      width: 50,
      height: 50
    };
    gameLoop = setInterval(update, 20);
  }

// update game objects and canvas
  function update() {
    context.clearRect(0, 0, canvas.width, canvas.height);

// draw car
    context.fillStyle = 'blue';
    context.fillRect(car.x, car.y, car.width, car.height);

// draw obstacle
    context.fillStyle = 'red';
    context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

// move obstacle downwards
    obstacle.y += 2;

// check collision
    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)) {
      // collision occurred, stop game
      clearInterval(gameLoop);
      displayGameOver();
    }
  }

// display game over message
  function displayGameOver() {
    context.fillStyle = 'black';
    context.font = '30px Arial';
    context.fillText('Game Over', canvas.width/2 - 80, canvas.height/2);
  }

// handle key press events
  document.addEventListener('keydown', function(event) {
    const key = event.keyCode;

// move left
    if (key === 37) {
      car.x -= 10;
      if (car.x < 0) {
        car.x = 0;
      }
    }
    // move right
    else if (key === 39) {
      car.x += 10;
      if (car.x + car.width > canvas.width) {
        car.x = canvas.width - car.width;
      }
    }
  });

// start the game when the page loads
  window.onload = function() {
    initialize();
  };
</script>
</body>
</html>