<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #333;
font-family: Arial, sans-serif;
color: white;
}
.game-area {
position: relative;
width: 400px;
height: 600px;
margin: 20px 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; }
}
/* 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;
}
/* HUD (speed & distance) */
.hud {
width: 400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
font-size: 18px;
padding: 5px 0;
}
/* Logo */
.logo {
text-align: center;
font-size: 14px;
margin-top: 5px;
color: #ffeb3b;
font-weight: bold;
}
</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>
<div class="logo">🚗 Made by Asen 🚀</div>
<script>
const car = document.getElementById("car");
const gameArea = document.getElementById("gameArea");
const speedDisplay = document.getElementById("speed");
const distanceDisplay = document.getElementById("distance");
let carX = 170; // starting X
let carY = 480; // Y fixed, since car stays bottom
let speed = 0;
let distance = 0;
// Key press tracking
let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
function gameLoop() {
// Move left
if (keys["ArrowLeft"] && carX > 0) {
carX -= 5;
}
// Move right
if (keys["ArrowRight"] && carX < (gameArea.clientWidth - car.clientWidth)) {
carX += 5;
}
// Increase speed
if (keys["ArrowUp"] && speed < 200) {
speed += 1;
}
// Decrease speed
if (keys["ArrowDown"] && speed > 0) {
speed -= 1;
}
// Update car position
car.style.left = carX + "px";
// Update distance
distance += speed * 0.05; // small increment
distanceDisplay.textContent = Math.floor(distance);
speedDisplay.textContent = speed;
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
