Click “Run Pen” followed by “Edit on Codepen” to view the game and play with the code. At this stage, codepen has been working well for us so I think it’s a really good idea for you all to register for an account on codepen. This will allow you to “copy” my sketches so you can save your versions of them online. As we get more advanced (or if the network is down), we will start working locally with Atom again but this is good for us.
Writing the Game
The first step was to plan how we would do the game. Like all projects, we build it up in steps. These steps would work to build a basic flappy bird:
Step 1: Draw the sky
Step 2: Draw the ground
Step 3: Draw the bird
Step 4: Make the bird fall
Step 5: Make the bird stop falling when it hits the ground
Step 6: Make the bird jump/flap when the mouse pressed / screen touched
Step 7: Add pipes as obstacles with a random gap
Step 8: Move the pipes towards the bird
Step 9: When the pipes go offscreen on the left, make them appear on the right again
Step 10: Check if the pipe is hitting the bird and restart of it does
Step 11: Add a distance label (how many pipes have we passed)
Step 12: Add sound, improve the graphics and keep a “high” score
We got as far as Step 6. The next 6 steps would need another week to cover. I’ve added comments to the code so you can see which parts of the code relate to which steps. If you have your own codepen account, it might be a good idea to attempt to do the rest of the game – you might get stuck but that’s part of the fun!
New Concepts we covered today:
- You create a new variable by writing the word “var” followed by the variable name. E.g. we wrote the variables:
- var birdHeight;
- var gravity = 0.5;
- Creating a variable by writing the word “var” is called “declaring” a variable.
- You can change the value of a variable by using “=”
- You can also use a variable name in assignment, so e.g. we could make the birdHeight 1 bigger by writing:
- birdHeight = birdHeight + 1;
- We learned that if you want to be able to see a variable everywhere, we need to declare it
- Math operators:
- We learned that some of these are written a bit differently in computer programs:
- / is how we write “divided by” – e.g. width/2 is the same as writing “width divided by two”. This is because on a keyboard for some reason there isn’t the ÷ symbol.
- * is how we write “multiplied by” e.g. 2 * 2 is the same as writing “two multiplied by two”. This is because x is very easy to confuse with lowercase x. So if you had a variable called x things would get confusing!