Guide to coding Flappy Bird game using JavaScript

JavaScript is also one of the most popular programming languages ​​today. In this article, we will use JavaScript and a little HTML5 to build a simple version of the Flappy Bird game. Hopefully, the article will help you gain some basic JavaScript skills as well.

Initial preparations

To write a game in JavaScript you need two main components, the first is an HTML5 Canvas tag and the second is a JavaScript file.

And before going into the steps of building the Flappy Bird game, you should download the initial "materials" such as images, sounds. Here, the images and sounds are already provided, however, you can completely customize, replace them with your own images and sounds. For example, replace the bird with anything you like.

1. Visit GitHub to download the necessary files and sample code.

First, we need to create an index.html file, which contains a Canvas tag. The content of the Canvas tag will be built from JavaScript and in this case it is the Flappy Bird game title.

The sample code of the index.html file is as follows:

 Flappy Bird 

FlappyBird by TipsMake

In it, we declare the Canvas tag with a width of 288 and a height of 512. Below, before closing the body tag, we add the JavaScript code declaration function: .

Start coding flappyBird.js

You can use different IDEs but in this tutorial we will use Sublime. The first thing we need to do is select the Canvas tab and get the context using getContext('2d'):

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

The getContext('2d') function has properties and methods that allow us to draw and do various things on the Canvas.

Now, we need to create the image for the Flappy Bird game. To create the image, we assign and display the value of the Image() function using the new statement.

var bird = new Image(); var bg = new Image(); var fg = new Image(); var pipeNorth = new Image(); var pipeSouth = new Image();

Next, we need to set the image source using the src attribute. To make this process simple and error-free, we recommend saving the image and video folders in the same folder as index.html and flappyBird.js.

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";

Using the same method, we create sound effects and set the sound source using the following code:

var fly = new Audio(); var scor = new Audio(); fly.src = "sounds/fly.mp3"; scor.src = "sounds/score.mp3";

To create the free fall effect for the bird and the distance between the two obstacle pipes, declare the coordinates of the bird's first appearance, we use the code:

var gap = 85; var constant; var bX = 10; var bY = 150; var gravity = 1.5; var score = 0;

gap is the distance between the upper pipe and the lower pipe, here the value of gap is set to 85. The constant is used to determine the Y coordinate of the lower pipe and it is calculated by adding gap to the Y coordinate of the upper pipe. The two pipes share the same X coordinate.

bX and bY are the X and Y coordinates of the bird, the initial values ​​are 10 and 150 respectively. Next, with the gravity function equal to 1.5, each time the bird falls, it will fall 1.5 pixels. The score function is used to calculate the player's score.

Next, we need to create a fly-up animation for the bird every time the keyboard is pressed. The player can control the bird by pressing any key on the keyboard. We need to add an EventListener variable to our code and when the player presses the key, we will run the moveUp() function, the bird will fly up 25 pixels and play a sound effect.

document.addEventListener("keydown",moveUp); function moveUp(){ bY -= 25; fly.play(); } 

We also need to store the coordinates of the pipes in an array. When the game starts, the X coordinate of the first pipe is 288 pixels (equal to cvs.width).

var pipe = []; pipe[0] = { x : cvs.width, y : 0 };

Finally, we need to draw more pipes so that the game continues after the bird passes the first obstacles. In addition, in this last code segment, there is also code to determine the collision between the bird and the pipe. When the collision occurs (coordinates match), the game will be restarted. If the bird passes, the score will be calculated for the player.

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

Now that the code is done, you need to save the entire HTML file and flappyBird.js. You can right-click on the Sublime window and select Open in a new browser to play the game you just wrote. If everything goes well, the result you get should look like the image below:

To learn more about JavaScript, please visit: What is JavaScript? and to refer to other JavaScript exercises, please visit: Collection of JavaScript exercises with sample code.

Kareem Winters

Update 25 May 2025