Here is an animated car race game using HTML/CSS and Javascript. In which two car will move ,the one first cross the line will win. There is a button ,the game will start after the button is clicked.
HTML Code
<div class="track">
<div>
<button onclick=start1()>Click Here to Start</button>
</div>
<div class="line"></div>
<div id="car"></div>
<div id="car2"></div>
</div>
<script src="script.js"></script>
CSS Code
*{
margin: 0;
padding: 0;
}
/* Track Styling and positioning */
.track {
background-color: blue;
position: absolute;
width: 100vw;
height: 100vh;
}
#car {
background-image: url('./Images/car1.png');
background-repeat: no-repeat;
background-size: cover;
width: 35rem;
height: 15.699rem;
position: absolute;
bottom: 50px;
margin-top: 500px;
left: 0;
}
#car2 {
background-image: url('./Images/car2.png');
background-color: aliceblue;
background-repeat: no-repeat;
background-size: cover;
width: 35rem;
height: 15.699rem;
position: absolute;
top: 20%;
left: 0;
}
.line{
background-color: black;
width: .5%;
margin-left: 1200px;
height: 100vh;
}
@keyframes trackanimation {
100% {
transform: translate(-500vw);
}
}
Javascript Code
const car = document.getElementById('car');
var computedStyle=window.getComputedStyle(car)
const car2=document.getElementById('car2')
var computedStyle2=window.getComputedStyle(car2)
car2.style.left="0px"
var count=0;
var count2=0;
var x=0;
var y;
function start1(){
y=setInterval(
function start(){
let a=Math.floor(Math.random() * 100);
let b=Math.floor(Math.random() * 100);
count+=a;
count2+=b;
car2.style.left=`${count}px`;
car.style.left=`${count2}px`;
if(count>=700 || count2>=700)
{
clearInterval(y);
stop();
}
},1000)
}
function stop(){
car2.style.left=`${count}px`;
car.style.left=`${count2}px`;
if(count>=700)
{
alert("Car 1 has won");
}
else if(count2>=700)
{
alert("Car 2 has won");
}
}
For Advanced solution of this sample assignment mail us on contact@codersarts.com
Also, If you are looking for any kind of coding help in programming languages, Contact us for instant solution
Comments