You are currently viewing Chrome Dinosaur Game Using HTML, CSS & JavaScript

Chrome Dinosaur Game Using HTML, CSS & JavaScript

 Chrome Dinosaur Game Using HTML, CSS & JavaScript

 

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

 

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 

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

 

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

This Post Has 0 Comments

  1. Unknown

    У меня не работает

Leave a Reply