Teach Your Students How to Make Their Own Flappy Bird Game (in just one class)

I’m not a programmer, but I’m a bit of a “hacker”. I learned how to build websites without learning code. I’ve made logos without really understanding design. And I enjoy “hacking” other projects together.

I see a problem with the way we teach a lot of computer programming in our schools. Now, this isn’t everywhere, but in my small experience it seems like programming classes have centered around learning how to code…and not focused on learning how to build/make/create.

I want to get students on a winning streak as soon as possible. I want them to be able to make something in one class period. Then they can tweak it, build it more, or move onto something else.

I used to teach my 10th and 11th grade students how to make a wordpress website in just one day. Why? Because they didn’t need to know HTML and CSS in order to build a decent looking website. After the website was built, many of them learned a bit more about HTML and CSS so they could make some changes and modifications down the road. This helped every student create their own digital portfolio (that they could keep when they left our school) and manage it without my help, and without truly understanding coding.

I’m not in the classroom anymore, but I still get to run sessions for my school’s “IE Period”. Two days out of our six-day cycle, the students have one period where they can pick their learning opportunity. They can get extra help during the IE period, make up a test, watch a documentary, learn how to survive the zombie apocalypse (this is a popular session by one of our SS teachers!), and…learn how to make their own Flappy Bird Game.

Getting Started in Two Steps

If you aren’t sure what Flappy Bird is, read this post. It’s a simple game where you tap a bird to fly up-and-down through a Mario Bros-like world. It was the most downloaded game this past winter in the App Store until the creator took it down (and he was making $50,000 per day!) and sent the gaming world into a frenzy.

Since then the game has continued to be popular and…copied. Flappy Bird type games popped up all over the App Store and Google Play Store, as places like Elance.com became hotspots for requests to build Flappy Bird games.

The whole thing really got me interested in how hard it would be to make a game like Flappy Bird…turns out it’s not too difficult 🙂

I spent the past two days with a group of 10 students building our own Flappy Bird games. Here’s how we did it, and how you can do it with your students as well!

Step 1: Read this AWESOME article by the team over at Scirra on “How to Make Your Own Flappy Bird Game in 10 mins“. While I found out that it does take more than 10 minutes for someone like me…it really should only take one class period from start to finish.

Step 2: Download “Construct 2” which is a game-making software (free) that allows you to make this Flappy Bird game with the instructions above.

I’d recommend building the game yourself first as a teacher before doing it with your students, but it’s not necessary if you are crunched on time.

Building the Game

Once you’ve got Construct 2 downloaded to your computer, run it and open it up. It’ll look like this:

constructnewscnreen

You’ll want to create a ‘New Project’ and the screen will pop up like this:

constructnewproject

Now, you’ve got to do one more thing before following the steps listed by Scirra in their guide. On the left hand side of the guide, is a link that says, “Tutorial Download” and underneath has a link to the Flappy.rar file. Make sure you download and open up that file (you may need to convert it to open it up on some computers). It contains all of the picture files that you’ll need later to make the game look like Flappy Bird!

flapptutorialpic

*Pro Tip: If you want to import all of the files, open up the .capx project file after you download the .rar file and it will start you out with the Flappy Bird sample that the guys from Scirra already made.

Putting Your Own Twist on the Game

As the students go through the steps they’ll have some different opportunities to add their own twist to the game. They can:

  1. Change the background to their own image. Make sure you find an image you can use! (Background image should be 400 x 500)
  2. Change the Flappy Bird icon to something else. (Should be 33 x 19)
  3. Change the Pipe structure.
  4. Sound effects? These are fun to add.
  5. New opening screen display (what’s your game going to be called?)

I had a student who made “Oinky Pig”. It was a pig flying with a funny background and we couldn’t wait to hear some “oinking” sound effects. Other students had airplanes flying, and Easter bunny hopping, etc.

Hosting the Game on Google Drive So Others Can Play

Once you are finished creating the game, Construct will let you “Run” the game and play the local file in a web browser. However, if you want to take the game to the masses, you’ll have to Export the project.

You can always host it on your own website, but two easy ways for students to host the game so others can play is via Dropbox or Google Drive.

Here are the instructions from Scirra for both:

I found Google Drive to be the easiest way. Basically you have to do 5 things:

  1. Export the project on Construct 2 to “HTML 5”
  2. Go to Google Drive and click “Upload a Folder” – Choose the Folder that you just exported from Construct.
  3. Once it is uploaded click “Share” – change your share settings to “Public” anyone with link.
  4. Take the URL above and copy and paste it. Then this part is a bit tricky. Copy the Folder ID inside the URL.
  5. Then past that Folder ID inside this URL: https://googledrive.com/host/FOLDERID/index.html

Here is an example from Scirra that goes into more detail with the tricky part:

To get a URL to the playable version of your game, and not a page which opens the source of the HTML page, you need to edit the Link to share a little.

In the sharing link, between the ‘/d/’ and ‘/edit’ parts is a unique ID for your shared folder. Copy this from the URL. Next, paste this in to the following URL where it says FOLDERID:

https://googledrive.com/host/FOLDERID/index.html

Note you still need “index.html” on the end. Here’s an example:

Getting your hosted URL
This is now the URL to your game! You should be able to visit it in a new browser tab and see the game load.

Now What?

It’s your turn to try it with your students! I did this with High School students but I’m confident that middle school students, and some high level elementary students could do this as well.

It was not only a fun learning activity, but also a small win that could lead many students down a path to learn more about programming so they can build something better!

Let me know if you need any more information in the comments, and please share your story if you try this with your students!

Get the Innovative Teaching Toolbox

Innovative
Powered by ConvertKit

Leave a Reply