AI game creator

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

No:21200

←

Prev Next

→

A racing game
Developer User9389｜Date and time 23/10/14 2:10:26
Build time 62.597 sec｜Game capacity 2.515KB｜

Script

Sure, here's a simple racing game implemented as a single HTML file using JavaScript:

This simple racing game features a road represented by a rectangle and a car represented by another rectangle. The player controls the car using left and right arrow keys to move horizontally within the road. The game runs in a loop, updating the game state and redrawing the canvas every 20 milliseconds. The game ends when the player closes the browser tab or navigates away from the page.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, here's a simple racing game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Racing Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      roadHeight = 350;
      roadWidth = 200;
      carX = canvas.width / 2;
      carY = canvas.height - roadHeight - 20;
      gameSpeed = 5;
      roadColor = "#808080";
      carColor = "#0000FF";

// Start game loop
      setInterval(update, 20);
    }

// Update game state
    function update() {
      clearCanvas();
      drawRoad();
      drawCar();
      moveCar();
    }

// Clear the canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBackground();
    }

// Draw the road
    function drawRoad() {
      ctx.fillStyle = roadColor;
      ctx.fillRect(
        (canvas.width - roadWidth) / 2,
        canvas.height - roadHeight,
        roadWidth,
        roadHeight
      );
    }

// Draw the car
    function drawCar() {
      ctx.fillStyle = carColor;
      ctx.fillRect(carX, carY, 20, 30);
    }

// Move the car horizontally
    function moveCar() {
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowLeft" && carX > 0) {
          carX -= gameSpeed;
        } else if (event.key === "ArrowRight" && carX < canvas.width - 20) {
          carX += gameSpeed;
        }
      });
    }

// Draw the background
    function drawBackground() {
      ctx.fillStyle = "#FAFAFA";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

// Initialize the game when the page loads
    window.onload = init;

</script>
</body>
</html>
```