Close

May 23, 2019

Coding Flappy Bird: A Tutorial

Every summer camp, students arrive with their own ideas and conceptions of what coding will be like for them and what they’ll make. As they get settled in – they realize that some of their ideas aren’t going to materialize as quickly as they’d thought. They’re going to have to master basic concepts and get a few projects under their belt before tackling the game they’ve been dreaming of.

That being said, it’s not an insurmountable distance. Every summer, we have students arrive on Monday with zero coding experience and leave on Friday with a solid understanding of the basics, a portfolio of projects, and even a few games that they’ve programmed. The best part? They leave with an eagerness to learn more and challenge themselves with even harder projects. It’s amazing for us as educators and programmers to see students as young 9 and 10 years old learning concepts that we struggled with in college. It’s crazy to think that the majority of our students have more developed coding portfolios than their college freshmen counterparts.

To give you a taste of what it’s like to be one of our students towards the end of their first week, we thought we’d breakdown a game that we’ve all heard of (some of us might’ve been guilty of downloading it and playing more than we should’ve…) Flappy Bird! Flappy Bird came out in 2014 and at one point made it’s creator over $50,000.00 in ad revenue a day. What’s really wonderful about Flappy Bird is that it’s not complicated to code. You can do a basic version with less than 100 lines of code and along the way you’ll get to use variables, conditional statements, booleans, and our coordinate grid. So let’s get to it 🙂

As you can see from the gif of our game above, we’re going to need a few things. Whenever we start a new project, we want to break it down to make sure that we work efficiently and don’t trip ourselves up. Let’s try and explain the game below.

Flappy Bird Summary: We have a beautiful blue background. A bird is controlled by the space bar on our keyboard. When the spacebar is pressed, the bird should fly up by some value. Otherwise, it should be pulled down by gravity. The bird will continuously move to the right. As it does, there will be pipes coming from the top and bottom of the screen. There will be a narrow passage between the pipes that the bird can fly through and that passage will change each time the bird successfully flies through one of the passages.If the bird touches one of the pipes, the game is over.

Looks scary right? Let’s break it down even further. When working with students, we’ll do this with whiteboards, paper, and through conversation. Since you’re reading, you’ll have to settle for this 🙂

Flappy Bird Breakdown:

  1. We have a beautiful blue background.
  2. A bird that can move based on our input
  3. Controlled by the space bar on our keyboard. When the spacebar is pressed, the bird should fly up by some value.
  4. it should be pulled down by gravity.
  5. The bird will continuously move to the right.
  6. As it does, there will be pipes coming from the top and bottom of the screen.
  7. If the bird touches one of the pipes, the game is over.
  8. There will be a narrow passage between the pipes that the bird can fly through and that passage will change each time the bird successfully flies through one of the passages.

So really, our game is about 8 steps could probably be broken down even further but for now, this is enough for us to get started. I’ll do each step and include the screenshot below as I do each step. If you’d like to follow along at home, have your student log into their account, or make yourself a temporary account at try.codenaturally.com

1) We have a beautiful blue background – this one is easy. We have a built in function to color our background using red, green, and blue parameters. I’m gonna use the color picker to find the color for lavender.

2) A bird that can move based on our input – This one is more vague. Let’s break it down. First, we need to draw a bird. We can do that with the ellipse function. We’ll color it yellow with the fill function. Since the bird needs to move, I know I’ll need to declare some variables for it. The only thing that’ll be changing for the bird are it’s x and y location. This means I’ll declare a variable for  birdX and birdY and set them to a starting x and y.

Anything we put inside of function draw will be done 60 times a second in a loop. This means the background and ellipse are both being drawn 60 times a second. This loop will make it easier to animate our pipes and move our bird later.

3) Controlled by the space bar on our keyboard. When the spacebar is pressed, the bird should fly up by some value.: I know I’ll need a conditional statement and the key code for the spacebar. Since I want the bird to fly up, I know I’ll need to do something to the birdY variable. As I’m doing this step, I think it might be better to do step 4 first so like any good programmer, I’m gonna change my plans and come back to this.

4)  It should be pulled down by gravity: I switched to doing this first because the bird will ultimately have to fly against gravity later so I didn’t want to have to re-do step 3 after doing step 4. We’re not going to actually simulate gravity but we’ll use math to get the effect we need. 🙂

This is usually easier to explain with a whiteboard and conversation, but essentially, the variable vel is getting larger every loop due to gravity being added to it. This vel variable is added to birdY. As it gets bigger, birdY begins to fall faster because a bigger number is added to it every loop. We have a conditional statement at the bottom that prevents our bird from flying off of our screen.

Back to Step 3:

