<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #222;
font-family: Arial, sans-serif;
color: white;
.hud {
width: 400px;
margin: 10px auto;
display: flex;
justify-content: space-between;
font-size: 18px;
.game-area {
position: relative;
width: 400px;
height: 600px;
margin: 0 auto;
background: #555;
border: 3px solid #fff;
overflow: hidden;
/* Road lines */
.line {
position: absolute;
width: 10px;
height: 80px;
background: white;
left: 195px;
animation: moveLines 1s linear infinite;
.line:nth-child(2) { top: -200px; }
.line:nth-child(3) { top: -400px; }
.line:nth-child(4) { top: -600px; }
@keyframes moveLines {
0% { top: -100px; }
100% { top: 700px; }
/* Player Car */
.car {
position: absolute;
bottom: 20px;
left: 170px;
width: 60px;
height: 100px;
background: red;
border-radius: 10px;
.car::before, .car::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
.car::before { top: 10px; left: -10px; }
.car::after { top: 10px; right: -10px; }
/* Enemy Cars */
.enemy {
position: absolute;
width: 60px;
height: 100px;
background: blue;
border-radius: 10px;
/* Logo */
.logo {
text-align: center;
font-size: 14px;
margin-top: 5px;
color: #ffeb3b;
font-weight: bold;
}
/* Game Over */
.game-over {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
font-weight: bold;
color: yellow;
text-shadow: 2px 2px 5px black;
display: none;
</style>
</head>
<body>
<div class="hud">
<div>Speed: <span id="speed">0</span> km/h</div>
<div>Distance: <span id="distance">0</span> m</div>
</div>
<div class="game-area" id="gameArea">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="car" id="car"></div>
<div class="game-over" id="gameOver"> GAME OVER </div>
</div>
<div class="logo"> Made by Asen </div>
<!-- Sounds -->
<audio id="bgSound" loop>
<source src="https://actions.google.com/sounds/v1/transportation/car_passing_by.ogg"
type="audio/ogg">
</audio>
<audio id="crashSound">
<source src="https://actions.google.com/sounds/v1/cartoon/cartoon_boing.ogg" type="audio/ogg">
</audio>
<script>
const car = document.getElementById("car");
const gameArea = document.getElementById("gameArea");
const speedDisplay = document.getElementById("speed");
const distanceDisplay = document.getElementById("distance");
const gameOverText = document.getElementById("gameOver");
const bgSound = document.getElementById("bgSound");
const crashSound = document.getElementById("crashSound");
let carX = 170;
let speed = 0;
let distance = 0;
let keys = {};
let enemies = [];
let gameRunning = true;
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
function spawnEnemy() {
if (!gameRunning) return;
const enemy = document.createElement("div");
enemy.classList.add("enemy");
enemy.style.top = "-120px";
enemy.style.left = Math.floor(Math.random() * 340) + "px"; // random lane
gameArea.appendChild(enemy);
enemies.push(enemy);
function checkCollision(rect1, rect2) {
return !(
rect1.top > rect2.bottom ||
rect1.bottom < rect2.top ||
rect1.left > rect2.right ||
rect1.right < rect2.left
);
function gameLoop() {
if (!gameRunning) return;
// Movement
if (keys["ArrowLeft"] && carX > 0) carX -= 5;
if (keys["ArrowRight"] && carX < (gameArea.clientWidth - car.clientWidth)) carX += 5;
if (keys["ArrowUp"] && speed < 200) speed += 1;
if (keys["ArrowDown"] && speed > 0) speed -= 1;
car.style.left = carX + "px";
// Distance update
distance += speed * 0.05;
distanceDisplay.textContent = Math.floor(distance);
speedDisplay.textContent = speed;
// Enemy movement
enemies.forEach((enemy, i) => {
let top = parseInt(enemy.style.top || 0);
enemy.style.top = top + speed * 0.1 + "px";
// Collision check
const carRect = car.getBoundingClientRect();
const enemyRect = enemy.getBoundingClientRect();
if (checkCollision(carRect, enemyRect)) {
gameRunning = false;
crashSound.play();
gameOverText.style.display = "block";
// Remove enemy if off screen
if (top > 600) {
enemy.remove();
enemies.splice(i, 1);
}
});
requestAnimationFrame(gameLoop);
// Start the game
bgSound.play();
setInterval(spawnEnemy, 2000); // spawn every 2 seconds
gameLoop();
</script>
</body>
</html>
