Hello friends, today in this blog, we'll see how to create a responsive car game using HTML, CSS, and Javascript. In our previous blog, we saw how to create a filterable image gallery with a preview using HTML, CSS, and Javascript. Now it's time to create a responsive car game. I've also shared many projects related to Javascript. Don't forget to check here.
In this design [Responsive Car Game] there is a road in the middle of the page as you can see in the image above and a car in the middle of the road and a button at the bottom of the page. when you click on the start game button the game will start and a car sound will be played in the background. You can move the car by using the left and right arrow keys of the keyboard.
You may like these:-
- Responsive Animated Card Design
- Custom Context or Right Click Menu Design
- How to Detect User Location using Javascript
- How to Create Responsive Accordion Design
Preview is available here.
HTML Code
<!-- ----------------- Created By InCoder ----------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Game using Javascript - InCoder</title>
<link rel="stylesheet" href="main.css">
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="gameContainer">
<div class="message">Start Game</div>
<button class="startGame">Start</button>
<div class="carWrapper">
<div class="car"></div>
</div>
<div class="road"></div>
</div>
</body>
</html>
CSS Code
/* ----------------- Created By InCoder ----------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.gameContainer {
height: 100vh;
overflow: hidden;
position: relative;
}
.road {
width: 100vw;
height: 100vh;
background: url('https://drive.google.com/uc?id=1aVBHEfbgK1OKC9VgoC8b-Y8Hn0EsPRVP&export=view') center;
background-position-y: repeat;
background-size: 100% 100%;
}
.moveRoad {
animation: moveRoad 6s linear infinite;
}
@keyframes moveRoad {
0% {
background-position-y: 0rem;
}
100% {
background-position-y: 100rem;
}
}
.gameContainer .carWrapper {
left: 50%;
width: 76%;
bottom: 0%;
height: 45%;
overflow: hidden;
position: absolute;
transform: translate(-50%, -4%);
}
.gameContainer .car {
top: 50%;
left: 35%;
height: 35%;
position: absolute;
transform: rotate(90deg);
width: clamp(30%, 10vw, 50%);
background: no-repeat center;
background-size: contain;
}
.message {
top: 10%;
left: 50%;
color: #ddd252;
font-weight: 600;
position: absolute;
transform: translate(-50%, -50%);
font-size: clamp(1.7rem, 8vw, 6rem);
}
.startGame {
left: 50%;
bottom: 0%;
z-index: 1;
color: #fff;
cursor: pointer;
font-weight: 600;
padding: 0rem 5rem;
position: absolute;
border-radius: 1rem;
background: #ddd252;
border: 3px solid #ddd252;
transform: translate(-50%, -50%);
font-size: clamp(1.7rem, 8vw, 3rem);
}
Javascript Code
let road = document.querySelector('.road')
startGame = document.querySelector('.startGame')
message = document.querySelector('.message')
car = document.querySelector('.car')
carWrapper = document.querySelector('.carWrapper')
audio = new Audio('https://drive.google.com/uc?id=1tOELLh3MnHMaP15LlDIM-81-SQ5zS0lD&export=view')
crash = new Audio('https://drive.google.com/uc?id=1tg095mYxhJP12QAGf35am773uHrYlrEB&export=view')
audio.loop = true;
audio.volume = 0.2;
crash.volume = 0.8;
let carType = localStorage.getItem('carType')
let levelType = localStorage.getItem('levelType')
if (carType == null || levelType == null) {
localStorage.setItem('carType', 'redCar')
localStorage.setItem('levelType', 'easy')
} else {
car.style.backgroundImage = `url(https://drive.google.com/uc?id=1Nq7Xz4B28fA2jzzOyq9Ho0Ag1cteAZfW&export=view)`;
}
let carPosition = car.getBoundingClientRect();
let carWrapperPosition = carWrapper.getBoundingClientRect();
let carLeft = 35;
function increment() {
return (carLeft++);
}
function decrement() {
return (carLeft--);
}
let gameOver = () => {
audio.pause();
crash.play()
message.style.display = 'block'
message.innerHTML = 'Game Over'
road.classList.remove('moveRoad')
}
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
startGame.addEventListener('click', () => {
startGame.style.display = 'none'
message.style.display = 'none'
road.classList.toggle('moveRoad')
audio.play();
window.addEventListener('keydown', (e) => {
if (e.keyCode === 37) {
if (decrement() < -5) {
gameOver()
} else {
car.style.left = `${decrement()}%`;
}
}
if (e.keyCode === 39) {
if (increment() > 75) {
gameOver()
} else {
car.style.left = `${increment()}%`;
}
}
})
})
Top comments (1)
Nice!!