The goal in Flappy Bird is simply to get the highest score you can. This is done by manoeuvring a small bird through a never-ending set of pipes. Each time the bird passes through a pair of pipes the score increments by one. If the bird hits a pipe or the floor, the game resets itself and the player has to start again.
draw function. This function will draw everything onto the canvas, handle collisions, create new pipes and increment the score. Outside of this function will be our variables, which we will use to set the values of the various elements of the game.
Now that we have a basic understanding of the game and what our code needs to do, we can begin writing it. To start, open up an editor of your choice (I will be using Atom) and create a folder named flappy-bird. Then inside this folder, create an
In this file, we need to start by writing the standard semantic markup used in HTML. If you are using Atom, you can type
html and hit the tab key to generate this markup. Alternatively, you can copy the code below.
<html lang="en" dir="ltr">
Now, we need to add a title to our website. In between the
title tags enter a title of your choice or copy the one below.
<title>Flappy Bird using JS</title>
Next, we need to create the canvas. HTML has a
canvas tag that we can use for this. Enter the following code in between the two
<canvas id="canvas" width="288" height="512"></canvas>
As you can see, we have set a width of 288 pixels and a height of 512 pixels. This is because we want our canvas to be the same shape as a smartphone. We have also given the canvas an
To complete our HTML file we just need to add one more line of code. This will be a
script tag. The
Now that we have done that, we can save this file and create a new file inside our flappy-bird folder called
flappyBird.js. As you can see, this file name matches the one we have placed in our script tag, therefore, the file will be linked to our
var cvs = document.getElementById("canvas");
This has created a variable called
cvs which will make things a lot simpler for us moving forward.
Next, we want to create a variable for our context. Enter the following code below.
var ctx = cvs.getContext("2d");
cvs variable called
getContext. Then inside the brackets, we have to state whether the context is
The next thing we want to do is load our images. First of all, download the folder below.
Inside this folder are two sub-folders. One for images and one for sounds. Add each of these folders to your flappy-bird folder. Now we can add these images to our game.
To do this, we first need to create five variables, one for each image. We then need to assign a new object of
Image to each of them. Enter the following code, a couple of lines below your
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeTop = new Image();
var pipeBot = new Image();
Here we have a separate variable for the bird, the background, the foreground, the top pipe and the bottom pipe.
Now we need to give each of them their source file. This will be the corresponding image file for each one. To do this for the
bird variable, enter the following code below.
bird.src = "images/bird.png";
Now repeat this for each of the other variables so that each one is linked to the correct image. The end result should look like this.
bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeTop.src = "images/pipeTop.png";
pipeBot.src = "images/pipeBot.png";
That’s all we will cover in part one. In the next article, we will begin creating our draw function, which will display our images on the canvas. We will also begin writing the functionality. This will include getting the bird to move as well as creating new pipes that move to the left of the canvas.
For easy navigation to the other parts of this tutorial, you can use the links below.