Telegram Group Join Now

Chrome Dinosaur Game Using HTML, CSS & JavaScript

Welcome to the CodeWithRandom blog. This post teaches us how to use HTML, CSS, and JavaScript to make a Chrome Dinosaur Game. For the functionality of the Chrome Dinosaur Game, we develop HTML, CSS, and JavaScript code.

We will discuss the Chrome Dinosaur Game in this article, along with the source code that you can easily copy and paste into your own project. Happy discovering 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)

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

Chrome Dinosaur Game Table

HTML Code For Dinosaur Game

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

Chrome Dinosaur Game Using HTML, CSS & JavaScript

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

Chrome Dinosaur Game Using HTML, CSS & JavaScript

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

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.

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

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.

Chrome Dinosaur Game Using HTML, CSS & JavaScript

Telegram Group Join Now

Chrome Dinosaur Game Using HTML, CSS & JavaScript

HTML Code For Dinosaur Game

CSS Code For Dinosaur Game

JavaScript Code For Dinosaur Game

Final Output of Dinosaur Game

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

is this project responsive or not?

Do you use any external links to create this project?

Telegram Group Join Now

1 thought on “Chrome Dinosaur Game Using HTML, CSS & JavaScript”

Leave a Comment Cancel reply