Creators – Flappy Block Week2


This week we finished up the Flappy Bird clone from last week.  We had a LOT to do so made a plan at the outset to keep us on track!  Mostly we were trying to get the pipe to work correctly.  As we already had our bird done last week, the plan was to:

  1. Add a new pipe class/object and get it to show (linking to our code if so)
  2. Make it have a random gap in it
  3. Make it move at the speed of the bird from right to left
  4. Make it restart on the right when it moves past the left
  5. Make the gap change when it restarts
  6. Check if it has passed the bird and add the score if so
  7. Check it if hits the bird and stop the game if so
  8. Add a second pipe a bit back
  9. Fiddle with the gap size, bird jump height and gravity until it feels right!

I also warned at the outset that we probably wouldn’t get all this done, but boy did we get close!!  We got to step 7 or 8 with most people above to make a fully working game!  I just fiddled with the numbers a little to make it easier in the version pushed to our repo.  I won’t go into all the bits, but you can play with the finished game on our github:

Note: I made one slight change before committing – that was to copy the 2 lines of code from the keyPressed function to a new mouseClicked function – this means the game can work with space OR the mouse – which means that you can play it on your phone if it’s on the internet.

I really hope you guys take this game and do some interesting stuff with it – nicer pillars or birds, some clouds, perhaps some snow or other effect either!  We even discussed enemies and making the bird shoot – this would be amazingly cool!

Some Interesting bits of the code!

The first few bits – creating a pipe, drawing it and getting it to move right to left was pretty easy – it was very like all the other objects we have built in previous sketches with a move and a draw function.  Unless stated otherwise, all the code below is in the new pipe.js class..

Resetting the pipe

Each time the pipe got past the left of the screen, we had to reset it by sending it back to the right, and setting the gap to a random value:

        this.x = this.x - BIRD_SPEED;
        if(this.x<0-this.pipeWidth) {

        // move to the right
        this.x = width;

        // create a new random gap
        this.gapTopY = random(100, height-PIPE_GAP_SIZE);
        this.gapBottomY = this.gapTopY + PIPE_GAP_SIZE;

        // let the pipe score again
        this.hasScored = false;

Notice how when we are calling a function in a class, we use “this.” before it – this is a bit confusing, and it’s just a funny thing about how javascript classes work.

Checking for a score

To check if we scored, we added a “hasScored” property to the Pipe, and if the pipe is to the left of the bird and it hasn’t already scored, we added one to the score and then set hasScored to true (so it doesn’t keep scoring!).

        if(this.x+this.pipeWidth < bird.x && this.hasScored==false){
            score = score + 1;
            this.hasScored = true;

In sketch.js we called this in the draw each frame – so we move the pipe a bit, check if we are past the bird and draw the pipe each time.  In the code above we passed the bird in as a parameter – this mean a pipe can check if it’s hitting any bird (if we had more than one bird in the game).

Checking if the game is over

Looking to see if the game is over was almost identical to looking for a score – the difference is that rather than check if the bird is past the pipe, we checked to see if the bird is touching the pipe.  It took us a little while and some whiteboarding to figure the correct way to check this!

        if(bird.x + bird.size > this.x && bird.x < this.x + this.pipeWidth){
            if(bird.y < this.gapTopY || bird.y + bird.size > this.gapBottomY) {
                gameOver = true;

How did we get the game to work?

Finally, we made some changes to sketch.js to tie it all together.  This meant changing some bits of the code around.  We decided to:

  • Only move the bird and pipes when the game is started
  • If the game is over, show a “Game Over” message
  • All other times, just show a message with the score

The variables gameStarted and gameOver were really handy for this.

The draw function is below in its final form – as the comments show we do the following things each frame – see if you can spot them all and match the code with the items :):

  1. draw the background
  2. move the bird and pipes if the game is playing (started and not gameover)
  3. draw the bird
  4. check if each pipe is past the bird
  5. check if each pipe has hit the bird
  6. draw each pipe
  7. draw the score in the middle of the screen
  8. If the game has not yet started, draw “Click Space to Start” in the middle of the screen
  9. If the game is over, draw “Game Over” in the middle of the screen
function draw(){

    // Move stuff only if the game is running
    if(gameStarted==true && gameOver==false){

    // show the bird;

    // Show pipes

    // show score
    fill(255, 100);
    text(score, width/2, height/2);

    // show the messages
    if(gameStarted == false){
        text("Click Space to Start", width/2, height/4);

    if(gameOver == true){
        text("Game Over", width/2, height/4);


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