Responsive Car Game using HTML, CSS, and Javascript

#html #css #javascript #incoder

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.

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()}%`;
            }
        }
    })
})

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more