Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

by







Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

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

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>Flappy Bird Game</title>  
  </head>  
  <body>  
    <h3>flappyBird Game</h3>
    <div class="random">
      <canvas id="canvas" width="288" height="512"></canvas>
    </div>
    <script src="flappyBird.js"></script>
  </body>
</html>

There is all the HTML code & Css code for the Flappy Bird Game Code. Now, you can see an output with CSS, then we write javascript for the Flappy Bird Game Code .

output

Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

CSS code

 .random{  
  height: 100vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 h3{  
  text-align: center;  
  font-size: 2rem;  
 }

Css Updated output

Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

Javascript code 

 "use strict";  
 var cvs = document.getElementById("canvas");  
 var ctx = cvs.getContext("2d");  
 // load images  
 var bird = new Image();  
 var bg = new Image();  
 var fg = new Image();  
 var pipeNorth = new Image();  
 var pipeSouth = new Image();  
 bird.src = "images/bird.png";  
 bg.src = "images/bg.png";  
 fg.src = "images/fg.png";  
 pipeNorth.src = "images/pipeNorth.png";  
 pipeSouth.src = "images/pipeSouth.png";  
 // some variables  
 var gap = 85;  
 var constant;  
 var bX = 10;  
 var bY = 150;  
 var gravity = 1.5;  
 var score = 0;  
 // audio files  
 var fly = new Audio();  
 var scor = new Audio();  
 fly.src = "sounds/fly.mp3";  
 scor.src = "sounds/score.mp3";  
 // on key down  
 document.addEventListener("keydown", moveUp);  
 function moveUp() {  
  bY -= 25;  
  fly.play();  
 }  
 // pipe coordinates  
 var pipe = [];  
 pipe[0] = {  
  x: cvs.width,  
  y: 0,  
 };  
 // draw images  
 function draw() {  
  ctx.drawImage(bg, 0, 0);  
  for (var i = 0; i < pipe.length; i++) {  
   constant = pipeNorth.height + gap;  
   ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y);  
   ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y + constant);  
   pipe[i].x--;  
   if (pipe[i].x == 125) {  
    pipe.push({  
     x: cvs.width,  
     y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height,  
    });  
   }  
   // detect collision  
   if (  
    (bX + bird.width >= pipe[i].x &&  
     bX <= pipe[i].x + pipeNorth.width &&  
     (bY <= pipe[i].y + pipeNorth.height ||  
      bY + bird.height >= pipe[i].y + constant)) ||  
    bY + bird.height >= cvs.height - fg.height  
   ) {  
    location.reload(); // reload the page  
   }  
   if (pipe[i].x == 5) {  
    score++;  
    scor.play();  
   }  
  }  
  ctx.drawImage(fg, 0, cvs.height - fg.height);  
  ctx.drawImage(bird, bX, bY);  
  bY += gravity;  
  ctx.fillStyle = "#000";  
  ctx.font = "20px Verdana";  
  ctx.fillText("Score : " + score, 10, cvs.height - 20);  
  requestAnimationFrame(draw);  
 }  
 draw();

Final output

Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript


Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Flappy Bird Game Code. 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 “Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript”

  1. THANK YOU FOR THIS AMAZING POST SIR, THESE CODES HELP ME A LOT IN IMPROVING MY SKILLS. PLEASE KEEP DOING THIS SIR.��

    Reply

Leave a Comment