Hello guys in this tutorial we will create simple car racing game Using HTML CSS and javaScript
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Car Racing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="relow">
<div class="roadWrapper"></div>
<div class="carWrapper">
<img src="animated-car.gif">
</div>
<audio autoplay> <source src="car-sound.mp3" type="audio/mpeg" >Your browser does not support the audio element.</audio>
</div>
<script type="text/javascript">
$(document).keydown(function(e){
if (e.which == 37) {
/** left arrow click (left keboard button) **/
$(".carWrapper").addClass("left_pressed");
$(".carWrapper").removeClass("right_pressed");
}else if (e.which == 38) {
$(".roadWrapper").removeClass("low-speed");
$(".roadWrapper").addClass("high-speed");
$(".relow").append('<audio autoplay> <source src="car-sound.mp3" type="audio/mpeg" >Your browser does not support the audio element.</audio>');
$(".carWrapper > img").attr("src", "animated-car.gif");
return false;
}else if (e.which == 39) {
$(".carWrapper").removeClass("left_pressed");
$(".carWrapper").addClass("right_pressed");
}else if (e.which == 40) {
$("audio").remove();
$(".roadWrapper").removeClass("high-speed");
$(".roadWrapper").addClass("low-speed");
}
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #0f62fe;
height: 100vh;
}
.roadWrapper {
position: relative;
width: 1300px;
height: 160px;
background: #525252;
transform-origin: bottom;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(50deg);
}
.roadWrapper:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #fff, 0%, #fff, 70%, #525252, 100%, #525252);
background-size: 120px;
animation: move 0.6s linear infinite;
}
@keyframes move {
0% {
background-position: 0px;
}
100% {
background-position: 120px;
}
}
.roadWrapper:after {
content: "";
position: absolute;
width: 100%;
background: #333;
transform: perspective(500px) rotateX(-25deg);
bottom: -30px;
transform-origin: top;
height: 30px;
}
.relow {
position: relative;
}
.carWrapper {
position: absolute;
top: 85px;
left: 120px;
}
.carWrapper.left_pressed {
top: 60px;
left: 150px;
}
.carWrapper.right_pressed {
top: unset;
bottom: 10px;
}
.roadWrapper.low-speed::before {
animation: move linear 1.6s infinite;
}
.roadWrapper.high-speed::before {
animation: move linear .3s infinite;
}
.high-speed ~.carWrapper {
animation: moveforwards 3s linear infinite;
}
@keyframes moveforwards {
0% {
transform: translateX(0px);
}
10% {
transform: translateX(100px);
}
20% {
transform: translateX(200px);
}
30% {
transform: translateX(300px);
}
40% {
transform: translateX(400px);
}
50% {
transform: translateX(500px);
}
60% {
transform: translateX(600px);
}
70% {
transform: translateX(700px);
}
80% {
transform: translateX(800px);
}
90% {
transform: translateX(900px);
}
100% {
transform: translateX(1000px);
}
}