3) Controlled by the space bar on our keyboard. When the spacebar is pressed, the bird should fly up by some value.: I know I’ll need a conditional statement and the key code for the spacebar. Since I want the bird to fly up, I know I’ll need to do something to the birdY variable. The key code for spacebar is 32. You can find any key code you need at http://keycode.info/

keyPressed is a provided function. We’re putting it outside of function draw since anything within that function runs 60 times a second. We’re subtracting lift from vel as our y coordinate gets smaller as it goes up. We’ll have to press the space multiple times to stay in flight and not crash to the floor. The conditional statement tells the computer that if the key that’s down is #32 or spacebar – do what’s inside the brackets.

5)The bird will continuously move to the right. – We could do this by making birdX bigger right? But I think I might make another adjustment and make the pipes first. Instead of having the birds move, I could just move the pipes and have them regenerate as they exit the screen. This will give the illusion of the bird moving to the right.

6) There will be pipes coming from the top and bottom of the screen: Drawing these pipes is fairly simple, we can just use our rect function. But we also need the pipes to move to the left, re-generate all the way to the right when they exit the screen, and change the location of the passage for our bird.

  1. Create variables to move pipes to the left, to set y-coordinate of bottom pipe, and set the height of both pipes.
    1. To move pipe to the left we could make a pipeX variable and set it to a number that’s 800 or greater so it’s off screen.
    2. For the top and bottom height, we could declare variables topH and bottomH. topH should be set to random(200). Random is a function that picks a random value for us between 0 and the number you provide. This means the height of our top rectangle will be random between 0 and 200. bottomH should be set to 600 – topH – 150. This ensures that there’s always a gap of 150 for our bird by taking the value of topH into consideration.
    3. For the bottom rectangle’s y-coordinate, we’ll create a variable called bottomY and set it equal to topH+150 to ensure the bottom rectangle is always drawn 150 units below the top rectangle.
  2. Create 2 rectangles and plug in the variables we created inside of function draw.
  3. Move the pipes to the left: We’ll use our pipeX variable to move our pipes. Inside function draw, we need to add a math expression to make pipeX get smaller and move to the left – pipeX = pipeX – 5;
  1. Regenerate and change the passage: To do this, we set up a conditional statement dependent on the x location of our pipes. Once they get smaller than 10 we want to reset pipeX to 1000 but also, we want to reset topH, bottomH, and bottomY as well to ensure our passage changes.

Now we have a game that looks like it’s Flappy Bird without any of the rules programmed by us in JavaScript! You should take a minute to give yourself a pat on the back. This is tough for plenty of adults and we’d never recommend that a student starts off with a project this difficult. It can be discouraging when you don’t get it. That’s why we ensure that each student understands all of the core concepts through building up a portfolio before just trying to apply them all in this one project.

Also – in all the excitement, I accidentally finished 5, 6, and number 8. Sorry about that! Let me know if I should re-write this post where I stick to the structure originally outlined. All we have to do is #7 and finally make our game work.

7) If the bird touches one of the pipes, the game is over: The hard part. Sort of? It’s a lot of conditional statements and we have to use booleans but we got this! It always helps to use grid paper with the coordinate grid to explain this to our 3rd and 4th graders but we’ll have to do what we can without it.

From line 32 to 34, we’re creating a condition where the computer checks if the bird is touching an area within the left and right side of the pipe. pipeX + 50 defines the right side of the pipe because it’s the width of the pipe plus the x coordinate. birdX + 25 defines the right side of our bird since it’s width is 50 and the x coordinate for an ellipse is it’s center.

From line 35 to 36, we’re creating a condition where the computer checks if the bird is touching an area within the top and bottom of our top pipe. When combined with the conditional statement from above, it allows the computer to check if the bird touches any part of the area for the top pipe. The reaction to these conditions finishes up on line 39  and triggers gameOver to switch to true. Which you probably understand means the game is over. 🙂

Line 40 to 47 are doing the exact same thing but for the bottom pipe. Students have usually already used all of this syntax and these concepts by the end of their first week with us at summer camp.

Lastly, what happens when gameOver is set to true? Well Let’s see.

If gameOver is equal to true which we check with a conditional statement like you see from line 67-73, than a new background will be drawn along with some texts letting you know of your demise.

Note: I had to add vel = vel*0.9; to my function draw in order to control to smooth out the gravity effect we created and make the game more playable.

Hope you found this to be fun and you can play my flappy bird game by clicking here. If you want to build your own, you can use your student’s account or make a temporary account at try.codenaturally.com – it’ll be available through the month of May.

Interested in Summer Camp? Click here to learn more or here to reserve your students’ spot.

Leave a Reply

Your email address will not be published. Required fields are marked *