Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame

Dino game | Dino game Using Html Css Javascript | Chrome Dino game

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Dino game. We use HTML, Css, and javascript for this Dino game. I hope you enjoy our blog so let’s start with a basic HTML structure for the Dino game.

HTML code

 <!DOCTYPE html>  
<html lang="en">
<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">
<div class="game">
<div id="dino"></div>
<div id="cactus"></div>
<script src="assets/script.js"></script>

There is all the HTML code for the Dino game. Now, you can see output without CSS, then we write css & javascript for the Dino game.


Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame
Blank Output

CSS Code

padding: 0;
margin: 0;
width: 600px;
height: 200px;
border: 1px solid #000000;
margin: auto;
width: 70px;
height: 70px;
background-image: url(t-rex.png);
background-size: auto 70px;
position: relative;
top: 143px;
animation: jump 0.3s linear;
@keyframes jump{
top: 143px; /*distance from the top of the parent element*/
top: 70px;
top: 115px;
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{
left: 600px;
left: -20px;

Here is our updated output CSS.


Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame

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.
setTimeout (function(){
dino.classList.remove("jump"); //removes the jump class from the dino once it has jumped so that it can jump again
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 :(");
document.addEventListener("keydown", function(event){

Final output

Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Dino game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
Share on:

0 thoughts on “Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame”

Leave a Comment