top of page

Animated Car Race Game - Get Javascript Assignment Helps

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



bottom of page