AI game creator

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

No:20061

←

Prev Next

→

Car racing game
Developer User8936｜Date and time 23/10/8 3:45:54
Build time 24.306 sec｜Game capacity 3.896KB｜

Script

Sure! Here's a simple car racing game implemented as a single HTML file using JavaScript:

To play the game, you can copy the above code into a new HTML file and open it in a web browser. Use the left and right arrow keys to control the car and avoid colliding with the obstacles. The game will display your score, and when a collision occurs, it will show a game over message with your final score. Please note that this is a very basic implementation and can be further enhanced with additional features and graphics based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple car racing game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Car Racing Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Game Variables
    var canvas, ctx, car, obstacles, interval, score;
    
    // Car Object
    var Car = function(x, y) {
      this.x = x;
      this.y = y;
      this.width = 50;
      this.height = 100;
      this.speedX = 0;
      
      this.update = function() {
        ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      
      this.moveLeft = function() {
        if (this.x > 0) {
          this.x -= 10;
        }
      }
      
      this.moveRight = function() {
        if (this.x < canvas.width - this.width) {
          this.x += 10;
        }
      }
    };
    
    // Obstacle Object
    var Obstacle = function(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      
      this.update = function() {
        ctx = canvas.getContext("2d");
        ctx.fillStyle = "#000000";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      
      this.isColliding = function(car) {
        return this.x < car.x + car.width && this.x + this.width > car.x && this.y < car.y + car.height && this.y + this.height > car.y;
      }
    };
    
    // Game Functions
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      car = new Car(175, 300);
      obstacles = [];
      score = 0;
      
      interval = setInterval(updateGameArea, 20);
      window.addEventListener('keydown', function(e) {
        if (e.keyCode === 37) { // Left Arrow
          car.moveLeft();
        } else if (e.keyCode === 39) { // Right Arrow
          car.moveRight();
        }
      });
    }
    
    function updateGameArea() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Update and draw car
      car.update();
      
      // Create obstacles randomly
      if (Math.random() < 0.05) {
        var minWidth = 50;
        var maxWidth = 200;
        var width = Math.floor(Math.random() * (maxWidth - minWidth + 1) + minWidth);
        var xPos = Math.floor(Math.random() * (canvas.width - width));
        obstacles.push(new Obstacle(xPos, -100, width, 100));
      }
      
      // Update and draw obstacles
      for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].y += 5; // Move obstacle downwards
        obstacles[i].update();
        
        // Check collision with car
        if (obstacles[i].isColliding(car)) {
          clearInterval(interval); // Stop game
          alert("Game Over! Your score: " + score);
          return;
        }
        
        // Remove obstacles that are outside the canvas
        if (obstacles[i].y > canvas.height) {
          obstacles.splice(i, 1);
          score++;
        }
      }
      
      // Display score
      ctx.font = "20px Arial";
      ctx.fillStyle = "#000000";
      ctx.fillText("Score: " + score, 10, 30);
    }
  </script>
  
  <script>
    // Start the game
    window.onload = function() {
      startGame();
    };
  </script>
</body>
</html>
```

Please note that this is a very basic implementation and can be further enhanced with additional features and graphics based on your requirements.