Toggle open
Homepage
Learning Library Blog Build your own Flappy Bird to teach history and coding
Expand breadcrumbs

Build your own Flappy Bird to teach history and coding

By Amelia Archer
October 30, 2018
Img id 2294 Version Id1 H5qb8 B Ou O Mwkce PKZ9 CQ Sonr Lc UZ0 Qo

Watching my children tapping away on screens to support an aerodynamically repressed bird remain afloat and navigate its way through a series of pipes, it occurred to me that an extraordinarily simple game had taken the world by storm. I am, of course, referring to Flappy Bird.

The coding behind the game is basic, and whether using Scratch, Hopscotch, KODU, Tynker or the myriad of other apps and coding software, the game can be replicated.

Initially, I felt quite chuffed about recreating a viral game, but as an educator, I knew that I didn’t want my children simply copying a game that was already in existence. Obviously, I wanted to facilitate creativity and for my students to use new skills to create a game that was relevant to other learning in the class. At that time, we were about to embark on our World War II unit, and throwing a chubby bird into the mix would have jarred in its irrelevancy.

And so, I created a game that I called Flappy Spitfire. Using all the same coding elements as Flappy Bird, but with a spitfire plane instead of a bird. Instead of pipes, my game had Messerschmitt fighter pilots and the player’s role was to keep the spitfire in the air by tapping the screen and navigating it through the enemy aircraft.  

Bringing this work into the classroom was so much fun and the children were fully engaged throughout. In the project they analyzed an already successful app, decomposed the coding behind the game, recreated it and then adapted it — all the while, debugging when problems occurred. It's a perfect fit for addressing the ISTE Innovative Designer Standard!

These were the steps we used to code the game. I am using generic instructions rather than instructions specific to Hopscotch so the lesson can be taught using any platform.

Step 1: Choose a character and make it move

archer 3

First, we chose an image to be the main character and inserted at the center of the screen.

As a class, we discussed how we would make the main character continuously sink and realized this was a simple case of coding the character to move a negative number of pixels on the y axis and then ensuring this was in a repeat loop. (Change y by -0.5)

Now we started to tackle the problem of how to stop our character from its perennial descent and added an “if” block. If the main character was tapped, we changed y by +2. This gave a small jump and students experimented with different numbers until they achieved the desired effect.

Step 2: Create moving objects

Archer

Next step was to create something moving across the screen, with a gap for the main character to navigate through. Students used a series of emojis with a gap in the middle and then rotated it 90 degrees and inserted it on the far right of their screens.

Coding it to travel across the screen was a simple matter of using a “move” block and entering coordinates at the far left of the screen. This caused the barricade to move across the screen but it then came to a halt on the far left, which was no good to us as we wanted a continuous succession of barricades for our main character to fly through. Further thought was needed.

Students suggested several different ways of managing the next step but we settled on this process:

  1. Moving the barricade to the far left.

  2. Setting “invisibility” to 100 percent.

  3. Entering coordinates to take it back to the left-hand side of the screen before setting invisibility back to 0 percent.

  4. Placing a repeat loop around these instructions.

Now students had the impression of a continuous stream of barricades moving across the screen. To randomize the gap in the middle, we added a “random” block in the y coordinates for the barricade.

Step 3: Program drama elements with sound and visuals

archer 2

Now we simply needed to code our main character to do something dramatic if it touched the barricade.

My students use an “if” the “main character” “touches” the “barricade” series of blocks and then their imaginations took over. For some, there was a death march song and the spitfire spinning before turning bright red and then becoming invisible. Others replaced their main character with text such as, “Oh no. I’ve been hit!”

My most able coders were able to add a score for every time the main character successfully traversed the barricade, sound for encouragement, relevant World War II effects and background, and a dramatic, “Game over” effect at the end.

The beauty of adapting an already successful game is boundless. First, analyzing the coding behind the game is an excellent opportunity to stretch students’ use of coding vocabulary and their understanding of how coding works.

Recreating the game with a twist allows for partnering technical proficiency with creativity and topic-related learning. Research takes on an authentic and meaningful purpose when paired with creating a credible game.

Discovering which obstacles characters need to overcome motivates students to dig deeper in their research. WWII pilots may be navigating past messerschmitts or an Anglo-Saxon protagonist could be avoiding Viking warriors; perhaps the topic is environmentally linked and the main character must circumvent CO2 emissions or other pollutants or maybe a scientific study of microorganisms and the game’s hero must avoid the harmful while potentially gaining extra power-boosts by picking up helpful strains.

To enhance this level of extended learning, we found coding with partners or in groups to be far more effective as the collaborative team is more likely to incorporate techie prowess, creative flare and the pedants who ensure the final details are not neglected.  

This particular game of keeping a bird afloat could be adapted to fit any topic. A fish for a marine topic, a ball in a sports topic, a hot-air balloon, a paraglider, a boat … . Any object that needs to stay afloat or up in the air would work.

Or consider a birds-eye view of the screen and adapt the game to a runner, navigating hurdles; a racing car, bicycle or pedestrian weaving through obstacles.

Whatever the topic, you can adapt a simple game like Flappy Bird to create an extended and meaningful learning opportunity for your students developing their topic knowledge, coding skills and creativity.

Amelia Archer, M.A., is a globally connected educator and a senior teacher at Purley CE Primary School in Reading, England. She has shared practical applications for technology in the classroom and her belief in "the digital pencil case," at BETT (Excel, London), The Education Show (NEC, Birmingham), JDO global educators' conference (Denver) and with school leaders at conferences in the South of England.