Scribd
Upload
47 views6 pages

Car Game

The document is an HTML code for a 3-lane car game that allows players to navigate a car while avoiding obstacles. It includes features such as score tracking, different difficulty modes, and a nitro boost option. The game is designed with responsive styling and includes audio elements for background music and sound effects.

Uploaded by

beginner2568
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
47 views6 pages

Car Game

The document is an HTML code for a 3-lane car game that allows players to navigate a car while avoiding obstacles. It includes features such as score tracking, different difficulty modes, and a nitro boost option. The game is designed with responsive styling and includes audio elements for background music and sound effects.

Uploaded by

beginner2568
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-Lane Car Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
}

#game {
width: 320px;
height: 600px;
position: relative;
overflow: hidden;
border: 4px solid #fff;
background-size: cover;
background-repeat: repeat-y;
animation: scrollRoad 3s linear infinite;
}

@keyframes scrollRoad {
from { background-position-y: 0; }
to { background-position-y: 600px; }
}

.car, .obstacle {
width: 60px;
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
}

.car {
bottom: 10px;
left: 130px;
z-index: 2;
transition: left 0.2s ease;
}

.boosting {
filter: drop-shadow(0 0 15px cyan) brightness(1.4);
}

.obstacle {
top: -120px;
filter: drop-shadow(2px 2px 5px black);
}

.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 5;
}

button {
margin: 10px;
padding: 12px 20px;
font-size: 16px;
background: #28a745;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}

#scoreDisplay, #highScoreDisplay {
position: absolute;
top: 10px;
left: 10px;
color: white;
z-index: 3;
font-size: 16px;
}

#highScoreDisplay {
top: 30px;
}

#nitroBtn {
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px 12px;
border-radius: 50%;
background: orange;
color: white;
font-weight: bold;
z-index: 4;
border: none;
font-size: 12px;
}
</style>
</head>
<body>
<div id="game">
<div id="startScreen" class="overlay">
<h2>3-Lane Car Game</h2>
<button onclick="selectMode('easy')">Easy</button>
<button onclick="selectMode('normal')">Normal</button>
<button onclick="selectMode('hard')">Hard</button>
</div>
<div id="gameOverScreen" class="overlay" style="display:none;">
<h2>Game Over</h2>
<button onclick="restartGame()">Restart</button>
</div>

<div id="scoreDisplay">Score: 0</div>


<div id="highScoreDisplay">High Score: 0</div>

<button id="nitroBtn" onclick="enableTouchNitro()">NITRO</button>

<div id="car" class="car" style="background-image: url('car.webp');"></div>


</div>

<!-- Sounds -->


<audio id="bgSound" src="bg.mp3" loop></audio>
<audio id="nitroSound" src="nitro.mp3"></audio>
<audio id="crashSound" src="crash.mp3"></audio>

<script>
const lanes = [20, 130, 240];
let laneIndex = 1;
let score = 0;
let highScore = 0;
let speed = 4;
let isRunning = false;
let isNitro = false;

const game = document.getElementById('game');


const car = document.getElementById('car');
const scoreDisplay = document.getElementById('scoreDisplay');
const highScoreDisplay = document.getElementById('highScoreDisplay');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');

const bgSound = document.getElementById('bgSound');


const nitroSound = document.getElementById('nitroSound');
const crashSound = document.getElementById('crashSound');

const backgrounds = ['road1.webp', 'road2.webp', 'road3.webp'];


let scrollAnim = 'scrollRoad 3s linear infinite';
let obstacleInterval, scoreInterval;

document.addEventListener('keydown', e => {
if (!isRunning) return;
if (e.key === 'ArrowLeft' && laneIndex > 0) {
laneIndex--;
car.style.left = lanes[laneIndex] + 'px';
}
if (e.key === 'ArrowRight' && laneIndex < 2) {
laneIndex++;
car.style.left = lanes[laneIndex] + 'px';
}
if (e.key.toLowerCase() === 'q') {
startNitro();
}
});

document.addEventListener('keyup', e => {
if (e.key.toLowerCase() === 'q') {
stopNitro();
}
});

game.addEventListener('touchstart', e => {
if (!isRunning) return;
const x = e.touches[0].clientX;
const rect = game.getBoundingClientRect();
if (x < rect.left + rect.width / 2 && laneIndex > 0) {
laneIndex--;
} else if (laneIndex < 2) {
laneIndex++;
}
car.style.left = lanes[laneIndex] + 'px';
});

function selectMode(mode) {
if (mode === 'easy') speed = 4;
if (mode === 'normal') speed = 6;
if (mode === 'hard') speed = 8;
startScreen.style.display = 'none';
startGame();
}

function startGame() {
isRunning = true;
laneIndex = 1;
score = 0;
car.style.left = lanes[laneIndex] + 'px';
scoreDisplay.textContent = 'Score: 0';
highScoreDisplay.textContent = 'High Score: ' + highScore;
gameOverScreen.style.display = 'none';
game.style.backgroundImage = `url('${backgrounds[Math.floor(Math.random() *
backgrounds.length)]}')`;
game.style.animation = scrollAnim;

bgSound.currentTime = 0;
bgSound.play();

document.querySelectorAll('.obstacle').forEach(el => el.remove());

obstacleInterval = setInterval(spawnObstacle, 1200);


scoreInterval = setInterval(() => {
score += isNitro ? 2 : 1;
scoreDisplay.textContent = 'Score: ' + score;
if (score > highScore) {
highScore = score;
highScoreDisplay.textContent = 'High Score: ' + highScore;
}
}, 400);
}

function restartGame() {
gameOverScreen.style.display = 'none';
startGame();
}

function gameOver() {
isRunning = false;
clearInterval(obstacleInterval);
clearInterval(scoreInterval);
stopNitro();
bgSound.pause();
crashSound.currentTime = 0;
crashSound.play();
gameOverScreen.style.display = 'flex';
}

function spawnObstacle() {
const lane = Math.floor(Math.random() * 3);
const obs = document.createElement('div');
obs.className = 'obstacle';
obs.style.left = lanes[lane] + 'px';
obs.style.backgroundImage = "url('orange-car.png')";
game.appendChild(obs);

let pos = -120;


const move = setInterval(() => {
if (!isRunning) {
clearInterval(move);
obs.remove();
return;
}

pos += isNitro ? speed * 2 : speed;


obs.style.top = pos + 'px';

if (pos > 600) {


clearInterval(move);
obs.remove();
}

const carRect = car.getBoundingClientRect();


const obsRect = obs.getBoundingClientRect();
if (
carRect.left < obsRect.right &&
carRect.right > obsRect.left &&
carRect.top < obsRect.bottom &&
carRect.bottom > obsRect.top
) {
clearInterval(move);
obs.remove();
gameOver();
}
}, 20);
}

function startNitro() {
if (!isRunning || isNitro) return;
isNitro = true;
car.classList.add('boosting');
game.style.animation = 'scrollRoad 1.5s linear infinite';
nitroSound.currentTime = 0;
nitroSound.play();
}

function stopNitro() {
isNitro = false;
car.classList.remove('boosting');
game.style.animation = scrollAnim;
nitroSound.pause();
}

function enableTouchNitro() {
if (isNitro) stopNitro();
else startNitro();
}
</script>
</body>
</html>

You might also like