Creating games with JavaScript - Part 1

In recent years, JavaScript has become one of the most popular programming languages there is. Thanks to developments in frameworks, JavaScript can now be used to create entire websites and even native apps. However, this diversity also makes learning JavaScript a daunting prospect for some, as they are left feeling like they need to know how to use every framework.

In this tutorial, we are going to take JavaScript back to basics and use it to create a mobile game that a few years back took the world by storm. I am of course talking about Flappy Bird. The difference, however, is that our version will run in a browser. It will be designed for use on a desktop, meaning that control of the bird will be achieved using the keys on a keyboard, rather than a touchscreen.

Before we begin writing the code, we should first figure out the rules for our game. We need to know how it will work, what the goal of the game is etc. This tutorial assumes you are familiar with Flappy Bird and therefore the rules to the game. It also assumes you have a basic understanding of programming, even if you are completely new to JavaScript.

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.

Simple enough, but we will need to write all of the functionality for this using JavaScript. This will be done by creating a 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 index.html file.

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.

<!DOCTYPE html>

<html lang="en" dir="ltr">


<meta charset="utf-8">






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 body tags.

<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 id of canvas. This will come into play when we begin writing our JavaScript.

To complete our HTML file we just need to add one more line of code. This will be a script tag. The script tag connects our HTML file to our JavaScript file which we will create in a moment. First of all, enter the following code below the canvas markup.

<script src="flappyBird.js"></script>

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 index.html.

Now we can begin writing our JavaScript. Let’s start by calling the canvas we created earlier. Enter the following code at the top of the file.

var cvs = document.getElementById("canvas");

This has created a variable called cvs and has assigned it the value of our canvas, meaning we can now manipulate it using JavaScript. Thanks to this piece of code, we can simply refer to our canvas throughout now as 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");

This variable will tell our JavaScript that the context of our drawing is going to be 2-D. We achieve this by applying a method to our cvs variable called getContext. Then inside the brackets, we have to state whether the context is “2d” or "3d”.

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 ctx variable.

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.

Part 2:

Part 3: