Car rasing long load's game

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

No:19372

←

Prev Next

→

Car rasing long load
Developer User8579｜Date and time 23/10/3 10:12:03
Build time 11.28 sec｜Game capacity 2.882KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Car Racing Game</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #333333;
      }

.game-container {
        position: relative;
        width: 300px;
        height: 500px;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
      }

.car {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 100px;
        background-color: #ff0000;
        border-radius: 10px;
      }

.obstacle {
        position: absolute;
        width: 100px;
        height: 20px;
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <div class="car"></div>
    </div>

let carPosition = 50;
        const carSpeed = 5;
        let obstacleInterval;
        let gameOver = false;
        let score = 0;

function moveCar(e) {
          if (gameOver) return;

if (e.key === "ArrowLeft" && carPosition > 0) {
            carPosition -= carSpeed;
          } else if (e.key === "ArrowRight" && carPosition < 100) {
            carPosition += carSpeed;
          }

car.style.left = `${carPosition}%`;
        }

function createObstacle() {
          if (gameOver) return;

const obstacle = document.createElement("div");
          obstacle.classList.add("obstacle");

const randPosition = Math.random() * 90;
          obstacle.style.left = `${randPosition}%`;

gameContainer.appendChild(obstacle);

moveObstacle(obstacle);
        }

function moveObstacle(obstacle) {
          let obstaclePosition = 0;

const moveInterval = setInterval(function () {
            if (obstaclePosition > 500) {
              clearInterval(moveInterval);
              obstacle.remove();
            }

obstaclePosition += carSpeed;
            obstacle.style.top = `${obstaclePosition}px`;

if (
              obstaclePosition > 450 &&
              obstaclePosition < 550 &&
              Math.abs(obstacle.offsetLeft - car.offsetLeft - 25) < 50
            ) {
              gameOver = true;
              clearInterval(obstacleInterval);
              alert(`Game over! Your score: ${score}`);
            }
          }, 10);
        }

document.addEventListener("keydown", moveCar);

obstacleInterval = setInterval(function () {
          createObstacle();
          score++;
        }, 3000);
      };
    </script>
  </body>
</html>