AI game creator

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

No:24536

←

Prev Next

→

Car crash
Developer User11638｜Date and time 23/11/9 15:57:58
Build time 113.741 sec｜Game capacity 3.807KB｜

Script

Sure, here's a basic example of a car crash game implemented as a single HTML file with JavaScript:

Score: 0

This game simulates a car driving on a road, and the player has to avoid crashing into obstacles. The player controls the car by dragging it horizontally across the road. The score increases for every frame that the player does not crash into an obstacle. Once the player crashes, a "Game Over!" alert is shown. Note that you will need to replace `'emozi_all/car.png'` and `'emozi_apple.png'` with the actual image URLs for the car and obstacle pictograms respectively.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure, here's a basic example of a car crash game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Car Crash Game</title>
  <style>
    #road {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: #333;
    }
    #car {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      height: 80px;
      width: 50px;
      background: url('car.png') no-repeat;
      background-size: cover;
    }
    #obstacle {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 80px;
      width: 50px;
      background: url('obstacle.png') no-repeat;
      background-size: cover;
    }
    #score {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="road"></div>
  <div id="car"></div>
  <div id="obstacle"></div>
  <div id="score">Score: 0</div>

// Game Constants
    var roadHeight = road.offsetHeight;

// Game State
    var hasCrashed = false;
    var gameScore = 0;

// Set initial positions
    car.style.left = carPosition + 'px';
    obstacle.style.top = obstaclePosition + 'px';

// Add event listeners for touch/mouse
    road.addEventListener('touchstart', handleTouch);
    road.addEventListener('mousedown', handleTouch);

// Game loop
    setInterval(function() {
      if (!hasCrashed) {
        moveObstacle();
        checkCollision();
        updateScore();
      }
    }, 10);

// Handle touch/mouse events
    function handleTouch(event) {
      carPosition = event.clientX || event.touches[0].clientX;
    }

// Move the obstacle downwards
    function moveObstacle() {
      obstaclePosition += 5;
      obstacle.style.top = obstaclePosition + 'px';

if (obstaclePosition > roadHeight) {
        obstaclePosition = -80;
        obstacle.style.top = obstaclePosition + 'px';
        obstacle.style.left = getRandomLane() + 'px';
      }
    }

// Check for collision between car and obstacle
    function checkCollision() {
      var carRect = car.getBoundingClientRect();
      var obstacleRect = obstacle.getBoundingClientRect();

if (
        carRect.top < obstacleRect.bottom &&
        carRect.right > obstacleRect.left &&
        carRect.left < obstacleRect.right &&
        carRect.bottom > obstacleRect.top
      ) {
        hasCrashed = true;
        alert('Game Over!');
      }
    }

// Update game score
    function updateScore() {
      gameScore += 1;
      score.textContent = 'Score: ' + gameScore;
    }

// Get a random position for the obstacle
    function getRandomPosition() {
      return Math.floor(Math.random() * -500);
    }

// Get a random lane for the obstacle
    function getRandomLane() {
      var lanes = [80, 180, 280];
      return lanes[Math.floor(Math.random() * lanes.length)];
    }
  </script>
</body>
</html>
```

Note that you will need to replace `'car.png'` and `'obstacle.png'` with the actual image URLs for the car and obstacle pictograms respectively.