Make a destruction car game's game

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

No:12902

←

Prev Next

→

Make a destruction car game
Developer User5619｜Date and time 23/8/24 23:34:12
Build time 23.685 sec｜Game capacity 2.532KB｜

Script

Sure, here's an example of a simple destruction car game implemented as a single HTML file with JavaScript:

Score: 0

This game creates a simple interaction where the user taps on the car to make it jump. The car needs to avoid the obstacle moving from right to left. The user's goal is to avoid collision with the obstacle and earn points by successfully avoiding it for as long as possible. The game ends if a collision occurs, and a final score is displayed. The game is designed to be played on a smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure, here's an example of a simple destruction car game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Destruction Car Game</title>
  <style>
    #car {
      position: relative;
      left: 0;
      top: 100px;
      width: 80px;
      height: 40px;
      background-color: red;
    }

#obstacle {
      position: absolute;
      right: 0;
      top: 100px;
      width: 80px;
      height: 40px;
      background-color: green;
    }

#score {
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="car"></div>
  <div id="obstacle"></div>
  <div id="score">Score: 0</div>

// Move the obstacle to the left and check for collision with the car
    function gameLoop() {
      var carPosition = car.getBoundingClientRect();
      var obstaclePosition = obstacle.getBoundingClientRect();

if (isColliding(carPosition, obstaclePosition)) {
        endGame();
        return;
      }

obstacle.style.right = (parseInt(obstacle.style.right) + 5) + 'px';
      score++;
      scoreDisplay.innerText = 'Score: ' + score;

requestAnimationFrame(gameLoop);
    }

// Check if the car and obstacle are colliding
    function isColliding(rect1, rect2) {
      return !(rect1.right < rect2.left ||
               rect1.left > rect2.right ||
               rect1.bottom < rect2.top ||
               rect1.top > rect2.bottom);
    }

// End the game and display the final score
    function endGame() {
      alert('Game over! Final score: ' + score);
    }

// Set up event listeners for touch events on smartphone
    car.addEventListener('touchstart', function() {
      var carPosition = car.getBoundingClientRect();
      car.style.top = (carPosition.top - 50) + 'px';
    });

// Start the game loop
    requestAnimationFrame(gameLoop);
  </script>
</body>
</html>
```