< Interactive Animations and Games ('24-'25)

Lesson 21: Mini-Project - Side Scroller

45 minutes

Overview

This lesson is another chance for students to get more creative with what they have learned. Students use what they have learned about collision detection and setting velocity to create a simple side-scroller game. After looking at a sample side-scroller game, students brainstorm what sort of side-scroller they would like to make, then use a structured process to program the game in Code Studio. This lesson can be shortened or lengthened depending on time constraints.

Question of the Day: How can the new types of sprite movement and collision detection be used to create a game?

CSTA K-12 Computer Science Standards (2017)
    • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
    • 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
    • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
    • 2-AP-17 - Systematically test and refine programs using a range of test cases.

Agenda

Preparation

Links

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

For the teachers
For the students

Teaching Guide

Warm Up (5 minutes)

Review

Ask students to think of all of the things that they have learned how to do in the unit so far, and display their answers to the class. This is a good time to check in on any concepts that have been challenging for students.

Remarks

Now that you've learned how to detect sprite interactions, you can start making some more interesting games. Today, we're going to look at how you can use what you've learned to make a side scroller game.

Question of the Day: How can the new types of sprite movement and collision detection be used to create a game?

Teaching Tip

Facilitating Mini-Projects: Mini-Projects act as checkpoints in the curricula and cover the subset of skills students have seen so far in the unit. They are designed for 1-2 days of implementation as a way to check-in with how well students understand the course content so far. You may decide to extend these projects as a way to support or challenge students, which could allow you to revisit difficult concepts or support students who may have missed lessons and are trying to catch up. However, we recommend deciding this ahead of time and being firm with students about how much time they have for each project - otherwise, it's easy for projects to drag-out to multiple days and for student's work to spiral beyond the scope of this project.

Activity (35 minutes)

Distribute: Pass out copies of the Side Scroller. Student should use this activity guide to plan out and brainstorm how to program the side scroller game before they head to the computer so that once they get to the computer they are just executing the plan.

Optional Transition You can choose to either send students to Code Studio to play the Side Scroller example game or demo the game for the students.

Step 1: Define - Plan Your Game

Circulate: As students fill out a description of the aspects of the side scroller they want to keep the same and what they want to change, circulate the room to ask students about their ideas and help guide them.

Step 2: Prepare - Design Your Game

As students fill in the activity guide about the side scroller game, continue to support student ideas and brainstorms as they are asked to consider the different aspects of programming the game:

  1. Students are asked to identify parts of programming the game that they are not sure how to do yet. If students identify concepts that have previously been covered, suggest they go back and review.

  2. Next, students are given the opportunity to identify new animations for the three sprites in the game.

  3. The first layer of the game is a background. The activity guide provides a space for students to lay out their background and an area for students to take notes and write pseudocode.

  4. Next, students think through how each sprite is programmed to move and interact with the other sprites and given an opportunity to decide if they want to change anything.

Step 3: Try - Program Your Game

Remarks

Many of you are ready to start creating your game. Don't forget about using the problem solving process to help with the blank screen effect. If you feel stuck or you’re not sure what to do next, remember you can always follow the steps of the problem-solving process to define your next step, prepare for what you want to code, try it out, then reflect on whether or not it solved your problem.

Distribute: Hand out a copy of the Problem Solving with Programming to pairs of students or have students take this resource out if they kept it after the last project. Encourage students to look over the guide.

Display: Show the slide with the problem solving process graphic.

Transition: Once students have completed their planning sheet, it's time to head to the Code.org website. The short level sequence asks students to complete each element of their project.

Teaching Tip

Scaffolded Tasks: The tasks for this mini-project are broken down for students with each level focusing on a particular part of the project (background, sprites, player controls, etc). Encourage students to follow the instructions in each level, focusing on one task at a time.

Circulate: Encourage students to use the steps in the Problem-Solving Process for Programming when they get stuck or are unsure of what to do next.

Teaching Tip

Debugging Strategies: As students design and implement their own project ideas, they may find themselves with new bugs that they need to untangle and you may find yourself looking at completely unfamiliar code as students look for help troubleshooting their errors. To help smooth out the debugging experience, consider the following strategies:

  • Review the Teacher Guide to Debugging for some common questions and strategies to help support students in debugging their code
  • Have students follow the steps in the Student Guide to Debugging and use the Bug Report Quarter-Sheets as an initial step in the debugging process. This helps students prepare and communicate their issue before asking for help.
  • If students haven't seen it yet, consider showing the Debugging Video to the class to reinforce debugging best practices.

Digging Deeper: Consider supplying students with an object to talk to as part of the debugging process. This is sometimes known as Rubber Duck Debugging - you can learn more on the website https://rubberduckdebugging.com/

Assessment Opportunity

Use the project rubric attached to this lesson to assess student mastery of learning goals of this unit.

Step 4: Reflect

Direct students to complete the last step of their activity guide to reflect on how they did programming this game.

Wrap up (5 minutes)

Question of the Day: How can the new types of sprite movement and collision detection be used to create a game?

Prompt: What was one challenge in making this game? What is your advice for someone else who has the same challenge?

Creative Commons License (CC BY-NC-SA 4.0).

This work is available under a Creative Commons License (CC BY-NC-SA 4.0).

If you are interested in licensing Code.org materials for commercial purposes contact us.