Lesson 15: Build a Flappy Game

Overview

In this special stage, students get to build their own Flappy Bird game by using event handlers to detect mouse clicks and object collisions. At the end of the level, students will be able to customize their game by changing the visuals or rules.

Purpose

Events are very common in computer programs. In this lesson, students will further develop their understanding of events by making a Flappy Bird game. Students will learn to make their character move across the screen, make noises, and react to obstacles based on user-initiated events.

Agenda

Warm Up (10 min)

Bridging Activity - Events (10 min)

Main Activity (30 min)

Wrap Up (10 - 15 min)

Extended Learning

View on Code Studio

Objectives

Students will be able to:

  • Match blocks with the appropriate event handler.
  • Create a game using event handlers.
  • Share a creative artifact with other students.

Preparation

  • Play through the puzzles to find any potential problem areas for your class.
  • Make sure every student has a journal.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Students

Vocabulary

  • Event - An action that causes something to happen.

Support

Report a Bug

Teaching Guide

Warm Up (10 min)

Introduction

Lesson Tip

Students will have the opportunity to share their final product with a link. This is a great opportunity to show your school community the great things your students are doing. Monitor and collect all of the links to the projects and keep them on your class website for all to see!

  • Review "The Big Event" activity with students:
    • What did we "program" the button click events to do?
  • Now we're going to add events to our coding. Specifically, we're going to create an event for clicking the mouse and one for when the bird hits an object like the ground or an obstacle. When have you seen a character touch another object as an event in games?

Bridging Activity - Events (10 min)

This activity will help bring the unplugged concepts from "The Big Event" into the online world that the students are moving into. Choose one of the following to do with your class:

Unplugged Activity Using Paper Blocks

Using the remote from the The Big Event (Course C) - Event Controller and Unplugged Blocks (Courses C-F) - Manipulatives, gather your class to reprise the activity from the previous lesson. Ask the class "when the teal button is pushed, what do we do?" then fill in one of the when event blocks and one of the blue action blocks accordingly. Make sure that the students understand that the when blocks need to be on top of the blue block and they need to touch in order for the program to run.

Preview of Online Puzzles as a Class

Pull a lesson from the corresponding online stage, we recommend puzzle 2. Ask the students what should happen when the Flappy Bird runs into something like the ground or an obstacle. Explain that Flappy in this game will move forward with a click of the mouse and the game will end if Flappy runs into anything.

Complete the puzzle with the class and allow time for a quick discussion on what was and wasn't an event. For every event, ask the students what the action corresponding to this event is.

Main Activity (30 min)

Online Puzzles and Free Play

Teacher Tip

Remind the students to only share their work with their close friends or family. For more information watch or show the class Pause and Think Online - Video.

This entire lesson builds towards students creating their own Flappy game, but the second half of the levels are all linked. This mean students will see their own code as they move between bubbles 6-10, allowing for more personal customization that will carry all the way to the final product.

In the final stage of this lesson students are able to tweak their game to make it unique - encourage them to see how different they can make each game within the constraints provided. If the class doesn't use pair programming, then tell students to go around and look at other student's games. Otherwise, have students discuss and try out different ways to set up their game with their partner.

Wrap Up (10 - 15 min)

Journaling

Having students write about what they learned, why it’s useful, and how they feel about it can help solidify any knowledge they obtained today and build a review sheet for them to look to in the future.

Journal Prompts:

  • What was today's lesson about?
  • How did you feel about today's lesson?
  • What did you do to make your game unique?
  • Draw out a game you want to make in the future.

Extended Learning

Use these activities to enhance student learning. They can be used as outside of class activities or other enrichment.

Look Under the Hood

When you share a link to your game, you also share all of the code that goes behind it. This is a great way for students to learn from each other.

  • Post links to completed games online or on the board.
    • Make a game of your own to share as well!
  • When students load up a link, have them click the "How it Works" button to see the code behind the game.
  • Discuss as a group the different ways your classmates coded their games.
    • What suprised you?
    • What would you like to try?
  • Choose someone else's game and build on it. (Don't worry; the original game will be safe.)
  • Code Your Own Flappy Game
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Attach the flap a normal amount block to the when click event, then press "Run".


Click or tap on the play space to move Flappy to the target.

View on Code Studio

Student Instructions

The when run event allows you to run code as soon as your game starts.

Try adding a block that sets the level speed when the "Run" button is pressed.


Play the game and flap to the target to continue.

View on Code Studio

Student Instructions

Now we've added the ground.

Attach the end game block to the when hit the ground event.


Play the game and crash the bird into the ground to continue.

View on Code Studio

Student Instructions

Flappy will fly right through obstacles unless you write code to make him crash.

Attach a block to the when hit an obstacle event so that the game ends when Flappy crashes into the first set of pipes.

View on Code Studio

Student Instructions

We've added a scoreboard to count points when Flappy passes obstacles.

Add a block to the when pass an obstacle event that scores a point, then press "Run" to fly Flappy through the first set of pipes.

View on Code Studio

Student Instructions

Click the down arrow inside of the flap a normal amount block to pick a different flapping power.

See if you can still score a point after making Flappy flap either a smaller or larger amount each time you click.

View on Code Studio

Student Instructions

Next, try changing the scene by attaching a block to the when run event.

View on Code Studio

Student Instructions

You can set the background under any event, not just when the game starts.

Try setting a random scene when other events happen...for example, when passing an obstacle.

View on Code Studio

Student Instructions

To mix things up, instead of ending the game when Flappy hits an obstacle, try setting the score back to 0.

View on Code Studio

Student Instructions

Create your own Flappy game!

You can change the visuals and the rules...even the gravity! When you're done, click "Finish" to share with friends on their phones.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 1A-AP-09 - Model the way programs store and manipulate data by using numbers or other symbols to represent information.
  • 1A-AP-11 - Decompose (break down) the steps needed to solve a problem into a precise sequence of instructions.