Telegram Group Join Now

Dinosaur/Dino Game Using HTML and JavaScript (Source Code)

Chrome Dinosaur Game Using HTML, CSS & JavaScript — dinosaur game javascript

Hello Coder! Welcome to the CodeWithRandom blog. In this article, we are going to create Chrome Dinosaur Dino Game Using HTML, CSS, and JavaScript with Source Code. this is the same Clone of Chrome Dinosaur 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 very important roles. you can download an image from the below link and create your own Dinosaur Game.

I hope you enjoy our blog so let’s start with a basic html structure for the Dino Game.

Snake Game Using HTML,CSS and JavaScript With Source Code

Code by	Codewithrandom
Project Download	Link Available Below
Language used	HTML, CSS, and JavaScript
External link / Dependencies	No
Responsive	YES

Chrome Dinosaur Game Table

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.

Weather App Using Html,Css And JavaScript

<link rel="stylesheet" href="assets/style.css" />
<script src="assets/script.js"></script>

Personal Portfolio Website Using HTML & CSS With Source Code

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.

Html output dino game

DOWNLOAD CODE NOW

Dino Game Using Html Css Javascript ( Dinosaur Source Code )

CSS Code For Dino 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.

Movie App using HTML, CSS, and Javascript

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;
}

Create Wave Backgrounds Using HTML & CSS

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;
    }
}

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Here is the updated output with Html and css for the Dino game

output

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();
});

IWe’ll be utilising 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.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Final Output of Dinosaur Game Using Html,Css and JavaScript Code

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

Which code editor do you use for this Chrome Dinosaur Game project coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.