Creating games with JavaScript - Part 3

3 min read ⋅ 368 views


In part two of this tutorial, we focused on getting our images to move on the canvas. This meant getting our bird to move up and down and our pipes to move from right to left. We also created a loop that allows new pipes to appear on the canvas.

This is the final part of the tutorial and focuses on finishing off the functionality as well as applying some finishing touches to the game. So, let’s jump back in and finish off our game.

If you play the game as it is right now, you will notice that the bird is able to pass through the pipes without any problems. We obviously need to change this and make sure the game resets when the bird hits a pipe or the floor.

To do this, we will write another if-statement that specifies all of our points of collision. Then when the bird hits one of these points, the if-statement will tell the page to reload. We will start this if-statement by writing the following code inside our for loop, underneath our other if-statement.

if(){

location.reload();

}

Now, inside our brackets, we need to specify all of the possible points of collision. We also want to make sure location.reload() will only execute if any part of the bird is in the same position as one of these points. We can do this by adding the following code.

if(bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeTop.width &&

(bY <= pipe[i].y + pipeTop.height || bY+bird.height >= pipe[i].y+constant)

|| bY + bird.height >= cvs.height - fg.height){

location.reload();

}

Now, save the file and refresh the web page. If you fly the bird into each of these points, you should see the web page reload each time. Do it for each point to make sure there are no glitches.

We are now almost done with our game. We just need to add a score that increments and some sounds to make the game a little bit more interactive.

So, let’s add the scoreboard. First of all, we need to create the functionality. This is very simple. Each time the bird passes through a pair of pipes, the score increments by 1. We can add this functionality by writing the following if-statement inside of our for loop, like so.

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

score++;

}

Now, we need to create a scoreboard to display on the canvas. Add the following lines of code to the draw function, above the requestAnimationFrame() function.

ctx.fillStyle = "#000";

ctx.font = "20px Verdana";

ctx.fillText = "Score: "+score,10,cvs.height-20);

The first line specifies the colour of our text and the second line is used to specify the size and font for our text. The third line is where we state what the text will be and what position it will have on the canvas. In this case, it will say “Score:” and then the actual score, which we know will change as the game progresses. The coordinates we have given will position the scoreboard at the bottom left of the canvas.

If you now save the file and refresh the web page, you should be able to play the game and see you score increment each time you manoeuvre the bird through a gap. You should also see the score reset each time the page reloads.

Lastly, we just need to add some sounds to our game. To do this, we first need to create two new variables above our EventListener, like so.

var fly = new Audio();

var scor = new Audio();

Now, just like we did with our images, we need to add our sound files using .src. Add the following lines of code to the file underneath the two new variables.

fly.src = "sounds/fly.mp3";

scor.src = "sounds/score.mp3";

Now, we want our fly.mp3 to play when the bird moves up and we want score.mp3 to play when the score increments. To do this, firstly add the following line of code to the moveUp() function.

fly.play();

Then add the following line of code to the if-statement for score.

scor.play();

Now, make sure your volume is at a decent level, then save the file and refresh the web page once again. You should now be able to hear the sounds playing at the correct time as you progress through the game.

That’s all there is to it! You now have a fully working Flappy Bird game that plays in your browser. Now that you have learned some of the basics of JavaScript, you can begin working on more complex projects. If you aren’t sure what to build next, take a look at some other basic mobile games and see if you can build them yourself, using JavaScript. 


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 2: https://able.bio/SamDev14/creating-games-with-javascript-part-2--99dr77g




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