Car driving simulator's game | AI game creator

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

No:40429

71

Car driving simulator
Developer User16733｜Date and time 24/2/2 16:33:20
Build time 10.697 sec｜Game capacity 2.65KB｜

Explanation: The code above demonstrates a simple car driving simulator game implemented as a single HTML file using JavaScript. It utilizes the `mousemove` event to detect the tilt of a smartphone and adjusts the position of the car accordingly. The game consists of a road represented by a grey div with a fixed height and the car represented by a div placed at the bottom center of the road using absolute positioning. The script uses the `getElementById` method to retrieve the references to the road and car elements. The `handleOrientation` function is registered as the event listener for the `mousemove` event. This function retrieves the tilt value (`event.beta`) from the event object and adjusts the car's position based on the tilt. If the tilt is less than -5, the car moves left, and if the tilt is greater than 5, the car moves right. The car's position is updated by modifying the `left` property of the car element. The code also includes boundary checks to restrict the car's movement within the road boundaries. The car's position is limited to a range of 10% to 90% of the road's width (represented by `currentX`). If the current position exceeds these limits, it is clamped accordingly. To enhance the game experience, you can replace the `emozi_all/game.png` with an actual image of a car. Please make sure to have the image file present in the same directory as the HTML file and update the `url('emozi_all/game.png')` in the CSS section.

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Car Driving Simulator</title>
  <style>
    #road {
      width: 100%;
      height: 400px;
      background: grey;
      position: relative;
      overflow: hidden;
    }

#car {
      width: 60px;
      height: 120px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-image: url('car.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="road">
    <div id="car"></div>
  </div>
  
  <script>
    window.addEventListener('deviceorientation', handleOrientation);

const car = document.getElementById('car');
    let currentX = 50;

function handleOrientation(event) {
      const x = event.beta;

// Adjusting car position based on the device's tilt
      if (x < -5) {
        currentX -= 1;
      } else if (x > 5) {
        currentX += 1;
      }
      
      // Restricting car movement within the road boundaries
      if (currentX < 10) {
        currentX = 10;
      } else if (currentX > 90) {
        currentX = 90;
      }

car.style.left = `${currentX}%`;
    }
  </script>
</body>
</html>
```

Explanation:
The code above demonstrates a simple car driving simulator game implemented as a single HTML file using JavaScript. It utilizes the `deviceorientation` event to detect the tilt of a smartphone and adjusts the position of the car accordingly.

The game consists of a road represented by a grey div with a fixed height and the car represented by a div placed at the bottom center of the road using absolute positioning. The script uses the `getElementById` method to retrieve the references to the road and car elements.

The `handleOrientation` function is registered as the event listener for the `deviceorientation` event. This function retrieves the tilt value (`event.beta`) from the event object and adjusts the car's position based on the tilt. If the tilt is less than -5, the car moves left, and if the tilt is greater than 5, the car moves right. The car's position is updated by modifying the `left` property of the car element.

The code also includes boundary checks to restrict the car's movement within the road boundaries. The car's position is limited to a range of 10% to 90% of the road's width (represented by `currentX`). If the current position exceeds these limits, it is clamped accordingly.

To enhance the game experience, you can replace the `car.png` with an actual image of a car. Please make sure to have the image file present in the same directory as the HTML file and update the `url('car.png')` in the CSS section.