Car racing game with graphics witch you can race with other cars's game

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

No:36034

←

Prev Next

→

Car racing game with graphics witch you can race w..ALL
Developer User16504｜Date and time 24/1/16 7:14:07
Build time 12.557 sec｜Game capacity 3.138KB｜

Script

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

This game uses canvas to draw the car and opponent cars on the screen. You can control the car using the left and right arrow keys. The objective is to avoid collisions with the opponent cars and stay on the track. If a collision occurs, the game ends and an alert will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's an example of a 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 black;
    }
  </style>
</head>
<body>
  <canvas id="game" width="400" height="400"></canvas>

// Define the car and opponent cars
    var car = {
      x: 180,
      y: 350,
      width: 40,
      height: 80,
      speed: 5
    };

var opponentCars = [
      { x: 80, y: -80, width: 40, height: 80, speed: 3 },
      { x: 180, y: -160, width: 40, height: 80, speed: 4 },
      { x: 280, y: -240, width: 40, height: 80, speed: 6 }
    ];

var gameInterval;

// Start the game
    function startGame() {
      gameInterval = setInterval(updateGame, 20);
    }

// Update the game state and redraw the canvas
    function updateGame() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move the car
      if (car.x >= 0 && car.x <= canvas.width - car.width) {
        car.x += car.speed;
      }

// Move the opponent cars
      for (var i = 0; i < opponentCars.length; i++) {
        opponentCars[i].y += opponentCars[i].speed;

// Check for collision with the car
        if (isCollision(car, opponentCars[i])) {
          clearInterval(gameInterval);
          alert("Game Over!");
          return;
        }

// Reset opponent car position if it goes off the screen
        if (opponentCars[i].y > canvas.height) {
          opponentCars[i].y = -80;
        }

// Draw opponent car
        ctx.fillRect(
          opponentCars[i].x,
          opponentCars[i].y,
          opponentCars[i].width,
          opponentCars[i].height
        );
      }

// Draw the car
      ctx.fillRect(car.x, car.y, car.width, car.height);
    }

// Check for collision between two rectangles
    function isCollision(rect1, rect2) {
      return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
      );
    }

// Handle arrow key press to move the car
    document.onkeydown = function(e) {
      switch (e.keyCode) {
        case 37: // Left arrow
          car.speed = -5;
          break;
        case 39: // Right arrow
          car.speed = 5;
          break;
      }
    };

// Reset car speed when arrow key is released
    document.onkeyup = function(e) {
      if (e.keyCode === 37 || e.keyCode === 39) {
        car.speed = 0;
      }
    };

// Start the game when the page finishes loading
    window.onload = startGame;
  </script>
</body>
</html>
```