: a a a a
: A A A

Start Reading the Website Out Loud and control Speed and Volume using the player. You can also hover and click to speak any text on the site.
Adds a distraction Free Mask To The Screen. Block out all unneccessary content and scroll through the page line by line.
Changes the Default Cursor & Pointer to a large version allowing you easy navigation of the website.
Simplify any page on our website with 1 click. You can control Contrast, Colours and Text Size as well as print the page too.
Accessibility Menu
StephMyLife Freelancer Bootcamp

Flappy Bird Game

Welcome to the StephMyLife Coding Challenge! Today you’re going to create a HTML webpage with a Javascript game that’s styled using CSS. Don’t worry if that makes no sense to you right now, everything will be explained below – so just follow the steps and create your first Flappy Birds game!

Step 1: Set up your project folders

The first thing to do is to get your project structure ready, and this is how we always start when creating a new website. Create a new folder on your computer for your first project, you can name it anything you like.

Inside this folder, create three more folders (you can use keyboard shortcuts to do this, press CTRL+Shift+N on a windows, or CMD+Shift+N on a Mac to create a new folder)

Give these folders the following names:

  • css
  • js
  • img

Open Notepad (Windows) or TextEdit (Mac) on your computer, and save an empty file with the name ‘Index.html’. If you are using Windows, you need to save this as type ‘all files’, and on a Mac it will ask you what file type you want to save the file as. Select ‘HTML’.  Once your file is saved as a HTML file, you can open this file in your internet browser. Below, my Index file has the Chrome logo because this is my default browser, but yours might look like the Safari, Edge or Firefox logo if you use these.  If your file does not have a browser logo then that is because it was saved as a text document and not a HTML document, just open it up and go to file -> ‘Save as’ and save it again as ‘all files’ as Index.html.

Now your project folder is set up and should look like this:

Step 2: Create your first webpage

Right click your Index.html file, select ‘Open With’. Then open the file in your text editor (NotePad or TextEdit), I use an application called Notepad ++ which is pretty cool. This is where you will be designing your first webpage, using a language called HTML! Your browser will read the HTML in your file, and that will tell the browser what controls should be on your page, and what they should do. 

Every HTML file takes the same basic structure to start with: 

<html> (every html file must start and end with these tags)

<head>

(the head is like the brain of your file. I’ll show you what goes here in a bit!)

</head>

<body>

  (This is where your content goes that you see on your site.)

</body>

</html>

You’ll see that all of the <tags> have a matching </tag> with a slash. These tags identify the start and /end of a block of code and tell the browser what to expect inside that block of code. Whenever you have a <tag> there must be a corresponding </tag> or your webpage won’t render correctly and you will have errors.

