Creating games with JavaScript - Part 2

6 min read ⋅ 321 views


In the last article, we figured out the rules and conditions for our game and focused on getting the foundations in place, that will allow us to build a fully functioning Flappy Bird game. In this article, we will now work on creating some of that functionality and by the end of it, our Flappy Bird game will be starting to take shape. So let’s get started.

Now that JavaScript has our images, it’s time to draw them. To do this we need to first create the draw function that was mentioned earlier. Enter the following code to create this function.

var draw(){


}

We also want to add the following code to the bottom of our file so that the draw function is called.

draw();

First of all, we want to draw our background. We can do this by adding the following code to our function.

ctx.drawImage(bg,0,0);

This piece of code grabs the background image and gives the coordinates of the top left point, which is the image will be drawn from. As the coordinates are x=0 and y=0, the image will be drawn from the top left corner of the canvas, meaning it will cover the entire canvas as our background image. We know this because our background image is the same size as the canvas we have created.

Now, we need to do the same for our two pipes. Enter the following code to get the two pipes on the canvas.

ctx.drawImage(pipeTop,100,0);

ctx.drawImage(pipeBot,100,0);

Now we need to make some changes to pipeBot in order to position it correctly. Edit the piece of code so that it matches the following.

ctx.drawImage(pipeBot,100,0+pipeTop+gap);

Now the Y position will be equal to the sum of pipeTop + the gap which we will specify now. Create the following variables above the draw function.

var gap = 85;

var constant = pipeTop.height+gap;

Now we want to replace pipeTop+gap with our constant variable, like so.

ctx.drawImage(pipeBot,100,0+constant);

Next, we need to draw the foreground. However, the foreground is the floor in our game so we don’t want it to be drawn in the same place as our background. To position it correctly, we need to make the Y position equal to the canvas height minus the foreground height. Add the code below to the function to achieve this.

ctx.drawImage(fg,0,cvs.height - fg.height);

Lastly, we need to draw the bird. We want the starting position of the bird to be slightly in from the left and just over a quarter of the way down the canvas. You can change the starting position of the bird if you want but this is the standard position. This time we are going to first create two new variables called bX and bY. These variables will hold the values of the X and Y coordinates for the bird. Add the following code to the file, underneath the constant variable.

var bX = 10;

var bY = 150;

Now add the following line of code to the draw function to draw the bird.

ctx.drawImage(bird,bX,bY);

If you now open the index.html file in a browser, you should see all the images displayed on the canvas, in the correct positions.

Now it’s time to add some gravity to our game. To do this, add the following code to the draw function.

bY += gravity;

Now, we need to create the variable for gravity. Create this variable underneath the bY variable and set it to one, like so.

var gravity = 1.5;

If you now save the file and refresh the web page, you will notice that the bird still isn’t moving. To get the bird to move, we need to add a method to our function called requestAnimationFrame(). This method will create a smooth animation and manage the frame rate for us. By calling the draw function, the said function will recursively call itself, meaning our bird will continuously fall. Add the following code to the draw function.

requestAnimationFrame(draw);

Now, when you refresh the web page, you will see the bird gently fall to the bottom of the canvas.

Next, we want to add the controls to our game. The controls for this game are simple. The player is required to press a key in order to make the bird fly. To create this functionality, we have to use something known as an EventListener. This method attaches an event handler to a specified element. We will give our EventListener two parameters, the event and the function. The event will be “keydown” and the function will be moveUp, which we will create in a moment. This means that when a key is pressed down the moveUp function will be called. To add the EventListener, copy the following code to the JavaScript file, underneath the gravity variable.

document.addEventListener(“keydown”, moveUp);

Now we need to create the moveUp function. This function will simply minus twenty from the birds Y coordinate. Add the following code to the file, underneath the EventListener.

function moveUp(){

bY -= 25;

}

Now, save the file and return to the browser. If you refresh the web page, you should now be able to make the bird fly by pressing a key of your choice.

The next piece of functionality we will create is going to allow our pipes to keep appearing in random positions until the bird hits something. Let’s start by creating a new variable for our pipes. This will be for our pipe coordinates. We want to assign this variable an empty array, like so.

var pipe = [];

Underneath that, add the following code.

pipe[0] = {

x : cvs.width,

y : 0

}

Now we need to create a “for loop” inside our “draw” function. This loop is what we will use to generate new pipes and give them random Y positions in order to randomise the gaps for the bird to pass through.

To create this loop, first add the following code to the top of the “draw” function.

for(var i = 0; i < pipe.length; i++){

}

Next, copy the following lines of code to the for loop and then delete them from below.

for(var i = 0; i < pipe.length; i++){

ctx.drawImage(pipeTop,100,0);

ctx.drawImage(pipeBot,100,0+constant);

}

Now, we need to edit these coordinates so that they are equal to the X and Y positions of every pipe in the array. Edit the coordinates so that they match the following.

for(var i = 0; i < pipe.length; i++){

ctx.drawImage(pipeTop,pipe[i].x,pipe[i].y);

ctx.drawImage(pipeBot,pipe[i].x,pipe[i].y+constant);

}

Next, we need to make our pipes move to the left we can do this by adding the following code to our loop.

pipe[i] --;

Now, when you save the file and refresh the web page you will see that the pipes move to the left of the canvas.

Now, we need to work on randomising the position of the gap each time a new pair of pipes are drawn onto the canvas. To do this, we will use an if-statement. This if-statement will create random Y positions for each pair of pipes provided the X coordinate of each pipe is equal to a value that we specify.

To start the if-statement, add the following lines to the for loop.

if(pipe[i].x == 125){

}

Now, if the X coordinate of a pipe is equal to 125, the code we are about to write inside the curly braces will execute. So, let’s continue this if-statement by adding the following.

if(pipe[i].x == 125){

pipe.push({

x : cvs.width,

y : Math.floor(Math.random()*pipeTop.height)-pipeTop.height

});

}

Now that our if-statement is complete, let’s break it down so that we know exactly what it’s doing. The value specified in the expression at the top is only necessary to get the following code to execute. The value itself can be anything. So, we know our code inside the braces will execute but what does it actually do?

Well, pipe.push adds a new item to our array. In this case, it’s a new pipe. We can see that each new pipe that is added is given an X coordinate equal to the width of the canvas but the Y coordinate will change each time.

First of all, Math.random returns a floating-point number between 0 and 1, this number can include 0 but not 1. The number is then multiplied by the height of our top pipe and then rounded down to the nearest integer by Math.floor. The height of the top pipe is then subtracted from this integer to give us our Y coordinate.

That’s a good place to end part two. In part three we will complete our game by writing the functionality for our collisions, adding a scoreboard as well as some sounds to finish it off. 


For easy navigation to the other parts of this tutorial, you can use the links below.

Part 1: https://able.bio/SamDev14/creating-games-with-javascript-part-1--359jxld

Part 3: https://able.bio/SamDev14/creating-games-with-javascript-part-3--872eck3



JavaScript



MORE ARTICLES

How To Structure a Python Project

Writing programs isn’t all about the code. Sure when it comes down to it, the code is what makes the functioning program...

5614 views

Pipenv - First Impressions

Pipenv is an experimental tool with the purpose of bringing together different packaging tools in one place. It has been...

3934 views

How To Write Tests For Python

An important part of development in any Python project is testing. Testing is used to help define the intent of your cod...

2877 views