Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame

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

Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame


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
Dinogame | Dino game Using Html Css Javascript | Chrome Dinogame
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
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.  
   {  
     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
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 🙏💕!

1 Comments

Post a Comment

Previous Post Next Post