Hello Coder! Welcome to the Codewithrandom blog. In this article, we are going to create Dinosaur Game Using JavaScript with Source Code. this is the same Clone of Chrome Dino Game, we have a dino image, and cactus image, and a background where the dino run.
For the functionality of the Dinosaur Game Css and JavaScript Play a very important role. you can download an image from the below link and create your own Dinosaur Game.
What is Dinosaur Game in JavaScript?
The dinosaur game is where we have a running dinosaur and we have to we have to save him from hitting the cactus and create a high score. Many people play this game in Chrome browser because when we don't have an internet connection chrome recommended to play Dinosaur Game.
I hope you enjoy our blog so let's start with a basic Html structure for the Dinosaur Game.
Dinosaur Game 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>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>
We'll use HTML concepts to build the basic framework for our dinosaur game, but first we need to add some file links to our html file. Making distinct files for each language and linking them together inside our website is the simplest way to handle a project, which is crucial when developing one.
The body part will contain the javascript code, and the head section will have the links to our external CSS file.
<link rel="stylesheet" href="assets/style.css" />
<script src="assets/script.js"></script>
Adding the Structure for our Dinosaur game:
We will now use the div tag to create a game container in order to give our dinosaur game structure. Using the div> tag, we will build two div sections inside our game container. The dinosaur game is the subject of the first section, and the creation of the cactus for our dinosaur game is the subject of the second half.
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.
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;qtop: 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;
}
}
Step1: Now, we'll utilise the universal selector property to set the box-sizing to "border-box," the margin and padding to "zero,".
* { padding: 0;
margin: 0;
}
Step2: We will now adjust the width to "600px" and the height to "200px" using the class selector (.game). Using the border and margin settings, we will additionally set a margin of "auto" and a border of 1 px solid black.
We will make the dinosaur figure by using the id selector (#dino). For our game, we'll add the dinosaur picture using the background-image property and set the width and height to 70px.
.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;
}
Step3: Now we'll build a jump class and add a linear motion for the dinosaur to it. We'll construct a jump animation and, using keyframes, add several keyframes at intervals of 0, 30, 50, 80, and 100. Electronic products sales are referred to as "electronic commerce."
The cacti for the dinosaur game will be made in a manner akin to the dinosaur creation. We will give the cactus block a width and height of 20 pixels and 40 pixels, respectively, before adding an animation to it using keyframes.
.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;
}
}
Dinosaur Game Javascript Code:-
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();
});
We'll be utilizing the fundamental idea of our javascript in our code. We will first choose the HTML elements for the dinosaur and cactus using the document.getelementById() method.
Now we'll make a function called jump(), and inside of it we'll first check to see if the dinosaur is in the game's action, after which we'll add the jump class to it, and if it jumps, we'll immediately remove the jump class in a 300-millisecond window.Then, if the dinosaur hit a cactus, we'll tell the user that the game is done and add an event listener and a keydown using the alert method. When the user touches the key, the jump function is invoked.
Now we have completed our JavaScript code for the dinosaur game. Here is our updated output with JavaScript Code. 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!
In this post, we learn how to create a Dinosaur Game Using JavaScript Code. 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
Top comments (0)