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

No:31403

The game I want is a car racing game where everyth..ALL
Developer User15125｜Date and time 23/12/26 18:51:16
Build time 38.357 sec｜Game capacity 4.071KB｜

Script

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

Car Racing Game

Score: 0

The code above creates a simple car racing game using HTML, CSS, and JavaScript. It features a car controlled by the left and right arrow keys and obstacles that the player must avoid. The game keeps track of the player's score, increasing it over time. If the car collides with an obstacle, the game ends and the player's final score is displayed in an alert message. Please note that you'll need to replace the `emozi_all/car.png` and `emozi_chicken.png` URLs in the CSS with actual image URLs or provide image files with those names in the same directory as the HTML file.

←

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 containing JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Car Racing Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 400px;
      border: 1px solid #000;
    }
    
    #car {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 120px;
      background-image: url("car.png");
      background-size: cover;
    }
    
    .obstacle {
      position: absolute;
      width: 50px;
      height: 50px;
      background-image: url("obstacle.png");
      background-size: cover;
    }
    
    #score {
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Car Racing Game</h1>
  <div id="game-container">
    <div id="car"></div>
  </div>
  <div id="score">Score: 0</div>
  
  <script>
    // Game variables
    var car = document.getElementById("car");
    var score = document.getElementById("score");
    var gameContainer = document.getElementById("game-container");
    var obstacles = [];
    var gameSpeed = 3;
    var scoreValue = 0;
  
    // Start game
    function startGame() {
      document.addEventListener("keydown", moveCar);
      setInterval(updateGame, 20);
      setInterval(increaseScore, 100);
      createObstacle();
    }
  
    // Move car
    function moveCar(e) {
      if (e.key === "ArrowLeft") {
        car.style.left = (parseInt(car.style.left, 10) - 10) + "px";
      } else if (e.key === "ArrowRight") {
        car.style.left = (parseInt(car.style.left, 10) + 10) + "px";
      }
    }
  
    // Update game
    function updateGame() {
      // Check collision
      for (var i = 0; i < obstacles.length; i++) {
        if (isCollision(obstacles[i], car)) {
          endGame();
          return;
        }
      }
    
      // Move obstacles
      for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].style.top = (parseInt(obstacles[i].style.top, 10) + gameSpeed) + "px";
    
        // Remove obstacles that go beyond the game container
        if (parseInt(obstacles[i].style.top, 10) > gameContainer.offsetHeight) {
          gameContainer.removeChild(obstacles[i]);
          obstacles.splice(i, 1);
          i--;
        }
      }
    }
  
    // Create obstacle
    function createObstacle() {
      var obstacle = document.createElement("div");
      obstacle.classList.add("obstacle");
      obstacle.style.left = Math.floor(Math.random() * (gameContainer.offsetWidth - 50)) + "px";
      obstacle.style.top = -50 + "px";
      gameContainer.appendChild(obstacle);
      obstacles.push(obstacle);
    }
  
    // Increase score
    function increaseScore() {
      scoreValue++;
      score.innerText = "Score: " + scoreValue;
    }
  
    // Check collision between two elements
    function isCollision(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right ||
        rect1.right < rect2.left
      );
    }
  
    // End game
    function endGame() {
      clearInterval(updateGame);
      clearInterval(increaseScore);
      document.removeEventListener("keydown", moveCar);
      alert("Game Over! Your score: " + scoreValue);
    }
  
    // Start the game
    startGame();
  </script>
</body>
</html>
```

The code above creates a simple car racing game using HTML, CSS, and JavaScript. It features a car controlled by the left and right arrow keys and obstacles that the player must avoid. The game keeps track of the player's score, increasing it over time. If the car collides with an obstacle, the game ends and the player's final score is displayed in an alert message. Please note that you'll need to replace the `car.png` and `obstacle.png` URLs in the CSS with actual image URLs or provide image files with those names in the same directory as the HTML file.