Creators: Flappy Block Week 1

Today we started with a little brainstorm about what we want to do this term.  We took a little vote about what to tackle today and most people wanted to have a go at building a game.. so that’s what we did!

The thing about games is even pretty simple ones can take some time to get them finished so we decided to split it over two weeks and base it on an existing famous game – Flappy Bird.   Flappy Bird is a simple game, but was HUGELY popular, and has all the things that are needed to master when it comes to games:

  • Keyboard inputs – we use space to make the bird flap
  • Moving characters
  • Physics – the bird flaps and falls
  • Collisions – the bird must bump the pillars
  • Score keeping / leaderboard/ top score / etc
  • Lives/death
  • “Game Over”/ restart, etc.

If we can manage Flappy Bird we will be able to build all sorts of fancy games using the same ideas.

Getting Started

We started by looking at the original on the internet and figuring out what characters we would probably need to create as Objects (kind of like sprites in scratch).  We decided that we would need to create:

  • A Bird object
  • A Pillar Object

This week we focused on the bird object.

What should a bird be able to do?

Our bird was a class very similar to the previous object we did – snowflake and crawlers..  We decided it should have the following properties when it is created – in the “constructor” function

  • x
  • y
  • size

This lets us create a bird of a given size at a given location.

We next tried to figure what it should be able to do – the operations or functions it should have.

We figured it should have the following operations:

  • move(): so the bird can move at the speed it is currently at
  • show(): to display the bird
  • flap(): to flap the birds wings

How did we write the game

We are only half done, but wrote the game in the following order:

  1. First we started like all our sketches by copying the template
  2. Next, we added code to draw the background to a function and called it in draw – we just picked a green rectangle for the ground and a nice light blue for the background
  3. Next we created a Bird class (bird.js) for our bird code and added a line to index.html to link to it.
  4. Next we added a move and show method to the bird class and wrote code to draw itself as a yellow block.
  5. Next we tested it in sketch.js by creating a new Bird() in the middle of the screen with a size of 20.
  6. Next we added gravity to the bird.  We learned that speed is the change of position and acceleration is the change of speed.  So we made the bird drop realistically by changing it’s ySpeed by gravity every frame.
  7. Next we added an if statement to stop the bird from falling through the floor
  8. Next we added some code to check if the user had pressed space and made the bird flap when they did!
  9. Finally, we added a little code to stop the bird from falling until the game had started

Phew!  We got a lot done!  We still have a LOT to do!!  Next week we will move on to doing the pillars, which is both moving them and figuring out if they are hitting the bird and hopefully we’ll get the scoring and death checking done. Looking forward to it!!!

Link to the game and code!


We are just getting started but all the code is up on github as usual, and you can play with the game as we left it on the creators website!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s