VOTE FOR DAWSON-Vote FIVE times in EVERY browser (Chrome, Firefox, Internet Explorer, etc.) on EVERY device (my computer, your laptop, your phone, etc.)

Lesson 5: Variables

Game Lab


In this lesson students learn how to use variables to label a number in their program or save a randomly generated value. Students begin the lesson with a very basic description of the purpose of a variable. Students then complete a level progression that reinforces the model of a variable as a way to label or name a number. Students use variables to save a random number to see that variables actually store or save their values, allowing them to use the same random number multiple times in their programs.


Students will be able to:

  • Identify a variable as a way to label and reference a value in a program
  • Use variables in a program to store a piece of information that is used multiple times


  • Variable – A placeholder for a piece of information that can change.

Introduced Code

Warm Up (10 Mins)

Labels and Values

Video: As a class watch the video introducing variables.

Review: Review the most important points from the video on the map level in Level 4. You don’t need to understand all of these ideas right now, but you can use this level as a reference throughout the lesson.

There’s a lot to learn about variables and we’ll be seeing them throughout this unit. Today we’re going to see them used to help us draw pictures. The most important thing we care about today, though, is just seeing how giving a label to a value helps us write programs.

Activity (30 Mins)

Programming with Variables

You should understand that variables hold information and an be accessed using their labels. With simple drawings, you may not see the power of variables, so you may want to think of some different apps that you use and what information needs to be stored for the app to work, or think about a more complex program that you want to use variables for.

Numbers, text, and colors can all go into variables, as well as more complicated data structures that you will see later in the course.

Wrap Up (5 Mins)


  • What is your own definition of a variable?
  • Why are variables useful in programs?
Input-Output-Store-Process: The model you learned in Unit 1 might be nice to reference here. You are storing information in a variable which means you are saving that information in memory.

CSS Classes: You studied CSS classes in Unit 2 so you are familiar with the act of creating a name for something in your programs in order to be able to reference it. While the context here is different, the idea of naming remains the same.

Journal: What connections do you see between variables and what you learned about the Input-Output-Store-Process model of a computer?


Lesson 6: Sprites


In order to create more interesting and detailed images, students are introduced to the sprite object. Every sprite can be assigned an image to show, and sprites also keep track of multiple values about themselves, which will prove useful down the road when making animations.


Keeping track of many shapes and the different variables that control aspects of those shapes can get very complex. There will be lots of variables with different variable names. Instead computer scientists created something called an object which allows for one variable name to control both the shape and all its aspects. In Game Lab we use a certain type of object called a sprite. A sprite is an on screen element with properties that control its look. Properties are the variables that are attached to a sprite. You can access them through dot notation.

Using the Animation Tab, you can create or import images to be used with your sprites. Later on, these sprites will become a useful tool for creating animations, as their properties can be changed and updated throughout the course of a program.


Students will be able to:

  • Create and use a sprite
  • Use dot notation to update a sprite’s properties


  • Property – Attributes that describe an object’s characteristics
  • Sprite – A graphic character on the screen with properties that describe its location, movement, and look.

Introduced Code

Warm Up (5 minutes)

The goal here is to get you thinking about all of the different values that go into drawing a single shape on the screen, and how many more values you may need to control a more detailed character in a program. If you are struggling to come up with ideas, you might want to think about the following questions: How do you tell a shape where to go on the screen? How do you tell a shape what size it needs to be? How do you tell a shape what color it should be? What about its outline? What if you wanted to change any of those values during your program, or control other things like rotation?

How Much Information?

Think, Pair, Share: So far we’ve only written programs that put simple shapes on the screen. Come up with a list of all of the different pieces of information that you have used to control how these shapes are drawn.

Prompt: What if we wanted to create programs with more detailed images, maybe even characters that you could interact with? What other pieces of information might you need in your code?

The sprite is a type of data called an object. While we aren’t yet explicitly introducing the concept of objects, you do need to understand that a sprite is a different type of value from the ones we’ve seen before, one that can hold references to many more values. For you who are curious about whether there are other objects in our programs, see if there are more blocks in the toolbox that follow the same dot notation (such as World.width and World.height)

Today we’ll learn how to create characters in our animations called sprites. These sprites will be stored in variables, just like you’ve stored numbers in the past, but sprites can hold lots of pieces of data, which will allow you to create much more interesting (and eventually animated!) programs.

Activity (45 min)

Introduction to Sprites

Distribute: Get a copy of the activity guide. Use this sheet to plan out the Sprite Scene you create at the end of this lesson.

Transition: Send students to Code Studio

  • Video: Introduction to Sprites

Discussion Goals

Sprites are a very complex concept, and you may have difficulty understanding exactly what they are. The most important aspect for you to understand is that sprites allow you to organize a lot of information about something that you want to draw to the screen.

You should make the connection between properties and variables, that both hold information that your program needs to run. Properties are accessed through their sprites, and Game Lab sprites already have specific properties that are automatically created when you create each sprite, such as x position, height, and rotation.

Sprites solve the problem of organizing a lot of information about how something should be drawn to a screen. Rather than creating new variables to hold all of that information, sprites use properties to hold all of the information about one thing that is drawn to the screen.

  • Video: The Animation Tab

Make sure you understand that you will need to both create the image (or animation) in the Animation Tab and then add the animation to the sprite using the setAnimation block. You may be confused by the use of the word “animation” for single images, but in Game Lab, still images are considered “animations” with only one frame.

You can use an animation already in the animation tab library, upload one from their computer, or create your own using the provided drawing tools. Additionally, you can use the drawing tools to modify the images you have chosen from the library or uploaded.

Misconception Alert!

Don’t confuse the concepts of a sprite, its animation, and the image that it draws to the screen. In the next few lessons, watch out for this misconception, and reinforce the idea that a sprite’s animation is just one of its properties, the one that controls what image is drawn to the screen. Remember that a single sprite may have different animations throughout the course of the program, just as other properties can change, and that two or more sprites might share the same animation.

Wrap Up (5-10 min)

Share: Share your Sprite Scenes. Reflect on your scenes and identify ways in which you’d like to improve.


Assessing Sprite Scenes

Do a “talk through” of your code with Mrs. Weber. Mrs. Weber will be checking to ensure that you know why you sequenced your code the way they did, and in particular she will look for “dead code”, or code that doesn’t impact the final scene. At this point it’s likely that your are still drawing shapes before you draw the background (which then won’t be seen) or that you are calling drawSprites() multiple times (it only needs to be called once).



Leave a Reply

Your email address will not be published. Required fields are marked *