Hello friends my name is Rahul and today we are going to make chrome dinosaur game using HTML, CSS and JavaScript.
Step 01 :- Creating a file in VS code named index.html.
HTML Code –
<!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>Chrome Dinosaur Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game">
<div id="dino"></div>
<div id="cactus"></div>
</div>
</body>
<script src="script.js"></script>
</html>
Step 02 :- Create a css file in VS code and named it style.css
CSS Code –
* {
padding: 0;
margin: 0;
}
body{
background-color: #cecece;
}
.game {
width: 600px;
height: 200px;
border: 1px solid #000000;
margin: auto;
}
#dino {
width: 90px;
height: 58px;
background-image: url(dinosaur.png);
background-size: auto 66px;
position: relative;top: 143px;
}
.jump {
animation: jump 0.3s linear;
}
@keyframes jump {
0% {
top: 143px;
}
30% {
top: 115px;
}
50% {
top: 70px;
}
80% {
top: 115px;
}
100% {
top: 143px;
}
}
#cactus {
width: 20px;
height: 40px;
position: relative;
top: 103px;
left: 580px;
background-image: url(cactus.png);
background-size: 20px 40px;
animation: cactus-block 1.2s infinite linear;
}
@keyframes cactus-block {
0% {
left: 600px;
}
100% {
left: -20px;
}
}
Step 03 :- Create another file named script.js in VS code.
JavaScript Code –
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
function jump() {
if (dispatchEvent.classList != "jump") {
dino.classList.add("jump");
setTimeout(function () {
dino.classList.remove("jump");
}, 300);
}
}
let checkAlive = setInterval(function () {
let dinoTop = parseInt(
window.getComputedStyle(dino).getPropertyValue("top")
);
let cactusLeft = parseInt(
window.getComputedStyle(cactus).getPropertyValue("left")
);
if (cactusLeft > 0 && cactusLeft < 70 && dinoTop >= 143) {
dino.style.animationPlayState = "paused";
cactus.style.animationPlayState = "paused";
alert("Whoops! Game Over :(");
window.location.reload();
}
}, 10);
document.addEventListener("keydown", function (event) {
jump();
});
OutPut :-
