Game JS
*{
padding: 0px;
}
#game{
height: 500px;
width: 400px;
border: 10px solid rgb(239, 22, 22);
background: url(bg.jpg);
background-size: contain;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
text-align: center;
position: relative;
top: 0px;
left:0px;
animation: move 2s linear infinite;
}
#bluecar img{
height: 100px;
}
@keyframes move {
0%{
top: 0px;
}
100%{
top: 501px;
}
}
#racecar{
height: 100px;
width: 130px;
background-color: red;
text-align: center;
position: relative;
top: 250px;
left: 130px;
}
#racecar img{
height: 100px;
}
Images
main.js
var blueCar=document.getElementById("bluecar");
var raceCar=document.getElementById("racecar");
var result=document.getElementById("result");
const score=document.getElementById("score");
var game=document.getElementById("game");
var counter=0;
var jumpsound=document.getElementById("jumpsound");
var dhoom=document.getElementById("dhoom");
blueCar.addEventListener("animationiteration",function(){
var random=((Math.floor(Math.random()*3))*130);
blueCar.style.left=random +"px";
dhoom.play();
counter++;
})
window.addEventListener("keydown",function(e){
if(e.keyCode==39){
var raceCarLeft=parseInt(window.getComputedStyle(raceCar).getPropertyValue("left"));
if(raceCarLeft<260)
{
raceCar.style.left=(raceCarLeft + 130)+"px";
}
jumpsound.play();
}
if(e.keyCode==37){
var raceCarLeft=parseInt(window.getComputedStyle(raceCar).getPropertyValue("left"));
if(raceCarLeft>0)
{
raceCar.style.left=(raceCarLeft - 130)+"px";
}
jumpsound.play();
}
})
setInterval(function Gameover(){
var blueCarTop=parseInt(window.getComputedStyle(blueCar).getPropertyValue("top"));
var blueCarLeft=parseInt(window.getComputedStyle(blueCar).getPropertyValue("left"));
var raceCarLeft=parseInt(window.getComputedStyle(raceCar).getPropertyValue("left"));
if((blueCarLeft ===raceCarLeft) &&(blueCarTop>250) && (blueCarTop<450)){
result.style.display="block";
game.style.display="none";
score.innerHTML=`score : ${counter}`;
counter=0;
}
},10);
style.css
*{
margin: 0;
padding: 0;
}
#game{
width: 390px;
height: 500px;
border: 1px solid black;
margin: 1rem auto;
background :url(bg.jpg);
background-size: contain;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: black;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 2s linear infinite;
}
#bluecar img{
height: 100px;
}
@keyframes move {
0%{
top: 0px;
}
100%{
top: 501px;
}
}
#racecar{
height: 100px;
width: 130px;
background: red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#racecar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: aquamarine;
margin: 1rem auto;
border-radius: 20px;
font-size: 30px;
text-align: center;
color: white;
display: none;
}
#score{
font-size: 2.2rem;
color: brown;
}
#btn{
padding: 0.5rem 1rem;
border-radius: 20px;
border: none;
background-color: black;
color: cyan;
font-size: 25px;
margin-top: 10px;
cursor: pointer;
text-transform: uppercase;
}
index.html
<!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 Racing Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="bluecar"><img src="blue.png"></div>
<div id="racecar"><img src="race.png"></div>
</div>
<div id="result">
<h1>Game Over</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
<audio id="jumpsound" src="jumpsound.mp3"></audio>
<audio id="dhoom" src="dhoom.mp3"></audio>
<script src="main.js"></script>
</body>
</html>
Comments
Post a Comment