Type the above code structure into your Index.html file (without the ‘(comments)’, and then go back to your project folder and double click your index.html file. This will open Index in your browser and you will see a blank webpage. 

Now, let’s put some content in here!

Type the following between the <body> </body> tags.

<h1> Hello World!</h1>
<p> This is my first website! </p>

Go back to your browser and refresh Index.html (or open it again if you closed it). Now you will see this!

Hurray! You have made your very first webpage!!

Now that we know our website is working,  create our game…

Delete all the text between the body tags, and paste the following (if you can’t copy this, it is in a text file called ‘button.txt’ in the ‘code’ folder of the zip file you downloaded. Or try just typing it out!:

<div class="buttonsPanel">
<button class="gameButton" onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.02)">Move Up</button>
<button class="gameButton" onmousedown="accelerate(0.2)" onmouseup="accelerate(-0.02)"> Move Down</button>
<p>How long can you keep Flappy Bird alive?</p>
</div>

This will create the buttons that we want to use for our game – which are <button></button> tags. Refresh the page, and you will see that buttons and text will appear on the page. 

Click these buttons, and nothing will happen. That is because we need to add the code that makes all the magic happen when we click these buttons. We do this using another language, called Javascript! Javascript is what we use to make web pages interactive. We can add all sorts of functionality to our web pages by adding Javascript functions. 

From the ‘code’ folder in your zip file, I want you to take the ‘game.js’ file and put it into the js folder in your project. This file is where all of the functionality for the game will go. I’ll explain what is in here a little later, but let’s get our game working first!

Now that the javascript file is in place, refresh your webpage. 

Nothing happens right?

That’s because you need to link your html file with your Javascript. You need to add a line of code to tell your html file to go look for your Javascript file when it starts loading. You do this in the <head></head>  tags – paste this bit of code between the head tags.

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

This tells your browser to go into the js folder, and find the game.js Javascript file when it loads our HTML page, because our HTML needs to use it to do its job. 

Next, go the <body> tag, and change it so it looks like this: <body onload=”startGame()”>. This tells the browser to go to the startGame function in the game.js file and start the game when it loads the page.

Now refresh the page and see your game come to life!

 

Styling

Adding Javascript has provided the functionality to your page, but it doesn’t look great does it? The controls are kind of all grouped in together, and the background of your page is the same colour as your game – which makes it hard to know where one starts and the other stops. 

This is where CSS comes in! CSS is what makes our web pages look great – it controls how all of the elements on our HTML page will look and makes it really easy to create, great looking websites. CSS is so important when you’re building a website, and it’s really fun to play around with CSS to see what it can do.  We’ll do that in the extra coding challenges at the end.

Take the style.css file from the’ code’ folder in your zip file, and copy it into the css folder in your project. 

Take the ‘flappy-bird’ photo from the downloaded folder, and copy this into the img folder. (Not into the css folder). 

Just like the JavaScript file, we need to tell our browser to go look for our css file when it loads the page. Otherwise, the styling changes won’t be applied. 

To do this, go to your Index.html file and paste this bit of code in between the <head> </head> tags: 

<link rel="stylesheet" type="text/css" href="css/style.css">

This will pick up your css file when your webpage loads, and apply all of the styling to your webpage next time it is loaded.

 

Now refresh your webpage.

See how much of a difference a little bit of styling makes? Now you have a game that looks great and works great! 

Play around with your game, and feel free to stop here – or keep reading to see how the game works, and how you can dig further into the html,  Javascript, and CSS to make more changes yourself!

 

How it works

By now, you know that the HTML is what determines the components you see on your webpage, the Javascript is what adds the functionality to the page, and the css is what makes it all look good. Here is how all three of them are connected & implemented in this game.

First, styling is an easy one to explain. If you look at each button in the html file, you will see that they both have the attribute “ class=”gameButton“. Now pop over to the style.css file and you’ll see that there is a section called ‘.gameButton’. This is where our styling for the buttons is. You can see I have set a height, width, and colour here. I want the buttons to look the same, so I have applied the same class to these buttons in the html. This is what makes css so great, it saves you lots of time styling every button to be the same – instead you create one class in the css file and you can apply that to any button on your whole website. You can apply a class to any element in HTML and style it in your css. Once you add a class to an element, you go to the css and type this:

.classname
{
styling
}

If you want to read more about what you can do with css, click here.

Now for the Javascript. Your HTML calls your Javascript functions when events happen – an event can be anything from the page loading for the first time, to you typing a letter in a box or clicking a button. Anytime an event happens, the HTML can tell the Javascript to do something.

Look at the <body> tag, and you’ll see 

<body onload="startGame()">

This tells your browser that when the page is first loaded (an event), to kick off startGame() (a function). Pop into your game.js file and you can find the StartGame() function, where the game is kicked off.

In this game.js file, you will also find a function called ‘accelerate’ – right at the end. This function is what moves your flappy bird up and down.

 If you go back to your index.html file, see if you can find which event kicks off this ‘accelerate’ function.

You will see that each of the buttons has ‘onmousedown’ and ‘onmouseup’ within the tags which call ‘accelerate’. These events are kicked off when you use the buttons and tell the browser to kick off the accelerate function- onmousedown  is when you click the button, and onmouseup is what happens when you release the button. So here you have event + function = action!

To learn more about how the game works, do the challenges below, the solutions are on the last page!

Challenges

Here are a few things you can try, to find your way around the code a little better. The steps to complete the challenges are on the next page if you get stuck!

  • In the css file, can you change the background colour of the game to grey?
  • In the html file, can you add some extra text to the panel below the buttons, to give instructions to the user?
  • In the Javascript file, can you change the green blocks to be red?
  • Can you make each of the buttons a different colour?
  • Can you make the game harder?
  • Can you make the bird go faster or slower when you click the buttons?
  • Can you change the image that is used for the bird?

Challenge Answers

In the css file, can you change the background colour of the game to grey?

Go to the style.css, and go line 3-  ‘background-color: #81BEF7;’ –which is in the ‘canvas’ section. This controls the canvas background colour for the game. I have used a html colour code for this, which looks like #81BEF7. You can type ‘blue’, ‘green’, ‘red’ etc in here, but this shows just primary colours and doesn’t look great. Try typing blue instead of the colour code and see what it looks like. Not great right? Using these colour codes I can add a specific hue of blue in here. You can either change the text to be ‘background-color: grey;’  to make the background grey, or else find your own colour code from this website: https://html-color-codes.info/.

 

In the html file, can you add some extra text to the panel below the buttons, to give instructions to the user?

Go to the index.html file, and find ‘<p>How long can you keep Flappy Bird alive?</p>’. These <p> tags are paragraphs, that’s what the p stands for. Everything you put between <p></p> tags will be treated and displayed like a new paragraph in your browser. So type a few sample paragraphs with instructions or sample text. Reload the webpage to see your changes.

 

In the Javascript file, can you change the green blocks to be red?

In the game.js file, look for the ‘updateGameArea’ function. This is where the game creates your green obstacles that flappy flies through. These are called ‘myObstacles’ in the code. On rows 107 & 108, you can see that the obstacles are being created as green blocks. Change “green” to “red” on both lines and refresh the page!

Can you make each of the buttons a different colour?

Go to the css file and copy the styling code for the ‘gamebutton’ class (copy rows 7 – 14, including the } at the end.  Paste this below the } on line 14, and rename the name gameButton for the copied class to be ‘.gameButton2’. Now you have two separate button styling classes in your css file. 

