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.

Today we started writing our first javascript game.  We thought for a bit about which game might be good to start and decided on a version of the hit game Flappy Bird.  We got quite far before people started to tire!

It will take another session to finish the game – we might do this next week, or take a break from javascript and come back to it in the new year.

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:

• Variables.  Variables in javascript are just like variables in scratch.  The key things about variable are:
  • 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 “=”
    • birdHeight = 10;
  • 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!