Table of Contents

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">  
 <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, then we write css & javascript for the Dino game.

output

Blank Output

CSS Code

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

Here is our updated output CSS.

output

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

Final output

Now we have completed our javascript section, Here is our updated output with javascript. Hope 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 🙏💕!

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.