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!

Today we continued our look at P5 and javascript.  We mostly practiced what we learned last week.

This time we did our work online using the awesome website “codepen” rather than a local text editor.  This website is a place for web developers to play with web code and share it with others.  Using it allowed us to work without getting bogged down with install problems on people’s PCs.  It is great for smaller sketches, but if you want to develop something really big like a complex game it will be much easier to use a local text editor like we did last week.  If you get a chance and have an email address (or your parent has one), sign up for a codepen account.  This will allow you to create and share your own sketches – I’ll link any and all of them on the coderdojo athenry website!

Today we basically just fooled around with it and tried to draw our own picture just with code.  We mostly drew robots as they are fairly easy to draw with rectangles and ellipses!

What we covered:

1. We watched the neat introduction video from the authors of p5: http://hello.p5js.org/ 
2. We looked at the P5 reference page which has great instructions and examples for all P5 functions: https://p5js.org/reference/.  Every good library you ever use will have a similar reference page – this is a great example of one.
   1. Similar to how scratch has blocks in different categories (sound, movement, control, etc), p5 groups all its functions into different categories – color, maths, shape, sound, etc.
3. The canvas, resizing and changing the color using the createCanvas function
4. Using colours in P5 – We used the following functions to set colours:
   1. background: to set the background color
   2. fill: to set the fill color
   3. stroke: to set the line color
   4. In all cases, colors can be either:
      1. one number in which case it’s a shade of grey from 0 (black) to 255 (white) e.g. background (0) sets the background to black.
      2. three numbers separated by commas, in which case each colour is a shade of RED, GREEN and BLUE – e.g. background(255, 0,0) sets the background to red, background(255, 255, 0) mixes red and green to make yellow.  You can make every colour by mixing red, green and blue!
      3. four numbers separated by commas, in which case it is RED, GREEN, BLUE, TRANSPARENCY. e.g. fill(0,0,255, 100) will make any shape you draw see-through shade of blue.  This is like the ghost effect in scratch.
5. Some drawing functions in P5:
   1. strokeWeight to set how thick the lines are – e.g. strokeWeight(10) gives thick lines
   2. point to draw a point e.g. point(100, 100) draws a point at 100, 100.
   3. line to draw a line e.g. line(0,0,200, 150) draws a line from 0, 0 to 200, 150.
   4. rect to draw a rectangle – e.g. rect(0,0, 100, 100) will draw a square 100 wide, 100 high at point 0,0.
   5. ellipse to draw an ellipse – e.g. ellipse(0,0, 100, 100) will draw an ellipse 100 wide, 100 high (i.e. a circle) at point 0,0.
   6. triangle to draw a triangle – e.g. triangle(0,0, 100, 100, 200, 200) will draw a triangle between (0,0), (100, 100) and (200, 200).
   7. One other function we used was random.  This can be used in a few ways, but the way we used was to give it one number, in which case it picked a random number between 0 and that number.  E.g. random(255) picks a random number from 0 to 255.  So fill(random(255)) will set the fill to a random shade of grey.

We played about with the all the above to draw a (pretty poor) robot with flashing eyes that fires lasers – the sketch we did is below.  Play around with this and build on it to do something cooler!!