Post
Ask Question

How to Develop Flappy Bird Game in JavaScript

Introduction

 
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.
  1. var cvs = document.getElementById("canvas");  
  2. var ctx = cvs.getContext("2d");  
  3.  
  4. var bird = new Image();  
  5. var bg = new Image();  
  6. var fg = new Image();  
  7. var pipeNorth = new Image();  
  8. var pipeSouth = new Image();  
  9.   
  10. bird.src = "images/bird.png";  
  11. bg.src = "images/bg.png";  
  12. fg.src = "images/fg.png";  
  13. pipeNorth.src = "images/pipeNorth.png";  
  14. pipeSouth.src = "images/pipeSouth.png";  
  15.   
  16. var gap = 85;  
  17. var constant;  
  18.   
  19. var bX = 10;  
  20. var bY = 150;  
  21.   
  22. var gravity = 1.5;  
  23.   
  24. var score = 0;  
  25.   
  26. var fly = new Audio();  
  27. var scor = new Audio();  
  28.   
  29. fly.src = "sounds/fly.mp3";  
  30. scor.src = "sounds/score.mp3";  
  31.   
  32. document.addEventListener("keydown",moveUp);  
  33.   
  34. function moveUp(){  
  35.     bY -= 25;  
  36.     fly.play();  
  37. }  
  38.   
  39. var pipe = [];  
  40.   
  41. pipe[0] = {  
  42.     x : cvs.width,  
  43.     y : 0  
  44. };  
  45.   
  46. function draw(){  
  47.       
  48.     ctx.drawImage(bg,0,0);  
  49.       
  50.       
  51.     for(var i = 0; i < pipe.length; i++){  
  52.           
  53.         constant = pipeNorth.height+gap;  
  54.         ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);  
  55.         ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);  
  56.                
  57.         pipe[i].x--;  
  58.           
  59.         if( pipe[i].x == 125 ){  
  60.             pipe.push({  
  61.                 x : cvs.width,  
  62.                 y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height  
  63.             });   
  64.         }  
  65.           
  66.         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){  
  67.             location.reload();
  68.         }  
  69.           
  70.         if(pipe[i].x == 5){  
  71.             score++;  
  72.             scor.play();  
  73.         }  
  74.           
  75.           
  76.     }  
  77.   
  78.     ctx.drawImage(fg,0,cvs.height - fg.height);  
  79.       
  80.     ctx.drawImage(bird,bX,bY);  
  81.       
  82.     bY += gravity;  
  83.       
  84.     ctx.fillStyle = "#000";  
  85.     ctx.font = "20px Verdana";  
  86.     ctx.fillText("Score : "+score,10,cvs.height-20);  
  87.       
  88.     requestAnimationFrame(draw);  
  89.       
  90. }  
  91.   
  92. 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 .
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Flappy Bird using JS | by learnWD</title>  
  5.   </head>  
  6.   <body>  
  7.    <h1>fPRABAKARAN ACT</h1>  
  8.      
  9.    <canvas id="canvas" width="288" height="512"></canvas>  
  10.      
  11.    <script src="flappyBird.js"></script>  
  12.   </body>  
  13. </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.
 
 
 
 

Conclusion

 
I hope you understood how to build a basic flying flappy bird in this article. We have created a project using JavaScript.Thanks for reading.


Similar Articles