How to Create The Flappy Bird Game using JavaScript

Introduction

To create a JavaScript game, you’ll need two things HTML and JavaScript.

In this article, I will explain how to develop a Flappy Bird game in Javascript. A new programmer should probably know how to go about game creating.

Let’s try to create a Flappy Bird Game in JavaScript.

Step 1

Open a Sublime text editor.

Javascript Code

Here, I have created all Javascript file code.

Step 2

In this section, you will create the bird fly script for the Flappy game and Add the given script in the Head section of the HTML tags. Here, the Javascript is used for Flappy game development purposes.

var cvs = document.getElementById("canvas");  
var ctx = cvs.getContext("2d");  

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";  
  
var gap = 85;  
var constant;  
  
var bX = 10;  
var bY = 150;  
  
var gravity = 1.5;  
  
var score = 0;  
  
var fly = new Audio();  
var scor = new Audio();  
  
fly.src = "sounds/fly.mp3";  
scor.src = "sounds/score.mp3";  
  
document.addEventListener("keydown",moveUp);  
  
function moveUp(){  
    bY -= 25;  
    fly.play();  
}  
  
var pipe = [];  
  
pipe[0] = {  
    x : cvs.width,  
    y : 0  
};  
  
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  
            });   
        }  
          
        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();
        }  
          
        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();

Step 3

First,create an HTML file, then write the html code. Here, html 5 code below shows how to complete code for the Flappy game .

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Flappy Bird using JS | by learnWD</title>  
  </head>  
  <body>  
   <h1>fPRABAKARAN ACT</h1>  
     
   <canvas id="canvas" width="288" height="512"></canvas>  
     
   <script src="flappyBird.js"></script>  
  </body>  
</html>

Output

After saving the whole HTML code and javascript, run your Flappy game file. Please see the below template. Now you can right-click on the sublime text window stage, a dialog box appears, select->open a new browser. Run your game and it should show the below template.

This is image title

Conclusion

I think it’s time, cause you’re ready to follow my step by step tutorial on how to create the flappy bird game using JavaScript to build a basic flying flappy bird in this article. Thank you for reading!

#javascript #gamvedev #flappy-bird #develop