Change the background colour on one of these classes to be any colour you like. You can use the colour name, or a hex colour code!

Go to your html file and find the code for the buttons. Choose which button you would like to change the colour of, and change the class name to the new class you have created. 

Change class=”gameButton” to class=”gameButton2″.  

Refresh the page to see the change.

Can you make the game harder?

This involves changing the Javascript code which is a lot of fun! Open the game.js file.

From rows 100-113, the game is setting the gap between the green blocks that the flappy bird can fly through. This is randomly calculated using math functions, so you can see that the obstacles are a different height each time you refresh the page. The distance of the gap between the obstacles is randomly generated, but a minimum and maximum gap is set to avoid the obstacles becoming too close or far. The Javascript says, ‘randomly generate a number between 100 & 200 pixels, and make the gap that size’. It take a lot less code than having to set many different sized gaps!

On lines 104-105 this is where the minimum gap and maximum gap between the blocks is set. Play around with this, and set the minimum gap to be bigger and smaller numbers to see how this affects the game. Refresh the page each time so that the new version of the javascript is changed. And don’t forget to save the javascript file before you refresh the page!

Can you make the bird go faster or slower when you click the buttons?

You might think that this is set in the Javascript, but it’s not! Go to the index.html file, and find the tags for the buttons. Within these tags, see where the onmouseup and onmousedown events are calling the accelerate function with a number in brackets next to it. This number in the brackets  is called ‘a parameter’, and it’s passed into the javascript to be used for the game. 

The html passes this parameter and says ‘on this event (onmouseover) I want you to run this function (accelerate) using this parameter (the number of pixels it wants the bird to accelerate). 

The function in the Javascript takes this number of pixels, and does what the html has asked it to do. Play around with this number and see what happens when you make it bigger and smaller. It’s better to stick to numbers below 1, like 0.5 / 0.6 etc.

 

Can you change the image that is used for the bird? 

Go to the startGame function in the game.js, and go to line 6. Here is where the game creates the object which you will be moving up and down. This is called ‘myGamePiece’. 

I decided to set the game piece to be a bird, so I went online and found an image of a flappy bird and saved this to the img folder in my project folder. Then I went into the game.js file and I set the object to be the bird by putting in the location of my image – “img/flappy-bird.png”. This tells the browser that when it is creating the object, to go to the img folder and get the flappy-bird.png image and to use this image for the object.

Find and save your own image to the img folder and change the image name to be your image. Find a funny photo, or get a photo of your own face or a friends face to surprise them. 

Back to: Free Flappy Bird Coding Challenge
Lesson Details