Lesson 20: Mini-Project - Side Scroller

Overview

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

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.

Purpose

This lesson is a chance for students to get more creative with what they have learned. Encourage students to spend time on parts of the activity that interest them, as long as they meet the requirements of the assignment. This lesson can be shortened or lengthened depending on time constraints.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (35 min)

Wrap up (5 min)

View on Code Studio

Links

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

For the Teachers

For the Students

Support

Report a Bug

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.

Warm Up (5 min)

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?

Activity (35 min)

Distribute: (Optional) pass out copies of the activity guide. Students can use this sheet to plan out the Side Scroller they create at the end of this lesson, but the planning can also be completed on scratch paper.

Transition Send students to Code Studio.

Wrap up (5 min)

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?

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Student Instructions

  • Intro to Side Scrollers
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Frog jump

This frog jumping game is an example of a side scroller. Side scrolling games have backgrounds that move across the screen from side to side.

In this game, the player uses the up arrow to make the frog jump. The frog must avoid the mushrooms while trying to get the flies. Every fly scores one point, and hitting the mushrooms makes the player health go down. When the player health hits zero, the game is over.

Play the game a few times and discuss it with your partner. You have already learned all the skills you need to code this game. You'll be making your own side scroller in this mini-project.

  • Draw Your Background
  • 3
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Draw Your Background

The sample game had a simple background of a blue sky, a white oval cloud, and a brown ground. You can choose to make your background as simple or complicated as you want.

Do this

  • Find the code comment BACKGROUND
  • Use the drawing tools to draw your background.
  • Run the program to test the background.
  • Create Your Sprites
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Create Your Sprites

Next, create the sprites you will use in your program. You'll need a player (the frog), a target (the fly), and an obstacle (the mushroom). You can make them anything you want.

Do this

  • Go to the animation tab and make sure that you have the images that you want.
  • The frog, mushroom and fly are already there, but you can use whatever images you want.
  • Find the code comment GAME SETUP.
  • Create your three sprites, the player, target, and obstacle.
  • Set each one to the animation you chose for it.
  • Scale each one to the size you want.
  • Place them where you want them to be on (or off) the screen.
  • Set the starting x velocity of the target and the obstacle.
  • Test your program. The player should be on the screen, and the target and obstacle should start off screen and move across the screen from right to left.

Hint: The obstacle and target sprites should always move at the same speed. You only need to set a velocity for each sprite one time. You can do this outside the draw loop.

  • Player Controls
  • 5
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Player Controls

The up arrow should make the player jump. There are three parts to jumping: jump up when a key is pressed, go down when you're high enough, and don't fall through the ground!

Do this

  • Find the code comment JUMPING and read the three comments in that section.
  • Add a conditional that checks whether the player has pressed the "up" key.
  • If the up key is pressed, use the velocityY property to start the player (frog) sprite moving up.
  • Test your code to see whether the sprite goes up when you press the up arrow.
  • Add a conditional that uses the sprite's y property to check whether it is high enough.
  • If it is far enough up the screen, start the sprite moving back down.
  • Test your code to see whether the sprite goes back down when it gets to the top if its jump.
  • Add a conditional to check whether the sprite is low enough on the screen to be on the ground.
  • If it is far enough down the screen, stop the sprite.
  • Test to make sure the sprite does not go through the ground at the end of the jump.
  • Looping
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Looping

The obstacle (mushroom) and the target (fly) need to loop back to the right of the screen once they go too far.

Do this

  • Find the code comment that says LOOPING
  • Add a conditional that uses the obstacle sprite's x property to check whether it has moved off the screen.
  • If it has moved off the screen, use its x property to put it back on the right side of the screen.
  • Test your code to see whether the obstacle is looping.
  • Add a conditional that checks whether the target has moved off the screen.
  • If it has moved off the screen, use put it back on the right side of the screen.
  • Test your code to see whether the target is looping.
  • Sprite Interactions
  • 7
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Sprite Interactions

In the sample game, the obstacle (mushroom) rotated and the health decreased when the player (frog) touched it. The score increased and the target (fly) moved back to the right of the screen when the player (frog) touched it.

Do This

  • Find the code comment SPRITE INTERACTIONS and read the comments in that section.
  • Create a conditional that checks whether the player sprite is touching the obstacle sprite.
  • If they are touching, decrease the health and change the obstacle sprite in some way.
  • Run the program to test your code.
  • Create a conditional that checks whether the player sprite is touching the target sprite.
  • If they are touching, increase the score and move the target back to the right of the screen.
  • Run the program to test your code.

You may want to use watchers to keep track of your score and health.

  • Scoring & Scoreboard
  • 8
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Scoreboard

Right now the health is displayed, but the score is not.

Do This

  • Find the code comment SCOREBOARD and read the code that makes the health information display.
  • Add code to create a scoreboard.
  • Run the program to test your code.
  • Review Your Game
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Review Your Game

Now that you've added in all the features, it's time to play your game!

Do this

  • Play your game a few times to check for bugs.
  • Look over your project guide to make sure you have not missed anything.
  • Make any last changes.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 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.