Traffic Racer Game Code | Traffic Racer Game Using Html Css Javascript







Traffic Racer Game Code | Traffic Racer Game Using Html Css Javascript





Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Traffic Racer Game. We use HTML, Css, and javascript for this Traffic Racer Game. I hope you enjoy our blog so let’s start with a basic HTML structure for the traffic Racer Game.

HTML Code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="newgame.css">
<!-- <script src="newgame.js"></script> -->
</head>
<body>
<div class="game">
<div class="score"></div>
<div class="highScore"></div>
<div class="startScreen">
<p class="ClickToStart">Click here to start the game <br><br></p>
<p> INSTRUCTIONS: <br>
Use Arrow keys to move the car <br>
If you hit any car then game will end</p>
</div>
<div class="gameArea"></div>
</div>
<script src="game.js"></script>
</body>
</html>

There is all the HTML code for the Traffic Racer Game. Now, you can see an output with CSS, then we write javascript for the Traffic Racer Game.

output

Traffic Racer Game Code | Traffic Racer Game Using Html Css Javascript

CSS code

 * {  
margin: 0;
padding: 0;
font-family: 'Lobster', cursive;
}
.game{
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hide {
display: none;
}
.startScreen {
width: 500px;
height: 107px;
line-height: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
margin: auto;
background-color: rgb(43, 205, 226);
text-align: center;
border-bottom: 2px solid rgb(132, 197, 197);
}
.score,
.highScore {
position: absolute;
top: 10px;
left: 20px;
text-align: center;
background-color: rgb(100, 224, 156);
width: 200px;
color: rgb(59, 40, 40);
line-height: 40px;
border-radius: 4px;
font-size: 1.2em;
}
.ClickToStart {
cursor: pointer;
}
.gameArea {
height: 100vh;
width: 400px;
margin: auto;
position: relative;
background-color: rgb(32, 32, 32);
overflow: hidden;
border-left: 4px dashed white;
border-right: 4px dashed white;
}
.car{
background: url(car.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 75px;
width: 50px;
position: absolute;
top: 520px;
}
.Opponents {
background: url(opponent car.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 75px;
width: 50px;
position: absolute;
top: 520px;
}
.roadLines {
height: 100px;
width: 10px;
background-color: white;
position: absolute;
margin-left: 195px;
}

Css Updated output

Traffic Racer Game Code | Traffic Racer Game Using Html Css Javascript

Javascript code 

     const score = document.querySelector('.score');  
const highScore = document.querySelector('.highScore');
const startScreen = document.querySelector('.startScreen');
const gameArea = document.querySelector('.gameArea');
const ClickToStart = document.querySelector('.ClickToStart');
// const grass = document.querySelector('.grass');
// const garden = document.querySelector('.garden');
ClickToStart.addEventListener('click', Start);
document.addEventListener('keydown', keydown);
document.addEventListener('keyup', keyup);
let keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false,
}
let player = {
speed: 5,
score: 0,
highScore: 0
};
function keydown(e) {
keys[e.key] = true
}
function keyup(e) {
keys[e.key] = false;
}
// starting the game
function Start() {
gameArea.innerHTML = "";
startScreen.classList.add('hide');
player.isStart = true;
player.score = 0;
window.requestAnimationFrame(Play);
// creating the road lines
for (i = 0; i < 5; i++) {
let roadLines = document.createElement('div');
roadLines.setAttribute('class', 'roadLines');
roadLines.y = (i * 140);
roadLines.style.top = roadLines.y + "px";
gameArea.appendChild(roadLines);
}
// creating the opponents car
for (i = 0; i < 3; i++) {
let Opponents = document.createElement('div');
Opponents.setAttribute('class', 'Opponents');
Opponents.y = ((i) * -300);
Opponents.style.top = Opponents.y + "px";
gameArea.appendChild(Opponents);
Opponents.style.left = Math.floor(Math.random() * 350) + "px";
Opponents.style.backgroundColor=randomColor();
}
let car = document.createElement('div');
car.setAttribute('class', 'car');
gameArea.appendChild(car);
player.x = car.offsetLeft;
player.y = car.offsetTop;
}
function randomColor(){
function c(){
let hex=Math.floor(Math.random()*256).toString(16);
return ("0"+String(hex)).substr(-2);
}
return "#"+c()+c()+c();
}
//play the game
function Play() {
let car = document.querySelector('.car');
let road = gameArea.getBoundingClientRect();
if (player.isStart) {
moveLines();
moveOpponents(car);
if (keys.ArrowUp && player.y > (road.top + 70)) { player.y -= player.speed }
if (keys.ArrowDown && player.y < (road.height - 75)) { player.y += player.speed }
if (keys.ArrowRight && player.x < 350) { player.x += player.speed }
if (keys.ArrowLeft && player.x > 0) { player.x -= player.speed }
car.style.top = player.y + "px";
car.style.left = player.x + "px";
highScore.innerHTML = "HighScore" + ":" + (player.highScore - 1);
player.score++;
player.speed += 0.01;
if (player.highScore < player.score) {
player.highScore++;
highScore.innerHTML = "HighScore" + ":" + (player.highScore - 1);
highScore.style.top="80px";
}
score.innerHTML = "Score" + ":" + (player.score - 1);
window.requestAnimationFrame(Play);
}
}
function moveLines() {
let roadLines = document.querySelectorAll('.roadLines');
roadLines.forEach(function (item) {
if (item.y >= 700)
item.y -= 700;
item.y += player.speed;
item.style.top = item.y + "px";
})
}
function moveOpponents(car) {
let Opponents = document.querySelectorAll('.Opponents');
Opponents.forEach(function (item) {
if (isCollide(car, item)) {
endGame();
}
if (item.y >= 750) {
item.y -= 900;
item.style.left = Math.floor(Math.random() * 350) + "px";
}
item.y += player.speed;
item.style.top = item.y + "px";
})
}
//check whether the cars collide or not
function isCollide(a, b) {
aRect = a.getBoundingClientRect();
bRect = b.getBoundingClientRect();
return !((aRect.top > bRect.bottom) || (aRect.bottom < bRect.top) || (aRect.right < bRect.left) || (aRect.left > bRect.right))
}
//game is end
function endGame() {
player.isStart = false;
player.speed = 5;
startScreen.classList.remove('hide');
}

Final output

Traffic Racer Game Code | Traffic Racer Game Using Html Css Javascript

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Traffic Racer Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Traffic Racer Game using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “Traffic Racer Game Code | Traffic Racer Game Using Html Css Javascript”

Leave a Comment