Car race's game | AI game creator

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

No:7502

1537

Car race
Developer User4042｜Date and time 23/7/8 7:49:40
Build time 26.925 sec｜Game capacity 4.833KB｜

This is a simple Car Race game implemented in a single HTML file using JavaScript. The game canvas is created using the `<canvas>` element, and the game logic is written within script tags. The game involves controlling a car using the left and right arrow keys to avoid obstacles falling from the top of the screen. The car object represents the player's car, and the obstacle object represents the falling obstacles. The game updates the position of the car and obstacle in the `updateGame` function, checks for collisions, and redraws the canvas. The score is displayed on the top left corner of the canvas. The game starts automatically when the page is loaded, and the player can control the car using the left and right arrow keys. If the car collides with an obstacle, the game ends and the score is displayed in an alert box. The game can be replayed by reloading the page. Please note that this implementation assumes keyboard input for controlling the car. The use of pictograms is not possible within the constraints of a single HTML file, but the game can still be played and enjoyed.

→ 　

0　

0　

　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

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

<script>
    // Get the game canvas
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");

// Create a car object
    const car = {
      x: 175,
      y: 350,
      width: 50,
      height: 90,
      speed: 5,
      movingLeft: false,
      movingRight: false
    };

// Create an obstacle object
    const obstacle = {
      x: Math.random() * 300 + 50,
      y: -50,
      width: 50,
      height: 50,
      speed: 4
    };

let score = 0;
    let gameInterval;

// Function to update the game state
    function updateGame() {
      clearCanvas();
      moveCar();
      moveObstacle();
      checkCollision();
      drawCar();
      drawObstacle();
      updateScore();
    }

// Function to clear the canvas
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

// Function to move the car
    function moveCar() {
      if (car.movingLeft && car.x > 0) {
        car.x -= car.speed;
      }
      if (car.movingRight && car.x + car.width < canvas.width) {
        car.x += car.speed;
      }
    }

// Function to move the obstacle
    function moveObstacle() {
      obstacle.y += obstacle.speed;

// Reset obstacle position and increase score if it goes out of the screen
      if (obstacle.y > canvas.height) {
        obstacle.x = Math.random() * 300 + 50;
        obstacle.y = -50;
        score++;
      }
    }

// Function to check collision between car and obstacle
    function checkCollision() {
      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
      ) {
        endGame();
      }
    }

// Function to draw the car
    function drawCar() {
      context.fillStyle = "blue";
      context.fillRect(car.x, car.y, car.width, car.height);
    }

// Function to draw the obstacle
    function drawObstacle() {
      context.fillStyle = "red";
      context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

// Function to update the score
    function updateScore() {
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 10, 30);
    }

// Function to start the game
    function startGame() {
      gameInterval = setInterval(updateGame, 20);

// Listen for keydown and keyup events to move the car
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);
    }

// Function to end the game
    function endGame() {
      clearInterval(gameInterval);
      document.removeEventListener("keydown", keyDownHandler);
      document.removeEventListener("keyup", keyUpHandler);
      alert("Game Over! Your score: " + score);
      score = 0;
      car.x = 175;
      obstacle.x = Math.random() * 300 + 50;
      obstacle.y = -50;
    }

// Function to handle keydown event
    function keyDownHandler(event) {
      if (event.keyCode === 37) {
        car.movingLeft = true;
      } else if (event.keyCode === 39) {
        car.movingRight = true;
      }
    }

// Function to handle keyup event
    function keyUpHandler(event) {
      if (event.keyCode === 37) {
        car.movingLeft = false;
      } else if (event.keyCode === 39) {
        car.movingRight = false;
      }
    }

// Start the game
    startGame();
  </script>
</body>
</html>
```

This is a simple Car Race game implemented in a single HTML file using JavaScript. The game canvas is created using the `<canvas>` element, and the game logic is written within script tags. The game involves controlling a car using the left and right arrow keys to avoid obstacles falling from the top of the screen.

The car object represents the player's car, and the obstacle object represents the falling obstacles. The game updates the position of the car and obstacle in the `updateGame` function, checks for collisions, and redraws the canvas. The score is displayed on the top left corner of the canvas.

The game starts automatically when the page is loaded, and the player can control the car using the left and right arrow keys. If the car collides with an obstacle, the game ends and the score is displayed in an alert box. The game can be replayed by reloading the page.

Please note that this implementation assumes keyboard input for controlling the car. The use of pictograms is not possible within the constraints of a single HTML file, but the game can still be played and enjoyed.