ADVERTISEMENT

Chrome Dinosaur Game Using HTML, CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Chrome Dinosaur Game Using HTML, CSS & JavaScript

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

 

ADVERTISEMENT

ADVERTISEMENT

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!

ADVERTISEMENT

 

ADVERTISEMENT

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.

ADVERTISEMENT

<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.

ADVERTISEMENT

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.

ADVERTISEMENT

Html output dino game

Dino Game Using Html Css Javascript ( Dinosaur Source Code )
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;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

ADVERTISEMENT

Create Wave Backgrounds Using HTML &#038; CSS

ADVERTISEMENT

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.”

ADVERTISEMENT

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.

ADVERTISEMENT

.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

ADVERTISEMENT

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

 

Dino Game Using Html Css Javascript ( Dinosaur Source Code )

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.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

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

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT