Chrome Dinosaur Game Using HTML, CSS & JavaScript
.png "Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame")
Welcome to the CodeWithRandom blog. In this article, we learn how to create a Chrome Dinosaur Game Using HTML, CSS & JavaScript. We create Chrome Dinosaur Game Html code and then CSS code and for the dino game functionally we use javascript code.
In this blog post, we will discuss the Chrome Dinosaur Game with complete source code so you can just copy and paste them into your own project. Happy exploring and learning !!
I hope you enjoy our blog so let’s start with a basic HTML structure for the dino game Html code.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
HTML Code For Dinosaur Game
Table of Contents
<!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>The Dinosaur Game</title>
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<div class="game">
<div id="dino"></div>
<div id="cactus"></div>
</div>
<script src="assets/script.js"></script>
</body>
</html>
There is all the HTML code for the dino game. Now, you can see output without CSS And Javascript. then we write css & javascript for the dino game code.
Html output dino game
 |
| Blank Output |
CSS Code For Dinosaur Game
* {
padding: 0;
margin: 0;
}
.game {
width: 600px;
height: 200px;
border: 1px solid #000000;
margin: auto;
}
#dino {
width: 70px;
height: 70px;
background-image: url(t-rex.png);
background-size: auto 70px;
position: relative;
top: 143px;
}
.jump {
animation: jump 0.3s linear;
}
@keyframes jump {
0% {
top: 143px; /*distance from the top of the parent element*/
}
30% {
top: 115px;
}
50% {
top: 70px;
}
80% {
top: 115px;
}
100% {
top: 143px;
}
}
#cactus {
width: 20px;
height: 40px;
position: relative;
top: 91px;
left: 580px; /*width of frame - width of cactus*/
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;
}
}
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here
Here is our updated output CSS For Dino Game. here is the updated output with Html and css for the Dino game
output
5+ HTML CSS Project With Source Code
JavaScript Code For Dinosaur Game
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
function jump() {
if (dispatchEvent.classList != "jump") {
//first it checks if the dino is mid-jump. If not, it makes it jump.
dino.classList.add("jump");
setTimeout(function () {
dino.classList.remove("jump");
//removes the jump class from the dino once it has jumped so that it can jump again
}, 300);
}
}
let checkAlive = setInterval(function () {
let dinoTop = parseInt(
window.getComputedStyle(dino).getPropertyValue("top")
);
let cactusLeft = parseInt(
window.getComputedStyle(cactus).getPropertyValue("left")
);
//check for collision
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();
});
Final Output of Dinosaur Game
Now we have completed our javascript section for the dino game. Here is our updated output with javascript for Dino Game. Hope you like the dino Game Code. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
Ecommerce Website Using Html Css And Javascript Source Code
In this post, we learn how to create a dino game using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Thank You For Visiting!!!
Written by – Code With Random/Anki
У меня не работает