CS Discoveries 2018 | Interactive Games and ... - Code.orgimages, animations, interactive art, and games. Starting off with simple, primitive shapes and building up to more ... This

UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Big Questions

What is a computer program?What are the core features of most programminglanguages?How does programming enable creativity andindividual expression?What practices and strategies will help me as I writeprograms?

Unit 3 - Interactive Games and AnimationsIn the Interactive Games and Animations unit, students build on their coding experience as they create programmaticimages, animations, interactive art, and games. Starting off with simple, primitive shapes and building up to moresophisticated sprite-based games, students become familiar with the programming concepts and the design processcomputer scientists use daily. They then learn how these simpler constructs can be combined to create more complexprograms. In the final project, students develop a personalized, interactive program. Along the way, they practice design,testing, and iteration, as they come to see that failure and debugging are an expected and valuable part of the programmingprocess.

Chapter 1: Images and Animations

Week 1

Lesson 1: Programming for EntertainmentUnplugged

The class is asked to consider the "problems" of boredom and self expression, and to reflect onhow they approach those problems in their own lives. From there, they will explore how ComputerScience in general, and programming specifically, plays a role in either a specific form ofentertainment or as a vehicle for self expression.

Lesson 2: Plotting ShapesUnplugged

This lesson explores the challenges of communicating how to draw with shapes and use a tool thatintroduces how this problem is approached in Game Lab.The class uses a Game Lab tool tointeractively place shapes on Game Lab's 400 by 400 grid. Partners then take turns instructingeach other how to draw a hidden image using this tool, accounting for many of the challenges ofprogramming in Game Lab.

Lesson 3: Drawing in Game LabGame Lab

The class is introduced to Game Lab, the programming environment for this unit, and begins to useit to position shapes on the screen. The lesson covers the basics of sequencing and debugging, aswell as a few simple commands. At the end of the lesson, the class creates an online version of theimage they designed in the previous lesson.

Lesson 4: Shapes and RandomizationGame Lab

This lesson extends the drawing skills to include width and height and introduces the concept ofrandom number generation. The class learns to draw with versions of ellipse() and rect() thatinclude width and height parameters and to use the background() block to fill the screen with color.At the end of the progression the class is introduced to the randomNumber() block and uses thenew blocks to draw a randomized rainbow snake.

Week 2

Lesson 5: VariablesGame Lab

This lesson introduces variables as a way to label a number in a program or save a randomlygenerated value. The class begins the lesson with a very basic description of the purpose of avariable and practices using the new blocks. Afterwards, the class uses variables to save a randomnumber, allowing the programs to use the same random number multiple times.

Lesson 6: SpritesGame Lab

In order to create more interesting and detailed images, the class is introduced to the sprite object.Every sprite can be assigned an image to show, and sprites also keep track of multiple valuesabout themselves, which will prove useful down the road when making animations. At the end ofthe lesson, everyone creates a scene using sprites.

Lesson 7: The Draw LoopGame Lab

This lesson introduces the draw loop, one of the core programming paradigms in Game Lab. Theclass combines the draw loop with random numbers to manipulate some simple animations withdots and then with sprites. Afterwards, everyone uses what they learned to update the sprite scenefrom the previous lesson.

Lesson 8: Counter Pattern UnpluggedUnplugged

This unplugged lesson explores the underlying behavior of variables. Using notecards and string tosimulate variables within a program, the class implements a few short programs. Once comfortablewith this syntax, the class uses the same process with sprite properties, tracking a sprite'sprogress across the screen.

Week 3

Lesson 9: Sprite MovementGame Lab

By combining the Draw Loop and the Counter Pattern, the class writes programs that move spritesacross the screen, as well as animate other sprite properties.

Lesson 10: Booleans UnpluggedUnplugged

This lesson introduces boolean values and logic, as well as conditional statements. The classstarts by playing a simple game of Stand Up, Sit Down in which the boolean (true/false) statementsdescribe personal properties (hair or eye color, clothing type, age, etc). The class then groupsobjects based on increasingly complex boolean statements, then looks at how conditionals canimpact the flow of a program.

Lesson 11: Booleans and ConditionalsGame Lab

The class starts by using booleans to compare the current value of a sprite property with a targetvalue, using that comparison to determine when a sprite has reached a point on the screen, grownto a given size, or otherwise reached a value using the counter pattern. After using booleansdirectly to investigate the values or sprite properties, the class adds conditional if statements towrite code that responds to those boolean comparisons.

Lesson 12: Conditionals and User InputGame Lab

Following the introduction to booleans and if statements in the previous lesson, students areintroduced to a new block called keyDown() which returns a boolean and can be used inconditionals statements to move sprites around the screen. By the end of this lesson students willhave written programs that take keyboard input from the user to control sprites on the screen.

Week 4

Lesson 13: Other Forms of InputGame Lab

The class continues to explore ways to use conditional statements to take user input. In addition tothe simple keyDown() command learned yesterday, the class learns about several other keyboardinput commands as well as ways to take mouse input.

Lesson 14: Project - Interactive CardGame Lab | Project

In this cumulative project for Chapter 1, the class plans for and develops an interactive greetingcard using all of the programming techniques they've learned to this point.

Chapter CommentaryStudents build up toward programming interactive animations in the Game Lab environment. They begin with simpleshapes and sprite objects, then use loops to create flipbook style animations. Next, they learn to use booleans andconditionals to respond to user input. At the end of the chapter, students design and create an interactive animation thatthey can share with the world.

Big Questions

How do software developers manage complexity andscale?How can programs be organized so that commonproblems only need to be solved once?How can I build on previous solutions to create evenmore complex behavior?

Chapter 2: Building Games

Week 5

Lesson 15: VelocityGame Lab

After a brief review of how the counter pattern is used to move sprites, the class is introduced tothe properties that set velocity and rotation speed directly. As they use these new properties indifferent ways, they build up the skills they need to create a basic side scroller game.

Lesson 16: Collision DetectionGame Lab

The class learns about collision detection on the computer. Pairs explore how a computer coulduse sprite location and size properties and math to detect whether two sprites are touching. Theclass then uses the isTouching() block to create different effects when sprites collide, includingplaying sounds. Last, they use their new skills to improve the sidescroller game that they started inthe last lesson.

Lesson 17: Complex Sprite MovementGame Lab

The class learns to combine the velocity properties of sprites with the counter pattern to createmore complex sprite movement, such as simulating gravity, making a sprite jump, and allowing asprite to float left or right. In the final levels the class combine these movements to animate andcontrol a single sprite and build a simple game in which a character flies around and collects coins.

Lesson 18: CollisionsGame Lab

The class programs their sprites to interact in new ways. After a brief review of how they used theisTouching block, the class brainstorms other ways that two sprites could interact. They then useisTouching to make one sprite push another across the screen before practicing with the fourcollision blocks (collide, displace, bounce, and bounceOff).

Week 6

Lesson 19: FunctionsGame Lab

This lesson covers functions as a way to organize their code, make it more readable, and removerepeated blocks of code. The class learns that higher level or more abstract steps make it easier tounderstand and reason about steps, then begins to create functions in Game Lab. At the end of thelesson the class uses these skills to organize and add functionality to the final version of their sidescroller game.

Lesson 20: The Game Design ProcessGame Lab

This lesson introduces the process the class will use to design games for the remainder of the unit.The class walks through through this process in a series of levels. As part of this lesson the classalso briefly learn to use multi-frame animations in Game Lab. At the end of the lesson they have anopportunity to make improvements to the game to make it their own.

Lesson 21: Using the Game Design ProcessGame Lab

In this multi-day lesson, the class uses the problem solving process from Unit 1 to create a platformjumper game. After looking at a sample game, the class defines what their games will look like anduses a structured process to build them. Finally, the class reflects on how the games could beimproved, and implements those changes.

Week 7

Lesson 22: Project - Design a GameGame Lab | Project

The class plans and builds original games using the project guide from the previous two lessons.Working individually or in pairs, the class plans, develops, and gives feedback on the games. Afterincorporating the peer feedback, the class shares out the completed games.

Chapter CommentaryIn this chapter students combine the constructs that they learned in the first chapter to program more complex movementand collisions in their sprites. As they create more complex programs, they begin to use functions to organize their code. Inthe end, students use a design process to create an original game.

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

http://creativecommons.org/

UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 1: Programming for EntertainmentUnplugged

OverviewStudents are asked to consider the "problems" of boredom and selfexpression, and to reflect on how they approach those problems intheir own lives. From there, students will explore how ComputerScience in general, and programming specifically, plays a role ineither a specific form of entertainment or as a vehicle for selfexpression.

PurposeThis lesson is intended to kick off this programming unit in a way thatengages students of all backgrounds and interests. Though the endpoint of this unit asks students to develop a game, you should avoidstarting out with a strong emphasis on video games. Instead, weattempt to broaden students' perspective about how programming isrelevant to a form of entertainment or self expression that ispersonally engaging. This will provide an anchor for students to comeback to throughout the unit as they consider the potential applicationsof the various programming skills that they learn.

AgendaWarm Up (10 min)

The Entertainment Problem

Activity (45 min)

CS in Entertainment

Wrap Up (5 min)

Looking Forward

ObjectivesStudents will be able to:

Identify how Computer Science is used in afield of entertainment

PreparationReview the research resources linked in

Code StudioPrint a copy of CS in Entertainment -

Activity Guide for each group of threestudents

LinksHeads Up! Please make a copy ofany documents you plan to sharewith students.

For the Teacher

CS in Entertainment - Exemplar

For the Students

CS in Entertainment - Activity Guide

Make a Copy

https://docs.google.com/document/d/1RtwJU7Lh2dKdGoj-zfF1pjn-yxhkwP-05G8pgdYi-BY/edit

https://studio.code.org/s/csd3-2018/stage/1/puzzle/1


Teaching Tip

Because many of these sites change their content daily,we have not shared them directly with students. Wesuggest that you check these links the morning beforeclass to ensure that everything is still appropriate to beshared in school

DiscussionGoal

The goal here is to get students to reflect more critically onwhy people seek out entertainment. Students are likely tocome up with "boredom" as a common answer, but pushthem to think more deeply about what their chosen form ofentertainment actually does for them - what problem doesit solve. Potential answers include:

Escape from difficult realityConnection with othersLearning or experiencing new thingsSparking creativity

Teaching GuideWarm Up (10 min)

The Entertainment Problem Remarks

Why do we seek out entertainment? Whether it's movies, music, art, games, or any number of other forms ofentertainment, what problem does entertainment solve for us?

Discuss: What is your favorite form of entertainment, andwhat problem does it solve for you?

Activity (45 min)

CS in EntertainmentPrompt: Select a few of the forms of entertainment thatstudents identified in the warm up and ask them whether(and how) Computer Science plays a role in that field.

Group: Place students in groups of three. Considerallowing students to group based on common interest aseach group will be exploring a field of entertainmenttogether.

Distribute: Give each group a copy of CS in Entertainment - Activity Guide

CS in EntertainmentCS in Entertainment

During this activity student groups will do some light research into the role that CS and programming play in various fieldsof entertainment. The primary goal of this activity is to broaden students' perspective about how programming can beused to make fun or entertaining things. Some of the fields that students could research (such as art, animation, andgames) can be directly connected to programs they will write later in this unit, while others may serve more as aninspiration for how the skills that they learn here may be applied in different domains.

Entertainment Exploration

Introduce the topics: In the activity guide we've listed a number of potential fields for research. These specific fieldswere chosen to go along with resources that are provided on Code Studio, but you can allow students to look intoother fields if they wish.Explain the exploration task : The goal of this exploration is twofold:

First, develop a deeper understanding of how programming is used in your chosen field. How is computertechnology changing this field, what are some of the problems that people are trying to solve with technology?Second, identify some interesting applications of CS or facts to share. What are some cool things that people aredoing in this field that make use of CS?

Share selected research links : On Code Studio,inside the blue teacher box, we have compiled ahandful of useful sites to help students kick off theirresearch. Share the links that you feel are mosthelpful and appropriate for your class.

Code Studio levels


View on CodeStudio

View on Code Studio to access answer key(s)

Lesson Overview Teacher Overview Student Overview

View on CodeStudio

Here are a few sites to get students started. These sites are generally appropriate forschool, but the content with them changes frequently, so we strongly suggest that youcheck each site for inappropriate content before sharing it with students.

Inside the Magic - insidethemagic.net

OverviewThis site is focused on news about Disney, but you might be surprised by the large role that CS plays in all oftheir different forms of entertainment. Because this isn't a CS focused site, you'll need to use the search functionto find relevant articles.

Relevant fieldsFilm/TVAnimationRobotics/AnimatronicsGames

Critical Path Videos -criticalpathproject.com/explore/playlists/

OverviewVideos featuring a range of people working in diverse areas of the game industry, talking about what they do.

Relevant FieldsGamesAnimationArt

Music Think Tank - musicthinktank.com

OverviewMusic Think Tank is a blog targeted at people working in the music industry. It's not a CS specific site, butsearching for "computer science" or "programming" will reveal some interesting articles.

Relevant FieldsMusic

Creative Coding Podcast -

Exploring CS in Entertainment Teacher Overview Student Overview



http://www.insidethemagic.net

http://www.criticalpathproject.com/explore/playlists/

http://www.musicthinktank.com/

Teaching Tip

While some of these examples are pulled directly fromlessons that students will complete later in the unit, a fewof them use commands or techniques that aren't explicitlycovered in the course. You can view the source for all ofthese programs in order to support students who may wantto incorporate some of these techniques later on.

Interesting Information

Once groups have learned a bit about how CS is used in their chosen field, they can complete the second page of thisactivity guide, which asks them to do the following:

What Problem Does It Solve?: "Problem" in this context can be fairly broad. It might be simplifying an otherwiselaborious or complex task, doing things that wouldn't otherwise be possible, or any number of things that make thisform of entertainment more accessible to end users.How is it an Improvement?: This could be tightly coupled with the answer to the previous question. Push studentsto consider how their form of entertainment was created before programming was prevalent.An Interesting Fact or Use: Share something fun or interesting about how CS is used in this field.An Open Question: It's likely that students come away with more questions than answers after just some quickresearch. Encourage them to reflect on what they don't yet know, and what questions they'd still like answered.

Share: Give groups a minute each to share their findings.

Wrap Up (5 min)

Looking ForwardDisplay: Show either as a whole class, or let studentsexplore independently, the example programs at the endof this lesson's Code Studio progression. Theseprograms are designed to show a variety of differentkinds of programs that it's possible to make in Game Lab.

Journal: Based on what you saw today, both in yourresearch and the example apps, what kinds of programsare you most interested in learning to create?

Standards AlignmentCSTA K-12 Computer Science Standards

IC - Impacts of Computing


Creative Coding Podcast -creativecodingpodcast.com

OverviewWhile this podcast doesn't feature much in the way of formal professional programming (as in, people who do thisfor a living), it is a great resource to see the varied ways in which amateurs are making entertainment with code.

Relevant FieldsAll

Sample Programs 3 4 5 6 (click tabs to see student view)

http://creativecodingpodcast.com/


UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 2: Plotting ShapesUnplugged

OverviewStudents explore the challenges of communicating how to draw withshapes and use a tool that introduces how this problem isapproached in Game Lab. The warm up activity quickly demonstratesthe challenges of communicating position without some sharedreference point. In the main activity students explore a Game Lab toolthat allows students to interactively place shapes on Game Lab's 400by 400 grid. They then take turns instructing a partner how to draw ahidden image using this tool, accounting for many challengesstudents will encounter when programming in Game Lab. Studentsoptionally create their own image to communicate before a debriefdiscussion.

PurposeThe primary purpose of this lesson is to introduce students to thecoordinate system they will use in Game Lab. Students may havelimited experience with using a coordinate grid or may struggle withthe "flipped" y-axis in Game Lab. The drawing tool also forcesstudents to think about other features of Game Lab students will seewhen they begin programming in the next lesson. These include theneed to consider order while drawing, the need to specify color, andthe fact that circles are positioned by their center and squares by theirtop-left corner. By the end of this activity, students should be ready totransfer what they have learned about communicating position to theprogramming they will do in the next lesson.


Communicating Drawing Information

Activity (35 min)

Drawing with a Computer

Wrap Up (5 min)

Journaling


Reason about locations on the Game Labcoordinate gridCommunicate how to draw an image in GameLab, accounting for shape position, color, andorder


For the Teacher

Drawing Shapes - ExemplarSample Shape Drawing

For the Students

Drawing Shapes - Activity Guide

Make a Copy


https://cdo-curriculum.s3.amazonaws.com/media/uploads/Screenshot-2017-05-24-at-1.13.21-PM.png

https://docs.google.com/document/d/1BKFLM2cmov3Lh23vsw1hGfUwTz9bM-diFCGHBf_GH6Y/edit?usp=sharing

DiscussionGoal

Goal This discussion is intended to bring up somechallenges that students will need to address in the nextfew lessons, such as how to specify position, order, andcolor. The students don't necessarily need to decide howthey would specify such things, but recognize that they willneed a method for doing so. Students who have just comeout of the HTML unit may make connections to how HTMLhelped solve similar problems.


Communicating Drawing Information Remarks

We saw a lot of different programs yesterday, and you started to think about what types you might want to create. Whenwe create a program, one of the things we need to do is draw everything on the screen. We're going to try that with a"student" computer today.

Ask one or two volunteers to come to the front of the room and act as "computers" for theactivity. They should sit with their backs to the board so that they cannot see what is beingprojected. Give each volunteer a blank sheet of paper.

Display: Project Sample Shape Drawing where it can be seen by the class.

Remarks

You will need to explain to our "computer" how to draw the picture. In the end, we'll comparethe drawing to the actual picture.

Give the students a minute or two to describe the drawing as the students at the front of the room try to draw it. After oneminute, stop them and allow the students to compare both pictures.

Prompt: What are the different "challenges" or problems we're going to need to solve in order to successfully communicatethese kinds of drawings.

Discuss: Students should silently write their answers intheir journals. Afterwards they should discuss with apartner and finally with the entire class.

Remarks

There were several challenges we needed to solve inthis activity. We need to be able to clearly communicateposition, color, and order of the shapes. We're going tostart exploring how to solve this problem.

Activity (35 min)

Drawing with a ComputerGroup: Place students in pairs.

Transition: Have one member of each group open a laptop and go to the contents for this lesson. There is a single levelwith a Game Lab tool.

Code Studio levels

View on CodeStudio

View on Code Studio to access answer key(s)


Drawing Shapes Student Overview




DiscussionGoal

Goal: Rather than doing a live-demo of the tool, use thisstrategy to let students explore the tool themselves.Afterwards use the debrief to ensure all students areaware of key features of the tool. The most importantcomponents are the grid and the fact that the mousecoordinates are displayed below the drawing space.

Content Corner

Location of the Origin The origin of this grid, as well asthe origin in Game Lab, lies at the top left corner. Thisreflects the fact that documents tend to start at the top left,and ensures that every point on the plane has positivecoordinates.

Teaching Tip

When to Move On: Determine whether this last activityis worth the time in your schedule. Giving students achance to create and communicate their own drawing canhelp reinforce their knowledge, but if students areobviously achieving the learning objectives of the lessonwithout it then you can also just move to the wrap up tosynthesize their learning.

Prompt: Working with your partner take two or three minutes to figure out how this tool works. Afterwards be ready toshare as a class.

Discuss: After pairs have had a chance to work with thetool run a quick share-out where students discussfeatures they notice.

Drawing ShapesDrawing Shapes

Distribute the Drawing Shapes - Activity Guide toeach pair, ensuring that one student (Student A)receives the first two pages and the other student(Student B) receives the second two pages. Studentsshould not look at each other's papers.

Set Up: In this activity, students will try to recreateimages based on a partner's directions. The studentwho is drawing will use the shape drawing tool onGame Lab to draw the shapes. Students should keeptheir drawings hidden from one another throughout theactivity. While completing a drawing the instruction givershould also not be able to see the computer screen.

Drawing 1: Each member of the pair should complete their first drawing, taking turns giving instructions and using thetool. These drawings do not feature any overlapping shapes, but students may need to grapple with the fact that circlesare drawn from the middle and squares from the top left corner. Additionally students may just struggle with the directionof the Y-axis.

Discuss: Give pairs a couple minutes to discuss any common issues they're noticing in trying to complete their drawings.

Drawing 2: Each member of the pair should describe their second drawing to their partner. These drawing featureoverlapping shapes and so students will need to consider the order in which shapes are being placed as well as whenthey should change the color of the pen.

Draw Your Own: If time allows, give students achance to create their own drawing to communicate totheir partner.

Remarks

When we make images, we need a way to communicateexactly where each shape goes. The coordinate planehelps us to do that. Our coordinate plane has twocoordinates, x and y. The x-coordinate tells us how farour shape is from the left of the grid. The y-coordinatetells us how far our shape is from the top of the grid. Theblack dots on the shapes help you be very specific about how the shape is placed on the grid.

Wrap Up (5 min)

JournalingJournal: Have students reflect on each of the following prompts

What problem is the grid helping to solve in Game Lab?Have you seen different ways of solving this problem in the past? What are they?

Discuss: Have pairs share their answers with one another. Then open up the discussion to the whole class.

Remarks

https://docs.google.com/document/d/1BKFLM2cmov3Lh23vsw1hGfUwTz9bM-diFCGHBf_GH6Y/edit?usp=sharing

DiscussionGoal

Goal This discussion should act as a recap of whatstudents learned about the grid system in Game Lab. Thiswrap up should also make references back to the problemsolving process. Students saw at the beginning of thelesson that there is a problem of communicating how todraw shapes. What they have seen in Game Lab today isthe solution to that problem. This discussion should beused to reinforce that the grid system students saw todayis different from the one they may have seen in a mathclass. They should see, however, that both solve the sameproblem. Finally this discussion leads into a teacherexplanation of why the grid in Game Lab is "flipped".

At the beginning of class we saw that communicatinghow to draw even simple shapes can be prettychallenging. The grid we learned about today is onesolution to this problem but there are many others thatcould've worked. In fact a lot of you probably noticedthat the grid in Game Lab is "flipped". Computerscreens come in all different shapes and sizes, as doesthe content we show on them. We need to agree onone point where all the content can grow from. Sincewe read starting at the top left corner, the grid on acomputer screen starts at the top left corner as well.There's also the benefit of not having to use anynegative numbers to talk about locations on the screen.Don't worry if this flipped grid is a little tricky still. We'llhave plenty more time to work on it in coming lessons.


AP - Algorithms & Programming



UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 3: Drawing in Game LabGame Lab

OverviewStudents are introduced to Game Lab, the programming environmentfor this unit, and begin to use it to position shapes on the screen.They learn the basics of sequencing and debugging, as well as a fewsimple commands. At the end of the lesson, students will be able toprogram images like the ones they made with the drawing tool in theprevious lesson.

PurposeThe main purpose of this lesson is to give students a chance to getused to the programming environment, as well as the basicsequencing and debugging that they will use throughout the unit.Students begin with an introduction to the GameLab interactivedevelopment environment (IDE), then learn the three commands( rect , ellipse , and fill ) that they will need to code the same types of

images that they created on paper in the previous lesson. Challengelevels provide a chance for students who have more programmingexperience to further explore Game Lab.

AgendaWarm Up (5 minutes)

Programming Images

Activity (30 minutes)

Simple Drawing in Game Lab

Wrap Up (10 minutes)

Share DrawingsExit Ticket


Use the Game Lab IDE to plot differentcolored shapes on the screen.Sequence code correctly to overlay shapes.Debug code written by others.

PreparationRead the ForumPrepare projector or other means of

showing videos if you wish to watch as aclass

VocabularyBug - Part of a program that does not workcorrectly.Debugging - Finding and fixing problems inan algorithm or program.Program - An algorithm that has been codedinto something that can be run by a machine.

Introduced Codefill(color)

ellipse(x, y, w, h)

rect(x, y, w, h)

DiscussionGoal

Goal From Unit 2, students may remember that acomputer can only understand what to do if you use aparticular language in order to communicate with it. ForWeb Development, that language was HTML. Computerscan't "figure out" what you mean in the same way that ahuman can, and they are usually much more specific inhow they follow instructions.

Teaching Tip

If you have had students pair program before, you canread more about it here.

Teaching Tip

Students that are new to programming often have somecommon misconceptions they run into. In order to preventthose keep reminding students about the following things

One command per lineCommands run in order from top to bottomOrder of inputs into shape commands matterEach input into shape commands are separated bycommas(0,0) is in the upper left corner of the displayAll x and y values on the display are positive

Teaching GuideWarm Up (5 minutes)

Programming Images Remarks

In the last lesson we created images on the computerby organizing squares and circles on a grid. For eachimage you wanted to create, you had to lay thoseimages out manually, and if you wanted to recreate animage it was a lot of work. Today, we're going toprogram the computer to draw those images for us.Based on what you know about computers, what doyou think will be different between telling a personabout your image and telling a computer about yourimage?

Allow students time to think individually and discuss with a partner, then bring the class together and write their ideas onthe board.

Remarks

In order to give instructions to a computer, we need to use a language that a computer understands. In the last unit, weused HTML, which is great for making web pages. To make our animations and games, we will use a version ofJavascript that uses blocks. The environment that we'll be programming in is called Game Lab.


Simple Drawing in Game LabGroup: Place students in pairs to program together.

Transition: Send students to Code Studio.

Support: As students work on the levels you can helpthem but encourage them to try to spend some timefiguring things out themselves first. If you need helpsupporting students, see the exemplars in the teacheranswer viewer. When students hit the challenge levels,they can choose to pursue one or more of the challenges,return to improve upon previous levels, or help aclassmate.

Code Studio levels

Lesson Overview Student Overview

Introduction to Game Lab Teacher Overview Student Overview

http://teacherblog.code.org/post/147349807334/try-pair-programmingtrack-the-progress-of


Share DrawingsGoal: Students get to see the variety of different things you can create with just simple shape drawings.

Share: Once students have completed their drawings have them share their drawings with the class. One way to do this iswith a gallery walk.

Exit TicketGoal : Students share tricks they learned as they went through levels.

Prompt: Today you learned how to draw in Game Lab for the first time. What type of advice would you share with a friendwho was going to learn about drawing in Game Lab to make it easier for them? Write it down on a piece of paper.

View on CodeStudioTour of Game Lab

Depending on the age and comfort level of your students, you may choose to use this level to tour the environmentas a whole class. Make sure that students can find the level instructions, coding area, display area, and blockdrawers. This is also a good opportunity to point out some of the useful resources like documentation and theblocks to text button.

Video: Drawing in Game Lab - Part 1 Student Overview

Using the Grid Student Overview

Video: Drawing in Game Lab - Part 2 Student Overview

Drawing 6 7 8 9 (click tabs to see student view)

View on CodeStudioSimplified Shapes

The rect and ellipse commands that students were introduced to in this lessons are simplified versions of the full

commands that they will see later. This allows the class to focus solely on the placement of shapes on thecoordinate plane before also worrying about the width and height of those shapes.

Plotting Shapes in Game Lab Teacher Overview Student Overview

Challenges 11 12 13 (click tabs to see student view)

Levels 14 (click tabs to see student view)



Collect: Collect answers from students and pick out a few that might be helpful for all students to hear. Share those at thebeginning of the next class.





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 4: Shapes and RandomizationGame Lab

OverviewIn this lesson students continue to develop their familiarity with GameLab by manipulating the width and height of the shapes they use todraw. The lesson kicks off with a discussion that connects expandedblock functionality (e.g. different sized shapes) with the need for moreblock inputs, or "parameters". Students learn to draw with versions ofellipse() and rect() that include width and height parameters. They

also learn to use the background() block. At the end of the

progression students are introduced to the randomNumber() block.

Combining all of these skills students will draw a randomized rainbowsnake at the end of the lesson.

PurposeThis lesson gives students a chance to slightly expand their drawingskills while continuing to develop general purpose programming skills.They will need to reason about the x-y coordinate plane, consider theorder of their code, and slightly increase their programs' complexity.The randomNumber() block is important for the next lesson where

students learn to store values using variables. This lesson should befocused primarily on skill-building. If students are able to complete therainbow snake independently, then they have the skills they'll need forthe coming lessons.


Shapes of Different Sizes

Activity (40 min)

Programming Images

Wrap Up (5 min)

Journal


Use and reason about drawing commandswith multiple parametersGenerate and use random numbers in aprogram

PreparationReview the level sequence in Code Studio

VocabularyParameter - An extra piece of informationpassed to a function to customize it for aspecific need

Introduced Codebackground(color)

ellipse(x, y, w, h)

rect(x, y, w, h)

randomNumber()

DiscussionGoal

Goal: This discussion introduces the vocabulary word"parameter" and also helps motivate their use. Studentswill be seeing versions of the ellipse() and rect() block inthis lesson that have additional parameters, as well as therandomNumber() block which has two parameters.Students may say they want inputs for the size of theshapes, their color, etc. During this conversation tie thebehaviors the students want to the inputs the block wouldneed. For example, if you want circles to be a differentsize the block will need an input that lets the programmerdecide how large to make it.


1. ellipse()

2. randomNumber(5, 10)

3. rect

Shapes of Different SizesPrompt: Our ellipse and rect blocks each have two

inputs that control where they're drawn - the x and yposition. If you wanted these commands to draw a widervariety of rectangles and ellipses, what additional inputsmight you need to give these blocks? What would eachadditional input control?

Discuss: Students should brainstorm ideas silently, thenshare with a neighbor, then discuss share out with thewhole class. Record ideas as students share them on theboard.

Remarks

This was a good list of ideas. If we want our blocks todraw shapes in different ways they'll need more inputs that let us tell them how to draw. The inputs or openings in ourblocks have a formal name, parameters, and today we're going to be learning more about how to use them.

Activity (40 min)

Programming ImagesTransition: Move students onto Code Studio

Code Studio levels


New Shapes 2 (click tabs to see student view)

Shapes and Parameters Student Overview

More Parameters 4 5 6 7 8 9

(click tabs to see student view)

Random Numbers Student Overview

Share: If some students have taken extra time to work on their projects, give them a chance to share their more complexrainbow snakes. Focus conversation on which parameters students are manipulating or randomizing to create theirdrawings.

Wrap Up (5 min)

JournalPrompt: Have students reflect on their development of the five practices of CS Discoveries (Problem Solving,Persistence, Creativity, Collaboration, Communication). Choose one of the following prompts as you deem appropriate.

Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you didthat exemplified this practice.

Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?

Choose one practice you thought was especially important for the activity we completed today. What made it soimportant?




Using Random Numbers 11 12 (click tabs to see student view)


https://docs.google.com/document/d/1FhHPqlC6dU_z9retuBYb-duUwyKpnjwuEgjF4zfdhvI/edit#heading=h.5u3d4jfozbgc


UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 5: VariablesGame Lab

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

PurposeThis lesson is the first time students will see variables in the course,and they are not expected to fully understand how variables work byits conclusion. Students should therefore leave this lesson knowingthat variables are a way to label a value in their programs so that theycan be reused or referenced later. In the following lesson students willbe introduced to sprites, which need to be referenced by a variable.

Using variables to manipulate drawings is a surprisingly challengingskill that requires a great deal of forethought and planning. Whilestudents will use or modify many programs in this lesson, they are notexpected to compose programs that use variables to modify thefeatures of a drawing. In later lessons, students will expand theirunderstanding of variables and more advanced ways they can beused.

AgendaWarm Up (10 Mins)

Labels and Values

Activity (30 Mins)

Programming with Variables

Wrap Up (5 Mins)

Reflection


Identify a variable as a way to label andreference a value in a programUse variables in a program to store a piece ofinformation that is used multiple timesReason about and fix common errorsencountered when programming withvariables

PreparationReview the level progression in Code

Studio


For the Students

Introduction to Variables - Video(download)

VocabularyVariable - A placeholder for a piece ofinformation that can change.

Introduced CodeDeclare and assign a value to a variable

Declare a variable

https://youtu.be/G41G_PEWFjE

https://videos.code.org/2015/csp/applab/variables_1.mp4

Teaching Tip

Avoiding Frontloading: While this lesson begins withtwo resources that explain how variables work, they'll likelybe more meaningful to students once they have usedvariables in the drawing programs. Make sure studentsknow these resources are available, and then return tothem if you like at the end of the lesson to help in sense-making.

Teaching GuideWarm Up (10 Mins)

Labels and ValuesVideo: As a class watch the video introducing variables.

Review: Students can review the most important pointsfrom the video on the map level in Level 4. Students don'tneed to understand all of these ideas right now, but theycan use this level as a reference throughout the lesson.

Remarks

There's a lot to learn about variables and we'll beseeing them throughout this unit. Today we're going tosee them used to help us draw pictures. The mostimportant 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

Code Studio levels

Wrap Up (5 Mins)


Introduction to Variables - Part 1_2018 Student Overview

Intro to Variables 3 (click tabs to see student view)

Variables Student Overview

Intro to Variables 5 6 7 (click tabs to see student view)

Naming Variables Student Overview

Intro to Variables 9 10 (click tabs to see student view)

Levels 11 12 13 (click tabs to see student view)

DiscussionGoal

Goal: Use this discussion to assess students' mentalmodels of a variable. You may wish to have students writetheir responses so you can collect them to review later.You should be looking to see primarily that theyunderstand that variables can label or name a number sothat it can be used later in their programs. While there areother properties of a variable students may have learned,this is the most important before moving on to the nextlesson.

Teaching Tip

Input-Output-Store-Process: The model studentslearned in Unit 1 might be nice to reference here. Studentsare storing information in a variable which means they aresaving that information in memory.

CSS Classes: If students studied CSS classes in Unit 2then they may be familiar with the act of creating a namefor something in their programs in order to be able toreference it. While the context here is different, the idea ofnaming remains the same.

ReflectionPrompt: Give students the following prompts

What is your own definition of a variable?Why are variables useful in programs?

Discuss: Have students silently write their ideas beforesharing in pairs and then as a whole group.

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





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 6: SpritesGame Lab

OverviewIn order to create more interesting and detailed images, students areintroduced to the sprite object. Every sprite can be assigned an imageto show, and sprites also keep track of multiple values aboutthemselves, which will prove useful down the road when makinganimations.

PurposeKeeping track of many shapes and the different variables that controlaspects of those shapes can get very complex. There will be lots ofvariables with different variable names. Instead computer scientistscreated something called an object which allows for one variablename to control both the shape and all its aspects. In Game Lab weuse a certain type of object called a sprite. A sprite is just a rectanglewith properties for controlling its look. Properties are the variablesthat are attached to a sprite. You can access them through dotnotation.

Using the Animation Tab, students can create or import images to beused with their sprites. Later on, these sprites will become a usefultool for creating animations, as their properties can be changed andupdated throughout the course of a program.


How Much Information?

Activity

Introduction to Sprites

Wrap Up (5-10 min)

Share Out

Assessment

Assessing Sprite Scenes


Assign a sprite to a variableUse dot notation to update a sprite'spropertiesCreate a static scene combining sprites,shapes, and text

Preparation(Optional) Print a copy of Sprite Scene

Planning - Activity Guide for each student


For the Teacher

Sprite Scene Planning - Exemplar

For the Students

Sprite Scene Planning - Activity Guide

VocabularyProperty - Attributes that describe anobject's characteristicsSprite - A graphic character on the screenwith properties that describe its location,movement, and look.

Introduced CodedrawSprites(group)

var sprite = createSprite(x, y, width, height)

sprite.scale

Make a Copy

https://docs.google.com/document/d/1I5w4VKBu4qPmoSSve_AwyaVQ47FWkJ-fSq4zfmQCsG8/edit



DiscussionGoal

The goal here is to get students thinking about all of thedifferent values that go into drawing a single shape on thescreen, and how many more values they may need tocontrol a more detailed character in a program. If studentsare struggling to come up with ideas, you might use someof the following prompts: How do you tell a shapewhere to go on the screen? How do you tell a shapewhat size it needs to be? How do you tell a shapewhat color it should be? What about its outline?What if you wanted to change any of those values duringyour program, or control other things like rotation?

Content Corner

The sprite is a type of data called an object. While wearen't yet explicitly introducing the concept of objects,students do need to understand that a sprite is a differenttype of value from the ones we've seen before, one thatcan hold references to many more values. For studentswho are curious about whether there are other objects inour programs, ask them to see if there are more blocks inthe toolbox that follow the same dot notation (such asWorld.width and World.height)


How Much Information?Think, Pair, Share: So far we've only written programsthat put simple shapes on the screen. Come up with a listof all of the different pieces of information that you haveused to control how these shapes are drawn.

Prompt: What if we wanted to create programs withmore detailed images, maybe even characters that youcould interact with? What other pieces of informationmight you need in your code?

Remarks

Today we'll learn how to create characters in ouranimations called sprites. These sprites will be storedin variables, just like you've stored numbers in the past,but sprites can hold lots of pieces of data, which willallow you to create much more interesting (andeventually animated!) programs.

Activity

Introduction to SpritesDistribute: (Optional) pass out copies of Sprite ScenePlanning - Activity Guide. Students can use thissheet to plan out the Sprite Scene they create at the end of this lesson, but the planning can also be completed on scratchpaper.

Transition: Send students to Code Studio

Code Studio levels

View on CodeStudio

Sprite Scene Planning - Activity Guide Exemplar (PDF | DOCX)


Video: Introduction to Sprites Student Overview

Creating Sprites Student Overview

Intro to Sprites 4 5 6 (click tabs to see student view)

Video: The Animation Tab Student Overview



https://docs.google.com/document/d/1LCO-0sTzYBEAglx65F2fFVI5OtF6IbTeycIGqa1H4_Q/edit

https://docs.google.com/document/d/1LCO-0sTzYBEAglx65F2fFVI5OtF6IbTeycIGqa1H4_Q/export?format=pdf

https://docs.google.com/document/d/1LCO-0sTzYBEAglx65F2fFVI5OtF6IbTeycIGqa1H4_Q/export?format=doc

Wrap Up (5-10 min)

Share OutShare: Allow students to share their Sprite Scenes. Encourage students to reflect on their scenes and identify ways inwhich they'd like to improve.

Assessment

Assessing Sprite ScenesTo assess Sprite Scenes, ask students to do a "talk through" of their code with you. Check to ensure that students knowwhy they sequenced their code the way they did, and in particular look for "dead code", or code that doesn't impact thefinal scene. At this point it's likely that students are still drawing shapes before they draw the background (which then won'tbe seen) or that they are calling drawSprites() multiple times (it only needs to be called once).




The Animation Tab Student Overview

Adding Images 9 10 11 12 (click tabs to see student view)

Making Scenes 13 14 (click tabs to see student view)

Sprite Scenes Student Overview

Making Scenes 16 17 18 (click tabs to see student view)

Levels 19 20 (click tabs to see student view)


UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 7: The Draw LoopGame Lab

OverviewIn this lesson students are introduced to the draw loop, one of thecore programming paradigms in Game Lab. To begin the lessonstudents look at some physical flipbooks to see that having manyframes with different images creates the impression of motion.Students then watch a video explaining how the draw loop in GameLab helps to create this same impression in their programs. Studentscombine the draw loop with random numbers to manipulate somesimple animations with dots and then with sprites. At the end of thelesson students use what they learned to update their sprite scenefrom the previous lesson.

PurposeThe draw loop is a core component of Game Lab. The fact that theGame Lab environment repeatedly calls this function many times asecond (by default 30) is what allows the tool to create animations.This lesson has two goals therefore. The first is for students to seehow animation in general depends on showing many slightly differentimages in a sequence. To help students have physical flipbooks theycan use, a video, and a map level. The second goal is for students tounderstand how the draw loop allows them to create this behavior inGame Lab. Students should leave the lesson understanding that thecommands in the draw loop are called after all other code but arethen called repeatedly at a frame rate. Students will have a chance tocontinue to develop an understanding of this behavior in the next twolessons, but laying a strong conceptual foundation in this lesson willserve them well for the rest of the unit.

AgendaWarm Up (5 mins)Activity (60 min)Wrap Up (10 mins)


Explain what an animation is and how itcreates the illusion of smooth motionExplain how the draw loop allows for thecreation of animations in Game LabUse the draw loop in combination with therandomNumber() command, shapes, andsprites to make simple animations

PreparationPrint and assemble the Random Dot

Flipbook - Manipulative and RandomSprite Flipbook - Manipulative

Prepare Flipbook Example - Video


For the Teacher

Random Dot Flipbook - ManipulativeRandom Sprite Flipbook - ManipulativeFlipbook Example - Video

VocabularyAnimation - a series of images that createthe illusion of motion by being shown rapidlyone after the otherFrame - a single image within an animationFrame Rate - the rate at which frames in ananimation are shown, typically measured inframes per second

Introduced Codefunction draw() { }

World.frameRate

https://docs.google.com/drawings/d/1KO4s3j9Zbc6rBxLijxxKIYlN24wej906HHJZ7GQDi9U/edit?usp=sharing

https://docs.google.com/drawings/d/1mVt8SE1N5KYy2TfOlqtvkL_2MmYk6wFpiouMZ-P-kQY/edit?usp=sharing

https://www.youtube.com/watch?v=jQoNiU2ChoM




DiscussionGoal

Goal: This discussion should introduce some keyunderstandings about animation. Students shouldunderstand that the key is seeing many pictures in a rowthat are slightly different. Introduce the vocabulary word"frame" as one of those pictures. Then transition to the factthat soon students will be creating animations of their own.

Teaching Tip

Pair Programming: This lesson introduces a challengingnew paradigm. Until students are working to improve theirprojects consider having them pair program. Remember togive students clear instructions on when to switch driverand navigator.

Teaching GuideWarm Up (5 mins)

Video: Show Flipbook Example - Video

Prompt: This video shows a flipbook to make animation. In your own words how is it working? Why does it "trick our eyes"into thinking something is moving?

Discuss: Have students write their ideas independently,then share with partners, then as a whole group.

Vocabulary:

Frame: a single image within an animation

Remarks

We're going to start learning how to make animations,not just still images. In order to do this we need a wayto make our programs draw many pictures a second.Our eyes will blur them together to make it look like smooth motion. To do this, though, we're going to need to learn animportant new tool

Activity (60 min)

Video: Watch the video introducing the draw loop

Map Level: Briefly point students to the map levelfollowing the video. Ask students to use it as a referenceas they complete the challenges in today's activity.

Demo: If you choose, use the provided Random DotFlipbook - Manipulative and Random SpriteFlipbook - Manipulative to provide a hands-onmanipulative for exploring how the draw loop and animations are connected.

Code Studio levels


Video: Introduction to the Draw Loop Student Overview

Shapes and the Draw Loop 3 (click tabs to see student view)

The Draw Loop Student Overview

Shapes and the Draw Loop 5 6 (click tabs to see student view)

Sprites and the Draw Loop 7 (click tabs to see student view)




DiscussionGoal

Goal: Use these prompts to assess whether studentshave understood the main learning objectives of thelesson.

Key Understandings: There are many commonmisconceptions with the draw loop. Make sure studentsunderstand the following

The draw loop is run after all other code in yourprogram. It does not actually matter where it is locatedin your programThe draw loop is run by Game Lab at a constant framerate of 30 frames per second. You do not actually needto call the function yourself.The "frames" in Game Lab can be thought of astransparency sheets. Unless you draw a backgroundthen all your new shapes or sprites will simply appearon top of your old onesYou should only have one draw loop in your program

Wrap Up (10 mins)

Share: Students only need to make small changes to their projects (e.g. shaking a single sprite) but ask them to share witha neighbor or as a full class

Prompt: Have students respond to the following prompts

What is an animation?Why does the draw loop help us make animations?What are some common errors or mistakes we shouldlook out for as we keep programming with the drawloop?

Review: Return to the resources students saw at thebeginning of the lesson (Map Level, Video, physical flipbooks) and address misconceptions that have arisen inthe lesson.




Sprite Properties Student Overview

Sprites and the Draw Loop 9 10 11 (click tabs to see student view)

Animate Your Scene 12 (click tabs to see student view)



UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 8: Counter Pattern UnpluggedUnplugged

OverviewStudents explore the underlying behavior of variables through anunplugged activity. Using notecards and string to simulate variableswithin a program, students implement a few short programs. Oncecomfortable with this syntax, students use the same process withsprite properties, tracking a sprite's progress across the screen.

PurposeReasoning about variables can be tricky, especially for newprogrammers. In this lesson students complete an unplugged activityusing physical manipulatives (cards and string) to build a mentalmodel of how information can be stored in a variable and manipulatedby a program. This model is then extended to sprite properties, whichhold values in a similar way. This lesson introduces syntax andconcepts that students will be able to “plug-in” in the following lesson.The mental model presented in this lesson will continue to be usefulthroughout the unit, even as students begin to write larger andincreasingly complex programs.

AgendaWarm Up (15 mins)Activity (20 mins)

Variables Unplugged Activity

Activity 2 (30 mins)

Sprite Properties

Wrap Up (10 mins)

Discussion


Describe the connection between updating asprite's location properties and spritemovement on the screen.Read and follow the steps of a short programwritten in pseudocode that manipulatesvariable values.

PreparationPrepare materials for Labels and Values:

index cards, post-its, or scraps of paper (2 in.by 2 in.) etc. (~ 50 per pair)

Prepare materials for Connectors: pieces ofstring, pens, or pipe-cleaners, etc. (~ 4 perpair)

Print copies of Variables UnpluggedBoard - Manipulative for each group orgather paper for students to use to maketheir boards.

Review the rules of the VariablesUnplugged Activity to ensure you understandthem and are prepared to answer questions,especially if you will be demonstrating themyourself.

Printed a copy of Variables Unplugged -Activity Guide for each student.


For the Teacher

Variables Uplugged - Key

For the Students

Variables Unplugged - Activity Guide

Variables Unplugged Board -Manipulative

Make a Copy

Make a Copy

https://docs.google.com/document/d/1hxwkz9ed4Qd3KvKJ7MLQdgKGOtItXQ_qaYRQfZcfRn8/edit

https://docs.google.com/document/d/12-tfreuhFfNnxzBSl4dsLavDptTIruVcRiC3AzGKq1Y



https://docs.google.com/document/d/1hxwkz9ed4Qd3KvKJ7MLQdgKGOtItXQ_qaYRQfZcfRn8/edit

VocabularyExpression - Any valid unit of code thatresolves to a value.Variable - A placeholder for a piece ofinformation that can change.


Prompt: In the last lesson, we used the draw loop to make our sprites move around on the screen. What are some otherways we might want to make our sprites move?

Put student ideas up on the board.

Remarks

In the next few lessons, we're going to look at lots of ways to have our sprites move around. In order to do that, we needto learn a little bit more about variables and how they work. Today, we're going to do an activity with variables and spriteproperties that will help us to make these types of movement. As we go through the activity, think about how what you'relearning might help you to make your sprites move in the way you want.

Activity (20 mins)

Variables Unplugged ActivityGroup: Put students in pairs.

Distribute: Give each pair:

1) A set of labels/values and connectors 2) A single sheet of paper to create their board 3) 2 copies of the Variables Unplugged - Activity Guide (One for each student.)

Display: Display the rules from the front page of the activity guide and write the first two programs from the second page.

Remarks

Today we are going to be working in a world of labels, values, and the connectors between them. To simulate this worldyou'll be using the scraps of paper and string that I've given you. To begin with we'll need to set up our boards, andafterwards we'll go over how the commands for this world work.

Demonstrate: Show the class how to divide their boards into 3 sections and label them accordingly, as shown on the firstpage of the activity guide.

Support: Students should work through the first two programs as a group, as you reference the steps in the activity guide.As groups feel increasingly comfortable with completing commands themselves encourage groups to independently runeach command before comparing their boards with a neighboring pair. The goal is just to make sure everyone has anopportunity to understand the steps of the activity.

Remarks

Now it's your turn to try running some of these programs on your own. On the bottom of the page there are two moreprograms that you can run. For each one you should run the program to find out the ending state of the program. Inother words, you want to know what labels are connected to what values. Once you reach the end of each program youcan compare your results with a neighboring group. If you don't agree, then go back though and see if you can find whereyou lost track.

Support: Students should work in pairs through the two programs on the activity guide. Have a check-in to make sureeveryone agrees on the ending state of the program (what labels are connected to what values). If students disagree,reinforce the need to debug when reading code by going back and tracing each step.

Activity 2 (30 mins)

Sprite Properties


DiscussionGoal

The goal of the discussion is not to have students think ofsolutions to all the problems, but for them to identify them,priming them for the counter pattern lesson. Someproblems students may see are that the smiley facesremained on the screen, rather than moving, that theycould only move left and right or up or down, or that theimages stopped after a certain amount of time.

Content Corner

This activity is designed to address many commonmisconceptions with variables and memory.

Common Misconceptions

Variables can have multiple values (They cannot,variables hold at most one value)Variables “remember” old values (They do not, henceold values being removed to the Trash)Variables are connected after a command like “x = y”(This may arise later in the course when students usesprites and will be addressed in great detail. For nowstudents are being forced to create new value cardsevery time because even for a statement like x = y thereis no “connection” between those variables formed)Variables hold expressions (e.g. 1 + 5) (Variables onlyhold values, expressions are computed beforehand.This is why value cards are only created once studentshave a single value. Enforce this rule closely)

DiscussionGoal

Goal: Students should see that commands such as x = x+ 1 will move a sprite in a deliberate way across thescreen, as opposed to the random movement they saw inthe previous lesson.

Distribute: Sprite Properties in Variables Unplugged- Activity Guide if you have not included it on theoriginal activity guide.

Demonstrate: Show students the rules of activity on theactivity guide. Work through program 5 as a group, anddemonstrate how to make a new sprite card and connectit to both its variable label card and the sprite propertycards. Make sure students understand that they shouldbe creating a new sprite card every time they see thecreateSprite command and should draw their sprites on

the grid every time they see the drawSprites command.

Support: Students should work through the last twoprograms using their manipulatives.

Prompt: How did the sprite move across the grid inProgram 3? How did the sprite move across the grid inProgram 4?

After students have filled out the reflection questions,they should compare with another pair, then discuss as aclass.

Wrap Up (10 mins)

DiscussionPrompt: We saw some clues today of how we mightprogram the types of movement that we want for oursprites. What are some problems that we still need tosolve to make the sprite look like it's moving in the waythat you want?

Allow students to brainstorm problems and list them onthe board.

Prompt: Choose one or two of these problems and startto think of some ways you could solve this problem.

Allow students time to brainstorm individually beforesharing out their solutions.

Remarks

These are great ideas. In the next lesson, we're going to look at how we can use some of the things we've learned todayto make our sprites move in lots of different ways.






UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 9: Sprite MovementGame Lab

OverviewBy combining the Draw Loop and the Counter Pattern, students writeprograms that move sprites across the screen, as well as animateother sprite properties.

PurposeThis lesson combines the Draw Loop that students first saw in Lesson7 and the Counter Pattern that they learned in Lesson 8 to createprograms with purposeful motion. By either incrementing ordecrementing sprite properties, such as sprite.x , you can write

programs that move sprites in expected patterns, instead of therandomization that we used in the past. The animations that studentslearn to create in this lesson lay the foundation for all of theanimations and games that they will make throughout the rest of theunit.


Reviewing Sprite Properties


Levels: Sprites and Images

Wrap Up (5 minutes)

Journal


Use the counter pattern to increment ordecrement sprite propertiesIdentify which sprite properties need to bechanged, and in what way, to achieve aspecific movement

DiscussionGoal

The purpose of this discussion is to start students thinkingabout how they might use the various sprite propertiesthey've seen so far to make animations with purposefulmotion. If students struggle to come up with ideas, youcan narrow down the question to specific properties. Forexample:

What would happen to a sprite if you constantlyincreased its x property?

What would happen to a sprite if you constantlyincreased its y property?

What about other properties, or combining multipleproperties?


Reviewing Sprite PropertiesPrompt: On a piece of scratch paper, list out all of thesprite properties you can think of and what aspect of asprite they affect.

Discuss: What kinds of animations could you make bycombining sprite properties with the counter pattern?Consider both adding and subtracting from properties, oreven updating multiple properties at the same time.Record ideas as students share them on the board.


Levels: Sprites and ImagesTransition: Send students to Code Studio.

Support: Students should be progressing through the levels without stopping in this class. When they have finished theskill building levels they are given the option of which project they wish to extend.

Code Studio levels


Video: Sprite Movement Student Overview

The Counter Pattern Student Overview

Movement with the Counter Pattern 4 5 6 7 8


Debugging with Watchers Student Overview

Animating Sprites 10 11 12 13 (click tabs to see student view)

Create Your Own Animation 14 15 (click tabs to see student view)


Wrap Up (5 minutes)










UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 10: Booleans UnpluggedUnplugged

OverviewIn this lesson, students are introduced to boolean values and logic, aswell as conditional statements. The class starts by playing a simplegame of Stand Up, Sit Down in which the boolean (true/false)statements describe personal properties (hair or eye color, clothingtype, age, etc). This gets students thinking about how they can framea property with multiple potential values (such as age) with a binaryquestion.

From there students are provided a group of objects with similar, yetvarying, physical properties. With a partner they group those objectsbased on increasingly complex boolean statements, includingcompound booleans with AND and OR.

Finally we reveal Conditionals as a tool to make decisions or impactthe flow of a program using boolean statements as input.


Stand Up, Sit DownExample Translation

Activity (30 min)

Asking the Right QuestionsSorting with BooleansConditionals

Wrap Up (5 min)

Explicit Conditionals


Organize objects based on simple andcompound boolean statementsDescribe the properties of an object usingboolean statements

PreparationRead the ForumPrint a copy of the Boolean Properties -

Activity Guide for each student(Optional) Gather objects with similar but

varying features to use instead of theworksheet (LEGO bricks work well, a mixedbag of candy can be fun as well)


For the Students

Boolean Properties - Activity Guide

VocabularyBoolean - A single value of either TRUE orFALSEConditionals - Statements that only rununder certain conditions.Expression - Any valid unit of code thatresolves to a value.

Make a Copy

https://docs.google.com/document/d/1kRNIUD5Z3r7HK9twMPMnenyEFPh9ouMsJKIb4T0-6so/

https://docs.google.com/document/d/1kRNIUD5Z3r7HK9twMPMnenyEFPh9ouMsJKIb4T0-6so/


Stand Up, Sit DownDistribute: Give each student a card and have them answer the following questions on it (feel free to add some of yourown)

1. What is your hair color?2. Do you wear glasses or contacts?3. What is your favorite number?4. What is your favorite color?5. What month were you born?6. Do you have any siblings?7. What is the last digit of your phone number?8. What is something about you that people here don't know and can't tell by looking at you?

Then collect the cards and shuffle them. To play the game, follow these steps:

For Each Card:

1. Select a card2. Say: I’m going to read the answer to #8 but if it is you, don’t say anything.3. Read the answer to #84. Say: Now everyone stand up and we are going to ask some questions with Boolean answers to help determine who this

person is. I'm going to say a bunch of statements. If they are true about you stay standing. If they are false sit down.5. Translate the answers from #1 to #7 into statements that can either be true or false (See below). The person whose card

it is should always answer true.6. Because of how numbers 3, 4, 5, and 7 were asked it is likely that some people will still be standing. You will need to

revisit these and ask them again in a more narrow fashion such as “My favorite color is purple”.

Example Translation

Question Answer True/False Statement

1) What is your hair color? brown "My hair color is brown."

2) Do you wear glasses or contacts? yes "I wear glasses or contacts."

3) What is your favorite number? 12 "My favorite number is greater than 10 andless than 20."

4) What is your favorite color? purple "My favorite color appears in a sunset."

5) What month were you born May "I was born in the spring."

6) Do you have any siblings? yes "I have siblings."

7) What is the last digit of yourphone number? 5 "The last digit of my phone number is

prime."

Content Corner

In English, an “or” is often an “exclusive or” such as “Youcan have chicken or fish.” In English, you only get to pickone, but with Boolean logic you could have chicken, fish,or both!! For the example person, “I was born in May ORmy favorite number is 12” is true. Note that “I was born inMay OR my favorite number is 13” is also true.

Teaching Tip

Students often struggle with the idea of greater-than orequals to ever being FALSE - they tend to think of thoseas statements of truth rather than questions of relation.

In this activity we use the language something is equal tosomething else in order to mirror the code they'll seelater (eg something == something_else ), but for studentswho are struggling with seeing this as a question ratherthan a statement, you can encourage them to reword thestatement by moving the 'is' to the beginning, so:

something is equal to something else

becomes

is something equal to something else?

Play this several times changing the true/false statementsyou use. Be creative with using or and and. Remindstudents that the OR means that either part of thestatement being true will result in the entire statementbeing true.

Discuss: the Stand up Sit Down game with students:

What kinds of questions did the teacher ask?Were you ever confused about whether you should bestanding or sitting? Why?At any point in the game, how many different states could you be in?

Introduce the vocabulary boolean as a description for the kinds of questions we were asking. The defining feature of aBoolean is that it can have only two states - in our game those states were True and False, or Standing and Sitting

Activity (30 min)

Asking the Right QuestionsBrainstorm

Prompt: Brainstorm places where they've seen Boolean values before, either in the class or in the world.

Discuss: Have students share out their answers. Potential answers could include:

BinaryFlow chartsLight switches (and other devices that can be on or off)

Sorting with Booleans Remarks

In the game we played, the boolean questions I asked were all based on your properties. Your properties didn't have toexist in only two states (how many different hair colors are in the room?), but the questions I asked had to split them intotwo states (how many people in the room have red hair?). We're going to do similar sorting using the properties of variousimages.

Group: Organize students into pairs

Set Up: Assign each member of the pair as either True orFalse.

Distribute: Hand out the cut out the images from theworksheet, or provide students with some objects to sort(such as LEGO bricks or candies).

Remarks

I'm going to read a bunch of binary statements in theform of shape is equal to square or sides is greater than4 , and you are going to sort through their objects toorganize them into TRUE and FALSE piles. If studentsdisagree about which pile an object should go into theyshould first discuss what the property is, what the twooutcomes of the binary question are, and then if theystill cannot agree they should bring it to the class for avote.

If you are using the provided cutouts, you canstart with the following questions:

sides is equal to 3

Content Corner

When combining booleans with OR we are using what iscalled a logical or - meaning that we are asking if either(or both) or the booleans is TRUE. Students often defaultto thinking of OR as an exclusive or - meaning that weare asking if only one (but not the other) is TRUE.

Make sure you ask students questions or questions whereboth of the booleans are TRUE to ensure you can get atthis misconception early

fill is equal to blackcorners is less than 1width is equal to heightfill is equal to grey AND sides is greater than 4sides is greater than 4 AND less than 7sides is greater than 4 OR less than 7sides is NOT less than 5

ConditionalsGoal: After getting used to sorting objects into TRUE andFALSE, we need to introduce students to the concept thatBooleans can also be used to control the flow of a program.

Remarks

A conditional allows us to make a decision based on the outcome of a boolean question (or condition). We actually wereimplicitly using conditionals in the Stand Up, Sit Down activity because there was an action related to each potentialoutcome of the boolean. We could have rephrased the instructions as

if statement is true: remain standing else: sit down

Prompt: Select one object from your pile and hold it up.

Remarks

I'm going to ask you a boolean question about your object and give you an action related to the potentail outcome of theboolean. Figure out what your response should be for your shape and do the correct response.

Prompt: Ask students some boolean questions about that single object AND give students something to do if that questionis true. For example:

If sides is equal to 4, do a danceIf pattern is equal to striped, sit downIf width is equal to height, hop on one foot

Wrap Up (5 min)

Explicit ConditionalsGoal: Booleans and conditionals are actually something that we use in our everyday lives - we just aren't usually explicitabout it.

Model: As a way to practice thinking explicitly about conditionals, consider dismissing your students using compoundbooleans and conditionals. For example.

If you sit at table four and your hair is brown, you may leave.If your first name starts with A OR B, you may leave.If your shoes are black, you may leave.





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 11: Booleans and ConditionalsGame Lab

OverviewStudents start by using booleans to compare the current value of asprite property with a target value, using that comparison to determinewhen a sprite has reached a point on the screen, grown to a givensize, or otherwise reached a value using the counter pattern. Afterusing booleans directly to investigate the values or sprite properties,students add conditional if statements to write code that responds tothose boolean comparisons.

PurposeThis lesson follows closely the booleans model that students firstexperienced in the Booleans Unplugged lesson. As before, we startwith using booleans directly before using booleans to trigger ifstatements. In the following lesson we will introduce some booleanproducing blocks, such as keyDown() , which can be used in place of

simple boolean comparisons to write programs that respond to userinput.


Answering Boolean Questions

Activity (40 min)

Booleans Plugged

Wrap Up (5 min)

Adding Conditionals


Predict the output of simple booleanstatementsUse conditionals to react to changes invariables and sprite properties

VocabularyBoolean Expression - in programming, anexpression that evaluates to True or False.If-Statement - The common programmingstructure that implements "conditionalstatements".

Introduced CodeIf statement

Equality operator

Inequality operator

Greater than operator

Greater than or equal operator

Less than operator

Less than or equal operator

Content Corner

Though seemingly simple, understanding how a booleanstatement will evaluate can be difficult given that differentprogramming languages have differing opinions on'truthiness' and 'falsiness'. In fact, JavaScript (thelanguage used in this course) has two different operatorsto test boolean equality == and === .

The double equals operator ( == ) is pretty generous indetermining truthiness, for example each of the following isconsidered true in JavaScript when using the ==operator, but would be false using the === operator:

1 == true;"1" == true;5 == "5";null == undefined;"" == false;

We use the == operator in this course because it's moreforgiving, but it's important to be aware that it cansometimes report back truth when you really didn't intendit to (in which case you might want to use the more strict=== operator)


Answering Boolean QuestionsGoal: At the end of the Boolean Question game from the previous lesson, students began adding conditions to theirboolean questions - meaning that if the answer to the question is true, something should happen. Before programming withconditionals, we want to make sure that students have a solid understanding of what booleans really are.

Prompt:

How many different numbers are there in the world?How many different words or combination of letters and other characters are there?How many different boolean values are there?

Discuss: Students should realize that the first two questions (numbers and strings), are essentially infinite, but thatbooleans are limited to two states.

Remarks

As you begin programming today, you'll be using booleans to make programs that change their behavior depending onthe answer to those boolean questions.

Activity (40 min)

Booleans PluggedTransition: Send students to Code Studio.

Code Studio levels


Wrap Up (5 min)

Adding ConditionalsJournal: Think back to all of the programs you've written so far; how might you use conditionals to improve one of yourprograms from past lessons? What condition would you check, and how would you respond to it?




Make a Prediction 2 (click tabs to see student view)

Video: Booleans Student Overview

Booleans and Comparison Operators Student Overview

Boolean Comparison 5 6 7 8 (click tabs to see student view)

If Statements Student Overview

Basic Conditionals 10 11 12 (click tabs to see student view)



UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 12: Conditionals and User InputGame Lab

OverviewFollowing the introduction to booleans and if statements in theprevious lesson, students are introduced to a new block calledkeyDown() which returns a boolean and can be used in conditionals

statements to move sprites around the screen. By the end of thislesson students will have written programs that take keyboard inputfrom the user to control sprites on the screen.

PurposeOne common way conditionals are used is to check for different typesof user input especially key presses. Having a way for a user tointeract with a program makes it more interesting and dynamic.Without interaction from the user it is very difficult to create a game.Therefore the introduction of conditionals and user inputs for decisionmaking is the first big step toward creating games.


Taking Input

Activity (40 min)

Keyboard Input

Wrap Up (5 min)

Considering Conditions


Use conditionals to react to keyboard inputMove sprites in response to keyboard input


For the Students

Boolean Expressions - Video (download)

Introduced CodekeyDown(code)

https://youtu.be/y3rCKJNOwpA

https://videos.code.org/2015/csp/applab/conditionals_1.mp4

DiscussionGoal

The goal here isn't to get into the technical specifics of howprograms can take input (students will get to that in theonline portion of the lesson), but rather to get studentsthinking about how allow user input could change theprograms they've made. Encourage students to think backto Unit 1 and the various computer inputs and outputs theyexplored then. Which inputs would be most useful for thetypes of programs they've been making?


Taking InputDiscuss: So far all of the programs you've written runwithout any input from the user. How might adding userinteraction make your programs more useful, effective, orentertaining? How might a user provide input into yourprogram?

Activity (40 min)

Keyboard InputTransition: Send students to Code Studio

Code Studio levels

Wrap Up (5 min)

Considering ConditionsPrompt: To get students to continue thinking about how conditionals can be used in programming, prompt them to comeup with scenarios in games or programs they use regularly that might be triggered by conditionals.

Discuss: Have students share responses. Student responses might include:

If my username and password are correct, log me into FacebookIf Pacman has collected all the balls, start the next levelIf my keyboard or mouse hasn't moved in 10 minutes, turn on the screensaver



Keyboard Input 2 3 4 5 6 7 (click tabs to see student view)

Editing Images Student Overview

Keyboard Input 9 (click tabs to see student view)





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 13: Other Forms of InputGame Lab

OverviewIn this lesson students continue to explore ways to use conditionalstatements to take user input. In addition to the simple keyDown()

command learned yesterday, students will learn about several otherkeyboard input commands as well as ways to take mouse input.

PurposeStudents have learned how to make simple decisions withconditionals. Sometimes however we want to make decision basedon if the condition we asked about originally was false or we want tomake a decision based on multiple conditions being true. Thats whereelse statements and more complex conditionals come in. Elsestatements are a second statement which is attached to a ifstatement. Else statements execute when the if statement it isattached to is false. You can think of it as "if something is true dothing 1 else do thing 2.

This concept is introduced alongside several new key and mouseinput commands, allowing students to gradually build up programsthat input in different ways.


Check for Understanding


If/Else and More Input

Wrap Up (5 minutes)

Share Out


Use an else statement as the fallback case toan if statementDifferentiate between conditions that are trueonce per interaction, and those that remaintrue through the duration of an interaction.

VocabularyConditionals - Statements that only rununder certain conditions.

Introduced CodekeyWentDown(code)

keyWentUp(code)

mouseDidMove()

mouseDown(button)

mouseWentDown(button)

mouseWentUp(button)

sprite.visible

If/else statement


Check for Understanding Remarks

Today we'll be picking up today where we left off yesterday - using conditionals to write programs that respond to userinput. Let's refresh what we learned yesterday.

Prompt:

What is a Boolean? (eg. a true/false value)What is the relationship between a Boolean and a Conditional? (eg. a conditional asks a Boolean question and runscode if the answer is true)What are some examples of comparison operators that result in a Boolean? (eg. >, <, ==)What is the difference between = and == ? (eg. = is used to assign a value, == is used to check if two values are

equal)


If/Else and More InputVideo: Watch the Conditionals Video together as a class. It will be a review of if statements and introduce some newconcepts too.

Transition: Send students to Code Studio

Code Studio levels

Wrap Up (5 minutes)


Follow the Mouse 2 3 (click tabs to see student view)

Video: Conditionals Student Overview

If-Else Statements Student Overview

Input with If-Else 6 7 8 9 10 11 12



Share OutShare: The final program in this lesson is asks students to expand a program to uses conditionals for user input in new andinteresting ways. Have your students share their projects with the class, prompting them to explain how they usedconditionals in their programs.





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 14: Project - Interactive CardGame Lab | Project

OverviewIn this cumulative project for Chapter 1, students plan for and developan interactive greeting card using all of the programming techniquesthey've learned to this point.

PurposeThis end of chapter assessment is a good place for students to bringtogether all the pieces they have learned (drawing, variables, sprites,images, conditionals, user input) in one place. Students should still beworking with code that is easily readable and doesn't involve a wholelot of magic. Giving students the opportunity to really be creative afterlearning all these new concepts will help to engage them further as wehead into chapter 2.


Demo Project Exemplars (Level 2)

Activity (2 days)

Unplugged: Interactive Card PlanningLevels: Implementing Interactive Card (Level 3 - 7)Peer ReviewIterate - Update CodeReflect


Sharing Cards

Assessment


Use conditionals to react to keyboard input orchanges in variables / propertiesSequence commands to draw in the properorderApply an iterator pattern to variables orproperties in a loop

PreparationRead the ForumPrint out a copy of the Interactive Card -

Project Guide Activity Guide for eachstudent


For the Teacher

Interactive Card - Project Guide ExemplarInteractive Card - Peer Review Exemplar

For the Students

Interactive Card - Project Guide

Interactive Card - Rubric

Interactive Card - Peer Review

Make a Copy

Make a Copy

Make a Copy

https://docs.google.com/document/d/1PtGpvAAyCYa_glecPhytGPrZau9ElJfJRhnVogFEqv4/




https://docs.google.com/document/d/1EdEpsowofT8WGQSFvzYVF53HEKipLYdWULtjLgpOEBw/

https://docs.google.com/document/d/1aVP_8YU-JWkxVvRiituCOf66w7refwDaecNBLMZkKgs

View on CodeStudio


Demo Project Exemplars (Level 2)Goal: Students see an example of a final project and discuss the different elements that went into making it.

Display: On the projector, run the exemplar for students. Since this is on level 2 of the progression, if its easier for studentsto do it on their own computers you could do that as well.

Code Studio levelsInteractive Card Student Overview

Example ProjectRun the program a few times and answer the following questions:

1) Which elements appear to use drawing commands?

2) Which elements appear to be Sprites?

3) For each Sprite, which properties are being updated?

4) Where do you see conditionals being used?

5) Are there elements that you don’t understand?

Discuss: Have students share their observations and analyses of the exemplar.

Encourage the class to consider that there are multiple approaches to programming anything, but that there may be cluesas to how something was created. In particular, when they are sharing their thoughts ask them to specify the following :

Clues that suggest a Sprite was usedClues that suggest a conditional was usedClues that suggest an iterator pattern was used

Display: Show students the Interactive Card - Rubric rubric. Review the different components of the rubric with them tomake sure they understand the components of the project.

Activity (2 days)

Unplugged: Interactive Card PlanningGoal: Students should plan out what they want to create before they head to the computer so that once they get to thecomputer they are just executing the plan.

Distribute: Hand out the Interactive Card - Project Guide to students. This is the tool students will use to scope outtheir projects before getting onto the computers. Give students some time to brainstorm the type of card they want to createand who the recipient will be.

Steps

1) The first layer of the interactive card is a background drawn with just the commands in the Drawing drawer. The front ofthe Activity Guide provides a grid for students to lay out their background, a reference table of drawing commands, and anarea for students to take notes and write pseudocode.

2) Next students think through the Sprites they'll need, filling out a table of each Sprite's label, images, and properties




View on CodeStudio

View on CodeStudio

3) Finally students consider the conditionals they'll need in order to make their card interactive.

Levels: Implementing Interactive Card (Level 3 - 7) Transition: Once students have completed their planning sheet, it's time to head to the Code.org website for Lesson10. The short level sequence asks students to complete each element of their project.

Code Studio levelsMaking an Interactive Card Student Overview

Your Interactive CardIn the next few levels, you'll be completing your own interactive card. Here are some examples to give you some ideas.Don't forget to look at the code to see how they work.

Examples

Levels 4 5 6 7

Student Instructions

Laying Out Your BackgroundBefore beginning this project, you should have already completed the Interactive Card Planning activity, and you'll want tohave that paper with you as you develop your program. Preparation is one of the most important elements of successfullycreating a program!

Do ThisRefer to your planning activity sheet to help you lay out the shapes that will become the background to your card.

First, figure out what the lowest layer in your image is (this should use the background() block) and add it to the very top

of the draw loop.Next, layer each additional drawing block in the order you want them to appear in the stack.Finally, add a comment to the top of this section of code to describe what it does, and if you have any particularlycomplicated chunks of code within (such as code to draw a tree or a house), add a descriptive comment to that as well.

Challenge: Can you use variables or randomNumber() to add some subtle animation to your background layer?


https://studio.code.org/projects/gamelab/OzdFqrZ4oHPYsTddaRWaZxtTvdj9NzZVwCq6NkyONXM/edit

https://images.code.org/7bbdbbb01c354a7c09bb4b9b5182a951-image-1522780803299.png

https://studio.code.org/projects/gamelab/fmFrWsocELzP19CfbGI5P_hsgxN5ewVaB5f0Bw5S1_E/edit

https://images.code.org/ed307e22854e4958a006d8023636cfd5-image-1522780803295.png

https://studio.code.org/projects/gamelab/z4XDrC0lsqoRY0xzYaXdJfChmyCl5O6YM-EOByecscc/edit

https://images.code.org/ae0eca1dab46f13fcb21d4d0e264d637-image-1522780803298.png


View on CodeStudio

View on CodeStudio

View on CodeStudio


Adding SpritesNow that you have the more static elements of your card layed out, it's time to add the Sprites. Your Sprites should providethe primary animations and interactions for your card - so feel free to get creative here and have fun.

Do ThisCheck out the Sprites table on the back of your planning sheet. For each Sprite in your table:

Initialize the Sprite at the top of your program with createSprite() .

Find or create the image(s) for the Sprite and set it with setAnimation() .

Inside the draw() loop update any Sprite properties that we will be constantly animating (we'll deal with conditionals in a

minute).


User InputYou've got a background, you've got Sprites, now it's time to give your user something to do!

Do ThisOn the interactions table from your planning sheet, find all of the interactions that rely on user input (key presses andmouse movements). For each of those interactions:

Add an if block (or if-else block if you need a fallback action) inside the draw() loop.

Add the appropriate input block for your condition (such as keyDown() or mouseDown() ).

Add the necessary actions inside the if block.

Challenge: Can you create more sophisticated conditionals by nesting them or using compound booleans?


Other ConditionalsThe surprise in your card comes from conditionals that don't directly respond to user input, but to some other element ofyour card. This could be triggered by a variable that gets updated as the user interacts with your card, or a Sprite movinginto a certain part of the screen.

Do ThisFor each of the remaining items on your interactions table:

Add an if block (or if-else block if you need a fallback action) inside the draw loop.

Add the appropriate Boolean comparison block to the condition (eg. < , > , or == ).

Add the necessary actions inside the if block.

Challenge: Can you create more sophisticated conditionals by nesting them or using compound booleans?

Peer ReviewDistribute: Give each student a copy of Interactive Card - Peer Review .




https://docs.google.com/document/d/1aVP_8YU-JWkxVvRiituCOf66w7refwDaecNBLMZkKgs

View on CodeStudio

Students should spend 15 minutes reviewing the other student's card and filling out the peer review guide.

Iterate - Update CodeCirculate: Students should complete the peer review guide's back side and decide how to respond to the feedback theywere given. They should then use that feedback to improve their cards.

ReflectUsing the Interactive Card - Rubric , students should assess their own project before submitting it.

Send students to Code Studio to complete their reflection on their attitudes toward computer science. Although theiranswers are anonymous, the aggregated data will be available to you once at least five students have completed thesurvey.

Code Studio levelsLevels 8


Finishing TouchesNow's your chance to put some finishing touches on your card. We've included some new blocks that you haven't seenbefore, so take some time to look around and try out some new blocks.

Do ThisConsider adding any of the following to finish up your card:

TextAdditional images for your spritesSubtle animation in the backgroundSound effects (Can you figure out now to do this?)More ways for a user to interact with your card


Sharing CardsGoal: Students share their creations with the class.

Share: Find a way for students to share their cards with each other, and with the intended recipient. It will likely be helpfulto use the share link for the project so that students can share the project with other students.

Assessment

A rubric for assessing student projects is provided in the resources.







UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 15: VelocityGame Lab

OverviewAfter a brief review of how they used the counter pattern to movesprites in previous lessons, students are introduced to the propertiesthat set velocity and rotation speed directly. As they use these newproperties in different ways, they build up the skills they need tocreate a basic side scroller game.

PurposeThis lesson launches a major theme of the chapter: that complexbehavior can be represented in simpler ways to make it easier to writeand reason about code.

In this lesson they are taught to use the velocity blocks to simplify thecode for moving a sprite across the screen. This marks a shift in hownew blocks are introduced. Whereas previously blocks werepresented as enabling completely new behaviors, they are nowpresented as simplifying code students could have written with theblocks previously available. Over the next several lessons, studentswill see how this method of managing complexity allows them toproduce more interesting sprite behaviors.

AgendaWarm Up (15 min)Activity (75 minutes)

Learning to Use the Velocity Blocks

Wrap Up (5 min)

Journal


Use the velocity and rotationSpeed blocks tocreate and change sprite movementsDescribe the advantages of simplifying codeby using higher level blocks

Introduced Codesprite.rotationSpeed

sprite.velocityX

sprite.velocityY

DiscussionGoal

Goal: The earlier demonstration should have reinforcedthe fact that repeatedly giving the same instruction issomething you would never do in real life. You wouldinstead come up with a way to capture that the instructionshould be repeated, like "keep moving forward by 1."

Teaching Tip

Check for Understanding: This is just a quick check forunderstanding after the video. Students are quicklyprompted to see if they understood the main point of thevideo and if not you have an opportunity to reinforce itbefore moving into the Code Studio levels. Leave thetranslation from the velocity blocks to their associatedcounter pattern on the board to reference throughout thelesson.


Demonstrate: Ask for a volunteer to come to the front of the class and act as your "sprite". Say that you will be givingdirections to the sprite as though you're a Game Lab program.

When your student is ready, face them so that they have some space in front of them and ask them to "Move forward by 1".They should take one step forward. Then repeat the command several times, each time waiting for the student to moveforward by 1 step. You should aim for the repetitiveness of these instructions to be clear. After your student has completedthis activity, have them come back to where they started. This time repeat the demonstration but asking the student to"Move forward by 2" and have the student take 2 steps each time. Once the student has done this multiple times ask theclass to give them a round of applause and invite them back to their seat.

Prompt: I was just giving instructions to my "sprite", but they seemed to get pretty repetitive. How could I have simplified orstreamlined my instructions?

Discuss: Give students a minute to write down thoughtsbefore inviting them to share with a neighbor. Then havethe class share their thoughts. You may wish to writetheir ideas on the board.

Remarks

One way to simplify these instructions is just tell oursprite to keep moving by 1 or 2, or however many stepswe want. This would make instructions as humanseasier to understand, and as we're about to see there's a similar way to make our code simpler as well.

Show: Sprite Velocity Video

Code Studio levelsVideo: Velocity

Student Overview

Display: On the board, write the following pieces of code.

sprite.velocityX = 4;

sprite.velocityY = -1;

sprite.rotationSpeed = 2;

Prompt: We just saw how these new blocks help ussimplify the counter pattern we used to move sprites. Ona sheet of paper write down the counter pattern each ofthese lines of code is replacing.

Discuss: Have students write their ideas on a sheet ofpaper before discussing their responses as a class.Eventually write the correct answers on the board next toeach, as shown below.

sprite.x = sprite.x + 4;

sprite.y = sprite.y - 1;

sprite.rotation = sprite.rotation + 2;

Remarks

Teaching Tip

Inside or Outisde the Draw Loop?: For the first fewpuzzles, check to make sure that students are setting thevelocities and rotation speeds outside the draw loop,immediately after they create their sprites. The code willwork for the first few puzzles, even if they set the velocitiesinside the draw loop, but it will cause problems later.

These new "higher level" blocks are helping us to write code that we actually already knew how to write. They'resimplifying our code for us by hiding some of the unnecessary details. As we're about to see, however, these new blockswill change the kind of programs and games we're able to write.


Learning to Use the Velocity Blocks

Transition: Move students to Code Studio

Circulate: These levels introduce the velocityX, velocityY, and rotationSpeed properties that you just discussed withstudents. Check in with students to see how they are doing and keep track of when everyone has made it to the end of level10.

Code Studio levels

If students are finished early, encourage them to experiment with different aspects of the scroller game they created. Theycan change the animations, create a background, etc.

Wrap Up (5 min)

JournalPrompt: You learned a few new blocks today. As first glance, these blocks did the same sorts of things we'd already donewith the counter pattern, but made it simpler for us to do them. As you went through the puzzles, though, you started doingsome interesting movements that we hadn't been able to do before.

Describe one of those movements, and how you made it.Describe another movement you'd like to make but don't know how yet.


Sprite Velocity Student Overview

Velocity 4 5 6 7 8 9 10 (click tabs to see student view)

Side Scroller 11 12 13 (click tabs to see student view)


Describe another block that you'd like to have.Would it take any arguments?What would it do?What code would it hide inside?

Remarks

All of the movements that we did today are possible without the new blocks, but it would be very complicated to codethem. One of the benefits of blocks like velocity is that when we don't have to worry about the details of simple movementsand actions, we can use that extra brain power to solve more complicated problems. As you build up your side scrollergame, we'll keep looking at new blocks that make things simpler, so we can build more and more complicated games.





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 16: Collision DetectionGame Lab

OverviewStudents learn about collision detection on the computer. Working inpairs, they explore how a computer could use sprite location and sizeproperties and math to detect whether two sprites are touching. Theythen use the isTouching() block to create different effects when

sprites collide, including playing sounds. Last, they use their new skillsto improve the sidescroller game that they started in the last lesson.

PurposeThis lesson formally introduces the use of abstractions, simple waysof representing underlying complexity.

In the last lesson, students were exposed to the idea of using oneblock to represent complex code. Students further explore this idea inthe context of the intentionally complex mathematical challenge ofdetermining whether two sprites are touching. By using a single blockto represent this complexity, in this case the isTouching block, itbecomes much easier to write and reason about code, and studentscan appreciate the value of using abstractions. In later lessons,students will continue to build on the isTouching() abstraction to

create more complex sprite interactions.

AgendaWarm Up (10 min)Activity

Collisions UnpluggedisTouching()

Wrap Up (5 min)


Use the isTouching block to determine whentwo sprites are touchingDescribe how abstractions help to managethe complexity of code

PreparationPrint copies of Collision Detection -

Activity Guide such that each pair ofstudents has a part A and a part B


For the Teacher

Collision Detection - Exemplar

For the Students

Collision Detection - Activity Guide

VocabularyAbstraction - a simplified representation ofsomething more complex. Abstractions allowyou to hide details to help you managecomplexity, focus on relevant concepts, andreason about problems at a higher level.Debugging - Finding and fixing problems inan algorithm or program.If-Statement - The common programmingstructure that implements "conditionalstatements".

Introduced Codesprite.isTouching(target)

sprite.debug

Make a Copy

https://docs.google.com/document/d/16uOeOnjKEIQfWgHFjMyVkmurSVM1oDXjQPooSL7UlHs



Teaching Tip

Showing the Game: Avoid signing students into CodeStudio at this point to play the game themselves. Theyhave a fairly significant unplugged activity immediatelyafterwards and it will likely lead to difficulties intransitioning.

DiscussionGoal

Goal: This purpose of this discussion is just to get someideas on the board for students to use in the next activity.There's no need to actually evaluate or try them, becausestudents will be working together to do so immediatelyafter the discussion.


Review: Briefly remind students of the side scroller game they made in the last lesson, and ask them to share out anyideas they had for improving their game in the future.

Display: On a projector or just a computer screendemonstrate the game that appears in the first level inCode Studio for this lesson. The teacher or a student cancontrol the frog to jump over a mushroom. Make sure atleast some jumps are successful and some are not to seethat the collision detection is working.

Prompt: An interesting improvement in this game is thatthe mushroom moves when the frog touches it. Can youthink of any way that the computer could use the sprites’properties to figure out whether they are touching eachother?

Discuss: Allow the students to brainstorm ideas for howthe computer could determine whether the two spritesare touching. List their ideas on the board and tell themthat they’ll have a chance to try out their theories in amoment.

Activity

Collisions UnpluggedGroup: Group students into pairs.

Remarks

Now you’re going to have a chance to try out the strategies that you came up with as a group. Each activity guide has foursheets of paper. One partner should take the papers with the “A” on the top, and the other should take the papers with the“B” on the top. You’re each going to draw two secret sprites on the chart, and your partner will try to figure out whether ornot they are touching based on the same information that the computer will have about each sprite’s properties, so don’tlet your partner see what you are drawing.

Distribute: The Collision Detection - Activity Guide to each set of partners. Ensure that one partner has taken thepages with "A" on the top and the other has taken the pages with "B" on the top.

Each student will have a line on which to draw two squares. The student chooses the location and the size of each of thesquares, and then records the information about the squares in a table. They then switch tables (not drawings) and try todetermine whether or not the two sprites are touching based on the width of each sprite and the distance between them.

The math to determine whether the sprites are touching is as follows:

1. Subtract the x (or y) positions of the sprites to find the distance between their centers.2. Divide the width (or height) of each square by 2 to get the distance from the center to the edge.3. If the distance between the centers of the sprites is greater than the sum of the distances from their centers to their

edges, the sprites are not touching.4. If the distance between the centers of the sprites is equal to the sum of the distances from their centers to their edges,

the sprites are barely touching.5. If the distance between the centers of the sprites is greater than the sum of the distances from their centers to their

edges, the sprites are overlapping.


View on CodeStudio

View on CodeStudio

DiscussionGoal

Goal: The goal of this discussion is for students to seethat the math in the code is the same math described inthe unplugged activity. The code combines the tests for xand y in nested "if" statements.

Circulate: Support students as they complete the worksheet. If students are not sure how to determine whether the spritesare touching, encourage them to use one of the ideas on the board. Remind them that they are not being graded onwhether they are right or wrong, but on their ability to use the problem solving process. If any students are finished early,challenge them to find a method that will work for sprites anywhere on the grid, not just on the same line.

Share: After students have all had a chance to test their solutions, ask them to share what they discovered.

Remarks

People can use a lot of different strategies to solve a problem like this. Because computers can’t “see” the drawings in thesame way that people can, they need to use math to figure out whether two things are touching. We looked at how thiscan work along a line, but we can combine these methods to work anywhere on the game screen.

isTouching()Transition: Have the class log onto Unit 3 - Code Studio Levels for Lesson 16.

Display: Show bubble 2, and allow students to look in and discuss in pairs how they might code the behavior that they seein the program.

Code Studio levelsSample Game Student Overview

Frog JumpLook at the frog jumping game to the left. It looks like the game from the last lesson, but the frog moves the mushroom if ithits it. What code do you think would help the computer to know whether two sprites are touching?

The purpose of this level is for students to see that they can test whether two sprites are touching with the blocks that arealready available to them. The code is complicated, but it only uses blocks students have already learned to detect whentwo sprites are touching.

Discuss: Ask the students how the code below relates to what they did in the unplugged activity.

Remarks

Even though this code works, it can be hard to read, and it would be easy to make a careless error when you’re writing it.It would also take some time to write out every single time, so a programmer saved the code into one block that we canuse to figure out whether two sprites are touching, and we don’t need to write all of this code. Because this is something aprogrammer wants to do over and over again, someone has created a block called isTouching() that already has all of themath inside of it. Hiding the details of how something is done to make it easier to program is called abstraction.

Code Studio levelsCollision Detection Teacher OverviewStudent Overview

The code in this level is overwhelming. The point is not that students understand every line, but thatthey see that it's possible to check whether sprites are touching just by using their positions. Theyshould understand that the isTouching block used in the next level automatically runs the complicated code that they see

here, but that it's hidden inside the block to make programming easier.



View on CodeStudio

View on CodeStudio

View on CodeStudio

View on CodeStudio

BalloonThe code below uses the sprites' x and y positions to check whether they are touching. It will change the balloon sprite'sanimation when the tack touches it. Use the arrow keys to move the tack until it touches the balloon.

Do ThisYou do not need to change any code on this level.Read the if statements inside the draw loop and find the different sprite properties and how they are compared.Discuss the code with your partner. Would you want to write this code every time you checked whether sprites weretouching?

Levels 4 5 6 7 8


isTouching()Writing out the math each time you want to check whether two sprites are touching can take a while, so a programmercreated the isTouching block, which can check whether one sprite is touching another sprite (the target). The computer is

still doing the same math as in the previous program, but you don't have to worry about it because another programmeralready did that work.

Do ThisInside the draw loop, drag the isTouching block into the if block. ( Show me where )

Hint: Don't forget to change the "sprite" to "balloon" and the "target" to "tack".


ApplesauceWhen the apple hits the blender, the blender should turn on.

Do ThisUse the isTouching block to make the blender shake back and forth when the apple sprite touches the blender sprite. The

shaking motion is already coded using the random block, so you just have to check when the two sprites are touching.

Challenge: Can you make the apple disappear when it touches the blender?


Making SoundsYou can also use code to play a blender sound.





View on CodeStudio

View on CodeStudio

Do ThisUse the playSound block from the "World" drawer to play the "https://docs.code.org/sounds/blender.mp3" sound when the

apple touches the blender. You will need to paste the address of the sound into the block, so it looks like this:


Rainbow HorseWhen the rainbow touches the horse, it should turn into a unicorn.

Do ThisUse the if , isTouching , and setAnimation blocks to change the horse sprite's image when the rainbow touches it. The

unicorn image is already loaded in the animations tab for you.


Debugging CollisionsThe balloon is popping before the tack touches it. When sprites aren't doing what you expect, you can use the debug block

to get more information about why the sprites are behaving that way. Can you find out what's wrong in the code below?

Do ThisRun the code and use the arrow keys to move the tack to pop the balloon.In the code below, change balloon.debug = false to balloon.debug = true .

Add a new debug block to the code and set the tack sprite's debug property to true .

Run the code again, then discuss with your partner why the balloon is popping early.

Challenge: Can you use the animations tab to resize the balloon picture so it pops at the correct time?

Circulate: Support students as they work through levels 3-8. Level 8 allows students to work on the side scroller that theycreated in the last lesson. It is very open, so encourage students to be creative and try to code sprite interactions that theyhaven’t seen before. Students who complete the level early can continue to add new interactions or improve their games inother ways.

Wrap Up (5 min)

Prompt: What were some different things that your sprites did when they interacted? What is one type of interaction you’dlike, but you haven’t seen yet? Do you have any ideas for how you might write the code for that type of interaction?

Share: Once students have finished journaling, allow them to share out the different type of interactions they’d like to see.Let them know that you will be learning more ways for sprites to interact later in the unit.



https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 PM.png





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 17: Complex Sprite MovementGame Lab

OverviewStudents learn to combine the velocity properties of sprites with thecounter pattern to create more complex sprite movement. In particularstudents will learn how to simulate gravity, make a sprite jump, andallow a sprite to float left or right. In the final levels of the Code Studioprogression students combine these movements to animate andcontrol a single sprite and build a simple game in which a characterflies around and collects a coin. Students are encouraged to maketheir own additions to the game in the final level.

PurposeThis lesson does not introduce any new blocks and in fact only usespatterns students have seen in Chapter 1. Instead it demonstrateshow combining these tools, in particular the abstractions studentslearned in the previous two lessons, allows them to build newbehaviors for their sprites. This highlights the broader point thatabstractions not only simplify code, but also can themselves be usedas building blocks of even more complex behavior.

The lesson features some of the most challenging programming in theunit. Students will be combining multiple programming constructs,including the velocity properties, the counter pattern, user interaction,and collision detection. The patterns students use in this lesson aregenerally useful for building games and students can and will reusethem later in the unit. In particular students will return to their flyergame from this lesson in the following one, and many of themechanics students learn in this game reappear in lesson 17.

AgendaWarm Up (10 mins)Activity (60 mins)Wrap Up (10 mins)


Use sprite velocity with the counter pattern tocreate different types of sprite movementExplain how individual programmingconstructs can be combined to create morecomplex behavior

Preparation

View on CodeStudio

View on CodeStudio

Teaching Tip

This level introduces the primary new programmingpattern of this lesson, combing the counter pattern withsprites' velocity properties. Encourage students to takeseriously their predictions before actually running the code.

View on CodeStudio


Review: On the board write up the four major concepts that students will be combining in today's lesson, isTouching() ,

keyDown() , sprite.velocityX / sprite.velocityY , and the "counter pattern". Ask students to discuss with a neighbor and remind

one another what each of these four constructs is used for and how they work. As a class define each based on thesediscussions.

Remarks

In the last several lessons we've learned a lot of powerful programming constructs that have let us make much moreinteresting games. Today we're going to explore how combining these together will give us even more control over thetypes of games we can make.

Activity (60 mins)

Transition: Move students to Code Studio. With the exception of the discussion after the first level students will be workingin Game Lab until the end of the lesson.

Code Studio levelsLesson Overview Student Overview

Discuss: After students have made their predictions about how the code in the first level has runquickly discuss why they saw the car start to move more quickly. Note that whereas before they usedthe counter pattern to increase a car's position, now it is being used to increase the car's velocity.

Levels 2 - 4: These levels give students practice using velocity inside of the counter pattern.

Code Studio levelsVelocity and the Counter Pattern Teacher OverviewStudent Overview

Velocityand theCounterPatternUsing the counter pattern with a sprite's x and y property makes a sprite move smoothly across the screen. In this programthe counter pattern is being used with the sprite.velocityX property instead.

PredictWhat do you think will happen when the code is run? Why? Once you're ready you can run the code to find out.




View on CodeStudio

View on CodeStudio

View on CodeStudio

View on CodeStudio

Levels 3 4


Velocity and the Counter PatternAs you just saw, using a sprite.velocityX property with the counter pattern will change a sprite's velocity during the program.

This makes the sprite speed up. Do a little practice using this pattern yourself.

Do ThisThis program already makes a car move across the screen, but it's going very slowly.

Use the counter pattern with the sprite's velocityX property to make the car speed up. ( Show me where )


Falling RockThe rock should speed up as it falls down the screen. Can you use the same counter pattern with velocityY inside the draw

loop to make the rock go faster and faster as it falls?

Do ThisUse the counter pattern with the sprite's y velocity to make the rock speed up as it falls. ( Show me where )

Challenge: Can you make the rock spin as it falls?

Levels 5 - 6: These levels introduce using velocity and the counter pattern to slow down a sprite, eventually moving it inthe opposite direction. This leads to introducing how this pattern could be used to simulate gravity.

Code Studio levelsLevels 5 6


Rising BubbleThis program makes a bubble rise up the water. Can you make it get faster as it rises?

Do ThisUse the counter pattern and the sprite's y velocity to make the bubble move up more quickly.


Slowing Things Down





View on CodeStudio

View on CodeStudio

Now that you've had some practice speeding things up, can you use the counter pattern to slow sprites down?

Do ThisThe car is going to run into the water! You'll need to use the counter pattern to slow it down.

Use the sprite.velocityX block with a counter pattern to slow the car down by 0.25 as it moves across the screen.

Discuss with your Partner: What do you think will happen when the car finally stops?

Challenge: Add code that makes the car slow down only if his velocityX is greater than 0.

Levels 7 - 9: Students begin working on a flyer game. In these levels they use the programming constructs they'velearned to make their main character move. The character responds to simulated gravity, jumps, and floats left and right.

Code Studio levelsLevels 7 8 9


Simulating GravityIn the last level you slowed down the car with the sprite.velocityX block and the counter pattern. It almost looked like the car

was getting pulled to the left.

If you use this same pattern with the sprite.velocityY block it will look like your sprite is always being pulled down, which is

exactly what gravity does!

Do ThisThe rock is thrown in the air but it never falls back down.

Use the sprite.velocityY block with the counter pattern to make the rock slow down and then fall in the other direction.

Experiment with different values in your counter pattern. Do you want the rock to slow down quickly or gradually? Whatlooks most realistic to you?Discuss with your partner: Why are you setting the rock's initial velocity outside the draw loop? Why are you changingthe sprite's velocity inside the draw loop?


JumpingIncreasing a sprite's y velocity inside the counter pattern can simulate gravity. By adding user interactions you can makeyour sprite appear to jump as well. For starters you'll make a simple jump, and then make it more realistic looking in thenext level.

Do ThisA sprite has already been created for you that falls because its y velocity is increased inside the draw loop. You'll need tomake this sprite appear to jump.

Inside the if block that checks whether the up arrow has been pressed, set the sprite's y velocity to -5. ( Show me



View on CodeStudio

View on CodeStudio

View on CodeStudio

where )Discuss with a neighbor: Why does this code run the way it does? How would using a number besides -5 affect the waythe code works? How could you jump higher or lower?


Floating RightYou're now using the counter pattern with the sprite's Y velocity to simulate gravity and jumping. If you use the sprite's Xvelocity in the counter pattern then you can make your sprite float from side to side as well.

Do ThisIn this level you'll make your sprite start floating to the right when the right arrow is pressed.

Add an if statement inside your draw loop below the one you created for the "up" arrow.

Use the keyDown block to make the if statement respond to when the "right" arrow is pressed.

Inside the if block use the counter pattern with the sprite.velocityX block to add 0.1 to the sprite's X velocity.

Run your code to see how it works. The sprite should start floating to the right when you press the right arrow and jumpwhen you press "up". You'll make the left arrow work in the next level.

Levels 10 - 12: Students add a coin to the game for their character to collect. In the last level they are encouraged toupdate the game themselves. Use this opportunity in particular to encourage students to use other programming patternsthey've learned in this unit, e.g. creating a scoreboard.

Code Studio levelsLevels 10 11 12


Floating LeftIn the last level you got detailed instructions on how to make your sprite start floating to the right. This time you'll need tomake your sprite float to the left on your own. You should be pretty comfortable with using velocity and the counter patterntogether at this point. If you're having trouble, talk to a neighbor or review some of the past levels.

Do ThisAdd code to your draw loop that will make the sprite start moving to the left when the "left" arrow is down.Make sure you're using velocity and the counter pattern together.

Once your code is working share what you wrote with a partner. Is your sprite easy to control? Does changing the amountyou add or subtract in the counter patterns you wrote affect the way the game feels? What kind of game might be fun tomake with a player that moves like this?


Add a Coin




View on CodeStudio

DiscussionGoal

Goal: This conversation should highlight that students didnot learn any new blocks in today's lesson, they justlearned new ways to combine blocks and patterns theyhad learned previously. The broader point here is thatprogramming is not always about learning new blocks, butbeing creative about combining the tools you already knowhow to use in the language.

In the next few levels you'll add to your program to make a simple game. In this game the player will collect points toincrease the score. This is a good chance to see how different kinds of movement can affect the way a game feels, and itwill also just help you practice programming skills.

Do ThisIn this level you'll just be adding a new coin sprite to the game. You should be working at the top of your program, outsidethe draw loop.

Use the createSprite() block to create a new sprite. Make sure to give it a descriptive name such as coin.

Use the sprite.x and sprite.y properties of the sprite to give it a random X and Y position between 0 and 400.

In the Animation Tab there is already a coin animation. Use the sprite.setAnimation() block to give your sprite this

animation.

Test your code before moving on. When you run the game, you should see a coin sprite appear somewhere randomly onthe screen.


Reset CoinWhen your character touches the coin you should reset it somewhere on the screen.

Do ThisPlace an if block inside of your draw loop.

Use the sprite.isTouching() block as the condition to detect when the character touches the coin.

Inside the if block write code that sets the coin's X and Y position to random numbers between 0 and 400.

Hint: You've already written this code elsewhere in your program.

Test your code before moving on. When your player touches the coin, it should move somewhere else on the screen.

Wrap Up (10 mins)

Share: Have students share with their classmates what additions they made to their final flyer game. Have students focusnot just on how the game works, but what the code to create that kind of functionality looks like.

Prompt: On your paper make two lists. First make a list of new things you can program to do after today's lesson. On thesecond list write down all the new blocks you learned today.

Discuss: Have students share their lists with classmates.Afterwards share lists as a class. They should hopefullyhave listed many new sprite movements but studentshaven't actually learned any new blocks in this lesson.

After you call out that all the new movements they createdtoday were made by combining blocks and patterns theyalready learned, ask students what they think this mighttell them about how programmers develop code.

Prompt: Today we built lots of new sprite movementslike gravity and jumping, but none of this required us to learn new blocks. Do you think learning to program always meanslearning new commands?

Discuss: Lead a quick follow-up to your initial discussion about this point.


DiscussionGoal

Goal: Reinforce the fact that learning to program isactually not always just about memorizing blocks. Beingcreative with programming often means coming up withclever ways to combine the commands and patterns youalready know how to use.

Remarks

We're going to keep learning a few more tools in Game Lab, but as we do remember what we saw today. To create newkinds of programs you don't always need to learn new blocks. Most of the time the creativity of programming comes fromlearning to combine things you already know in newand creative ways.





UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 18: CollisionsGame Lab

OverviewStudents program their sprites to interact in new ways. After a briefreview of how they used the isTouching block, students brainstorm

other ways that two sprites could interact. They then use isTouching

to make one sprite push another across the screen before practicingwith the four collision blocks ( collide , displace , bounce , and

bounceOff ).

PurposeThis lesson introduces collisions, another useful abstraction that willallow students to manipulate their sprites in entirely new ways. Whilestudents could theoretically have written their own displace, collide, orbounce commands, the ability to ignore the details of this code allowsthem to focus their attention on the high level structure of the gamesthey want to build.

This lesson is also intended to give students more practice using thenew commands they have learned in the second chapter. It is actuallythe last time they will learn a new sprite behavior, and following thislesson students will transition to focusing more on how they organizetheir increasingly complex code.

AgendaWarm UpActivityCode Studio LevelsWrap Up (10 mins)

Share Out and Journal 3-2-1


Use the `displace`, `collide`, `bounce`, and`bounceOff` blocks to produce spriteinteractionsDescribe how abstractions can be built uponto develop even further abstractions

VocabularyAbstraction - a simplified representation ofsomething more complex. Abstractions allowyou to hide details to help you managecomplexity, focus on relevant concepts, andreason about problems at a higher level.

Introduced Codesprite.bounce(target)

sprite.bounceOff(target)

sprite.collide(target)

sprite.displace(target)

setCollider(type, xOffset, yOffset, width/radius,

height, rotationOffset)

sprite.bounciness

DiscussionGoal

Goal: The goal of this discussion is for students tobrainstorm ways to solve the problem of having one spritepush another across the screen. There's no need forstudents to come to a consensus, because they will eachhave a chance to try out a solution in the next level inCode Studio. Students should understand that it ispossible to use blocks to produce the desired movementjust with the blocks that they have already learned.

View on CodeStudio

View on CodeStudio

Teaching GuideWarm Up

Display: If you have the ability, project the animation onthe first level in Code Studio for this lesson. Otherwiseask pairs of students to look at it together. It shows twosprites, one moving across the screen towards the otherand eventually pushing the one when they collide.

Code Studio levelsLesson Overview Student Overview

Prompt: Using the blocks we already know how to use, how could we create the sprite interactionwe can see in this program?

Remarks

We have a lot of great ideas for how we might make one sprite push another across the screen. Now that you'veprepared, you can try out your ideas in Code Studio. One big part of the problem is figuring out when the two sprites aretouching, but because we already figured out how to do that and can now use the isTouching block, we don’t need tothink about it anymore. We can focus on the new part of the problem.

Activity

Code Studio Levels

Levels 2-4: In these levels students are shown a sprite interaction. They then implement their ideas for creating the spriteinteraction they observed. The first time they can implement the ideas from the group. The second time challenge them toimplement that behavior independently.

Code Studio levelsSprite Interactions Student Overview

Sprite InteractionsSo far you've been able to create simple sprite interactions by using the sprite.isTouching() block. For example, you've reset

a coin to a different location on the screen when a character touches it. Now it's time to start making sprites have morecomplex interactions.

Do ThisRun the program and observe the interaction between the two sprites.



View on CodeStudio

View on CodeStudio

Discuss with a neighbor: Using only the commands you already know how could you create this kind of interaction?There are many ways to do it, but here are some blocks to consider:

sprite.isTouching()

sprite.velocityX

sprite.velocityY

sprite.x

sprite.y

Be ready to share your ideas with your classmates.

Levels 3 4


Program a Sprite InteractionYou should have discussed with your classmates how you could create the sprite interaction you saw in the last level. Nowit's your turn to program it yourself. How can you make the giraffe move the monkey off the screen?

Do ThisThe giraffe is already moving across the screen toward the monkey but the sprite interaction itself hasn't beenprogrammed.

Use the plan you developed with your classmates on the last level to program the sprite interaction yourself.


Write Your Own Sprite InteractionIn the last level you should have written code for a sprite interaction that you developed with your classmates. This time tryto write the program on your own, but you can use the patterns you saw in the last level.

Do ThisThe elephant should push the hippo off the screen . Notice that the elephant moves at a random Y velocity each timethe program runs.

Using the patterns from the last level, write code that makes the elephant push the hippo off the screen.

Prompt: This was a challenging problem, but we were able to solve it. What helped us to solve this problem?

Remarks

All of these things are very important, and they come up in Computer Science a lot. One thing that was particularly helpfulwas the isTouching block, which hid the complicated code that tells us whether the two sprites are touching. There's alsoa displace block that hides the code we just wrote, and some other blocks that hide the code for some other types ofsprite interactions. You'll have a chance to try out these blocks in the next few levels, and use them to improve your flyinggame.

Levels 5-10: These levels introduce how to use the 4 new collision blocks students will learn in this lesson.



View on CodeStudio

View on CodeStudio

DiscussionGoal

This is a good time to call out how far the students haveprogressed in their skills since the beginning of the unit.This problem would have seemed almost impossible at thebeginning of the year. Some things that made the problemeasier to solve were:

Preparation: The students brainstormed and thoughtabout solutions before trying out their code.Cooperation: Students worked as a group to come upwith a solutionAbstraction: Students were able to use the isTouching

and velocityY blocks to hide part of the solution's

complexity.

Code Studio levelsLevels 5 6 7 8 9 10


DisplaceThe interaction you've been programming is so common that there's a block designed to do the interaction for you.sprite.displace() that will make one sprite push the other when they touch. The code underlying this block might look a lot

like what you just wrote, but now you no longer need to worry about writing those details yourself.

Do ThisSomeone tried to use the sprite.displace() block to make the elephant push the hippo, but there is a bug. Can you

change the code so that the elephant pushes the hippo off the screen?

Find the line of code where the sprite.displace() block is used and fix the error.


More Collision BlocksThree new types of sprite interactions have been added to the toolbox, sprite.collide() , sprite.bounce() , and

sprite.bounceOff() . How do you think they'll affect the sprites?

Do ThisSwitch out the displace block for the sprite.collide() , sprite.bounce() , and sprite.bounceOff() blocks. ( Show me where )

Hint: If you're having trouble doing this with blocks then switch over to text mode.Discuss with a neighbor: What is the difference between the four different sprite interactions? What do you think the



View on CodeStudio

View on CodeStudio

purpose of each block is?


Collision TypesThere are four types of collisions that we use in Game Lab. These blocks will cause a certain type of interaction betweenthe sprite and its target.

displace

The displace block causes the sprite to push the target as long as they are touching each other. The sprite keeps moving

normally.

collide

The collide block makes the sprite stop when it runs into the target. If the target is moving, it will push the sprite with it. The

target keeps moving normally.

bounce

The bounce block makes the sprite and the target bounce when they touch each other. Both the sprite and the target

change how they are moving.

bounceOff

The bounceOff block makes the sprite bounce off the target. The target keeps moving normally.

Do ThisChoose the best block to model the basketball bouncing off the floor. ( Show me where )


Debugging Sprite InteractionsSprite interactions just run some code when they're called. The interactions are not "remembered" by the game. If you wantone sprite to bounce or collide with another then it needs to be a part of the draw loop. If you forget then this can lead tounexpected behavior.

Do ThisThe turtle can be moved with the arrow keys. It's not supposed to be able to walk through the tree, but something is wrongin the code. Can you find and correct the bug in the code?

Run the code and try to make the turtle collide with the tree.Look through the code and discuss with your partner what the problem is.Correct the code, then run it again to make sure it works.



View on CodeStudio

View on CodeStudio

View on CodeStudio


DebugSometimes sprites will behave in ways that are unexpected. There is a special sprite.debug property you can use to better

understand why the sprites interact the way that they do.

Do ThisThese two coins are round, so you would expect them to bounce in a certain way. Something weird is happening though!

Run the code and watch the way that the coins interact.Use the sprite.debug block to make debug 'true' for both the sprites and run the code again.

Change the gold coin's starting x position to 51 and run the code again.Discuss with a partner: Why do you think the coins are bouncing strangely?


setColliderSprites interact based on the size and shape of their collider, not the images that are assigned to them. You can only seethe collider when debug mode is turned on. You can change the shape of the collider using the sprite.setCollider() block,

which lets you pick between a "rectangle" or a "circle". By default all colliders are "rectangle".

Do ThisFind the sprite.setCollider() block for the gold coin, and change it from "rectangle" to "circle".

Add a new sprite.setCollider() block for the silver coin, and choose "circle" for the shape of the collider.

Run the code again to see how the sprites bounce.

Levels 11-15: These levels guide students through adding collisions to the flyer game they started in the previous lesson,eventually inviting students to add their own modifications to the game.

Code Studio levelsLevels 11 12 13 14 15


BouncinessSo far, bounceOff has made sprites bounce away from other objects as fast as they bounced into them. In the real world,

almost everything slows down just a little bit when it bounces off something else. You can use the bounciness block to tell

your sprite how much to slow down or speed up when it bounces off something else.

Do This




View on CodeStudio

View on CodeStudio

View on CodeStudio

Read the code below and press "Run" to see the behavior of the basketball and pool ball.Use a bounciness block to set the bounciness of your soccer ball.

Run the code again to see how the sprites bounce off the floor.


Flyer Game - Add ObstacleThis is the flyer game you built in the last lesson. For the next several levels, you'll be adding an obstacle sprite to thegame, using some of the sprite interactions you just learned. At the end you'll have a chance to keep adding on ideas ofyour own.

Do ThisAdd an obstacle sprite to the game. You can use whatever image you like from the animationtab but the example shown here uses a sun. Right now you just need to add the sprite to yourgame and give it an animation.

Add a new sprite to your game called "obstacle".In the animation tab create a new animation for your obstacle. In the example a sun imagewas chosen.Use the sprite.setAnimation() block to give your sprite the image you chose.

Run the code and make sure the sprite appears where you want it on the screen. You may need to set its X, Y, andscale properties to get it to look the way you want.


Flyer Game - Interacting with theObstacleYou don't want your player to be able to move through the obstacle, so you'll need to use one of the sprite interactions.

Do ThisAdd code to your game that prevents your player from moving through the obstacle.If you use one of the bounce interactions, decide whether you want to reset the bounciness of your character.Discuss with a neighbor: Which sprite interaction did you decide to use? Is there more than one sprite interaction thatworks the way you'd expect?


Flyer Game - Coin Behind theObstacleRight now your coin is moving to random locations. That means sometimes it even will appear behind your obstacle, so yourcharacter can't get to it. Using sprite interactions you can fix this problem.

Do ThisAdd code to your game that prevents the coin from moving behind the obstacle. Don't be afraid to try out ideas just to see




View on CodeStudio

how they work.Discuss with a neighbor: Which sprite interaction did you decide to use? Is there more than one sprite interaction thatworks the way you'd expect?


Flyer Game - Change CollidersRight now your colliders are all rectangular. Switch them over to circles to get more interesting and realistic bounces andcollisions.

Do ThisUse the sprite.setCollider() block to change the colliders of your sprites to circles.

Set your sprites' debug properties to true to make sure your game is working the way you want.

Play your game to make sure it's working the way you want.

Wrap Up (10 mins)

Share Out and Journal 3-2-1Share: Allow students time to play each other's flying games. Ask them to focus not just on the new behavior that theyadded but also the code they used to create it.

Journal: Have students write and reflect about the following prompts.

What are three things you saw in someone else's game that you really liked?What are two improvements you'd make to your game if you had more time?What's one block you'd like to have in Game Lab, and how would it work?






UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 19: FunctionsGame Lab

OverviewStudents learn how to create functions to organize their code, make itmore readable, and remove repeated blocks of code. An unpluggedwarmup explores how directions at different levels of detail can beuseful depending on context. Students learn that higher level or moreabstract steps make it easier to understand and reason about steps.Afterwards students learn to create functions in Game Lab. They willuse functions to remove long blocks of code from their draw loop andto replace repeated pieces of code with a single function. At the endof the lesson students use these skills to organize and addfunctionality to the final version of their side scroller game.

PurposeIn the first four lessons of this chapter students have learned to use anumber of abstractions in their programs, including the velocityproperties, isTouching, and collisions. These abstractions haveallowed them to build much more complex programs while ignoringthe details of how that behavior is created. In this lesson studentslearn to build abstractions of their own by creating functions.

Students will primarily use functions to break code into logical chunksthat are easier to reason about. This foreshadows the chapter'stransition from building technical skill to the organizational processesused to develop software.

AgendaWarm Up (10 mins)

High Level vs. Low Level Instructions

Activity (60 mins)Wrap Up (10 mins)


Create and use functions for blocks of codethat perform a single high-level task within aprogramCreate and use functions to remove repeatedblocks of code from their programsCreate and use functions to improve thereadability of their programsExplain how abstractions allow programmersto reason about a program at a higher level

VocabularyFunction - A named group of programminginstructions. Functions are reusableabstractions that reduce the complexity ofwriting and maintaining programs.

Introduced CodeDefine a function

Call a function

DiscussionGoal

Goal: This conversations demonstrates to students thatthey often use a high level name or description for muchmore complex behavior. It is motivating the value ofgrouping or combining lots of smaller steps under a largername and provides some of the justifications for creatingfunctions within programs. Namely, high level steps makeit easier to understand and reason about a process.

Content Corner

Breaking Down Processes: The order in which they arebreaking down a larger task here also mirrors how they'llbe asked to write code with functions. Often programmersfirst write the name of the function they intend to writebased on what it should do before actually going in andwriting the details.


High Level vs. Low Level InstructionsPrompt: Imagine you needed to write a 5-step set of instructions for going through your morning. What would they be?Write down your steps and be ready to share.

Discuss: Student should write 5-step instructions fortheir morning and share with a neighbor. Ask a couple ofstudents to share with the class.

Prompt: This set of instructions is pretty easy to followand understand. They're at the level you might thinkabout when describing your day to a friend. Now let's goa level deeper. Pick one of your 5 steps and split it into 5smaller steps you need to complete that larger task. Beready to share your ideas again.

Discuss: Students should share their smaller steps.Again ask some volunteers to subsequently share theiroriginal step and how they split it up.

Discuss: This is getting interesting. It seems like the firsttime we gave our steps we were "hiding" some of thedetails necessary to complete the task. Let's try this oncemore. Take one of your 5 smaller steps and split it upagain into 5 even smaller steps.

Discuss: Ask students to share their steps one more time. Again ask some volunteers to share how they broke up one oftheir steps into even smaller steps.

Prompt: Imagine we had split every one of your first 5 steps into 5, and then split all of those steps again. This wouldmean we would have a high level set of instructions, and at the bottom a really low-level or detailed set of instructions. Beready to respond to the following questions.

When would the high level set of steps you just wrote be most appropriate?When would the lowest level set of steps be most appropriate?Which one is easiest to reason about or understand?

Discuss: Ask students to share their thoughts and opinions. After a couple of minutes move the conversational to thetransitional comment below.

Remarks

Sometimes details are important, but often high level steps are much easier to reason about and make it clear what'shappening. In programs the same thing is true. We've learned that blocks like velocityX or isTouching actually just containcode that we could've written ourselves. Using these commands, or abstractions, is really helpful since we can thinkabout code at a high level. Today we're going to learn how to group lots of commands to create a single new block ourown. In programming when we create a new block like this we call it a function.

Activity (60 mins)

Transition: Move students into Code Studio where they will learn to create an call functions.

Code Studio levels

View on CodeStudio

TeachingTip

Introducing Functions

In these first several lessons students are just beingshown the syntax of functions and are not asked to write orcreate their own. It can be useful to explain creating afunction as basically “creating a new block” just likeanother programmer created the “isTouching” or “velocity”blocks that they’ve seen actually contain other morecomplex code.

View on CodeStudio

View on CodeStudio


Levels 2 3 4 5 6 7 8 9 10 11


Calling FunctionsFunctions let you build your own blocks and decide whatcode goes inside of them. This is the command that letsyou create a new function.

You use or "call" your function like any other block byusing the name you gave it.

The blocks to create and call functions can be found in the "Functions" tab of the palette.

Do ThisThis program has already created 2 functions. Only one of them is being called.

Call the second function to reveal the full image. Use the function that is being called as a guide.Tip: Just as with all other blocks, spelling and capitalization are important here.


Reordering CodePlacing code inside functions makes it easy to read and make changes to. Good names for functions indicate what yourprogram is doing to a reader. You can call your functions in a different order to quickly make significant changes to howyour program runs.

Do ThisThis program has already created 4 functions that draw parts of a scene. Unfortunately it's not coming out right.



https://images.code.org/2493f74065d4e642ca51429b8832e431-image-1474913839061.17.09 PM.png

https://images.code.org/61a6eb716e263b580ecd63fab0de7547-image-1474913770359.16.00 PM.png

https://images.code.org/a570a05be61297ee9f0d79a02df8db6e-image-1474922721897.44.36 PM.png


View on CodeStudio

View on CodeStudio

View on CodeStudio

TeachingTip

Why Use Functions

This and the next two levels introduce three uses offunctions, namely removing repetition in programs,allowing code to quickly be changed at multiple points, andproviding organization in code. Students will need to writemore of their own functions in these levels.

View on Code

Read the 4 functions to know what they doCall the functions in an order that draws the scene in the way that looks best to you


The red square will be drawn but the green one will not. You cannot call functions after they arecreated.

The green square will be drawn but the red one will not You cannot call functions before they arecreated.

Both squares will be drawn. You can create functions anywhere you like in yourcode.

Neither square will be drawn. There is an error in thecode.


Calling Functions in the Draw LoopYou can call a function inside the draw loop, just as you would anywhere else in your code.

Do ThisA function that will draw a background has been created for you. A sprite has been created to move across the background.

Call the function inside the draw loop so that the sprite appears on top of the background.Note: Don't create functions inside the draw loop. Make them at the bottom of your code.


Calling Functions Multiple TimesYou'll often want to use the same code at many places inyour program. Once you've created a function you cancall it as many times as you like.

Do ThisThis code creates a sprite that moves across the screenonce. How can you make it go back across the screen?

Note: The function is already called once at the beginning of your programRead the condition of the if-statement inside the draw loop. Why do you think it's there?Use this if-statement and the function written for you to make the sprite move across the screen multiple times.






Studio

View on CodeStudio

View on CodeStudio

TeachingTip

Functions in Context

In this and the next two lessons, students will usefunctions to organize code within a simple game. While it isnot identical to the side scroller, many of the skills anduses of functions in these levels can and should be usedwhen they complete their side scroller.

View on CodeStudio

Making Changes to FunctionsA nice benefit of using functions to remove repeated code is that you can now easily make changes to multiple places inyour code. Just change how you create the functions, and your program will now use the new code everywhere yourfunction is called.

Do ThisMake changes to the setFlyer function so that the flyer starts at a random Y location between 0 and 400, and moves at a

random velocity every time he is reset.


Creating Functions to OrganizeCodeIn Game Lab all the action is happening in the draw loop, but too much complex code makes it really confusing to read. Tokeep your draw loop easy to read, use functions for larger chunks of code. You can call them inside the draw loop anddefine them below. This is a really good example of using abstraction to think about problems at a high level and worryabout details later.

Do ThisThis program should draw a daytime scene or a nighttime scene, depending on the location of themouse. The draw loop describes what needs to happen but one of the functions hasn't been writtenyet.

Write the drawNight function which has been created but is empty.

Hint: Look at the picture to the right for how your night image should look. Can you use the drawDay function to help you

at all?


Write Your Own FunctionTime to practice writing functions of your own. This is avery simple game in which coins fall from the sky and thebunny tries to catch them. All you need to do is write thefunction that sets up the coin.

Do ThisRead and run the code that already exists to make sure you know how it works.Write the code for the setCoin function to make the coin fall from the sky.

You can go look at some of the previous levels if you need help.


Catch the Coin, Increase the Score




View on CodeStudio

DiscussionGoal

Goal: Use this first prompt to review what studentslearned today. When they create a function they arecreating their own block that they can call or use wheneverthey like. They saw at least two primary motivations forcreating functions today including.

Simplifying code by breaking it into logically namedchunksAvoiding repeated code by making one block you canuse multiple times.

DiscussionGoal

Goal: Students should review the definition of abstractionas "a simple way of representing something complex".Note that a function is an abstraction because it allows youto create one simple name for a more complex block ofcode.

Let's make that score change now, too, to complete the game. You'll need to be able to tell when the bunny is touching thecoin and then reset it.

Do ThisUse an if-statement and the isTouching block to increase the score when the bunny catches the coin.Make sure you're calling your function to reset the coin once it's been caught.Play the game and randomize the velocity of the coin to a range that you think is fun.


Change the Background with theScoreOnce you've caught 10 coins it's time to celebrate. You should change the background to be something fun.

Do ThisUse an if-statement and two separate functions to draw your backgrounds.Then go write your functions outside your draw loop. You get to decide what a "simple" or"crazy" background are. Have fun with it!

Wrap Up (10 mins)

Prompt: Why would we say that functions allow us to"create our own blocks?" Why is this something we'dwant to do?

Discuss: Have students discuss at their table beforetalking as a class.

Prompt: Write down your own definition of anabstraction? Why would a function count as anabstraction?

Discuss: Have students discuss at their table beforetalking as a class.

Remarks

Functions are a useful tool for helping us write andorganize more complex pieces of code. As we startlooking to end of the unit and your final project, beingable to keep your code organized will be an importantskills.






UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 20: The Game Design ProcessGame Lab

OverviewThis lesson introduces students to the process they will use to designgames for the remainder of the unit. This process is centered arounda project guide which asks students to define their sprites, variables,and functions before they begin programming their game. In thislesson students begin by playing a game on Game Lab where thecode is hidden. They discuss what they think the sprites, variables,and functions would need to be to make the game. They are thengiven a completed project guide which shows one way to implementthe game. Students are then walked through this process through aseries of levels. As part of this lesson students also briefly learn to usemulti-frame animations in Game Lab. At the end of the lessonstudents have an opportunity to make improvements to the game tomake it their own.

PurposeThis lesson introduces multi-frame animations, and is the first in asequence centered around the process of building software.

While previous lessons focused on using abstractions to manage thecomplexity of the code, this lesson focuses on managing thecomplexity of the software development process. The lesson heavilyscaffolds the software development process by providing students acompleted project guide, providing starter code, and walking studentsthrough its implementation. In the subsequent lessons students willneed to complete a greater portion of this guide independently, and forthe final project they will follow this process largely independently.


Play Cake DefenderStop: Review Project Guide

Activity (60 mins)

Multiframe AnimationsImplement Project Guide

Wrap Up (20 mins)

Make It Your Own


Identify core programming constructsnecessary to build different components of agameCreate and use multiframe animations in aprogramImplement different features of a program byfollowing a structured project guide

PreparationPrint copies of the Defender Game -

Project Guide if you will be giving studentsphysical copies (see notes in Lesson Plan)


For the Students

Defender Game - Project Guide

Make a Copy

https://docs.google.com/document/d/10tgS4d9feduPveRZSMzWV0TdyL6AL5VHHGFy_-m2XNQ/edit?usp=sharing


View on CodeStudio

Teaching Tip

Keeping Focus: Students can easily get distracted bythe fun of playing the game. Let them play for a while buteventually encourage them to follow the on-screeninstructions and make a list of the variables, sprites, andfunctions that would be necessary to play the game.

DiscussionGoal

Running the Conversation: You can write "Variables","Sprites", and "Functions" on the board and record theirideas below each. Ask students to justify their decisionsbut don't feel the need to settle on one right answer.


Play Cake Defender Transition: This lesson begins immediately in Code Studio. On the first level they will be find a game but will not beable to see the code. They should play the game and follow the instructions which ask them to list the variables, sprites,and functions they think are necessary to create this game.

Code Studio levelsSample Game Student Overview

Defend Your Cake!This is an example of a defender game that you'll build by the end of this lesson. To defend your cake, move the alien witharrow keys to block the lady bugs and push them into the water.

Do ThisTurn to a classmate and make a list of the following information.

How many sprites are there in this game. Which are they?What variables are needed to make this game? What do they store?If you were to split the code of this game into functions what do you think they would be? What are the major pieces ofbehavior you'd need to create in your code?

Stop: Review Project GuideDiscuss: Students should have individually created a listof variables, sprites, and functions they would create tomake the defender game they played. Ask students toshare their lists with a neighbor before discussing as aclass.

Distribute: Give each student or pair of students a copyof the Defender Game - Project Guide

Prompt: Compare the components of the game you thought would be included to the ones on this project guide. Do younotice any differences?

Discuss: As a class compare the list you had on the board to the list of variables, sprites, and functions on the projectguide. Note the similarities. Where there are differences try to understand why. Don't approach one set as "right" vs."wrong" but just confirm both would be able to make the game students played.

Remarks



View on CodeStudio

View on CodeStudio

View on CodeStudio

Teaching Tip

Project Guide: The project guide is intentially filled outfor students so that they can experience using it as areference when programming. This should give them morecontext when filling out their own project guide in the nexttwo lessons.

You can give each student their own copy for reference,but you might also choose to print one copy per pair,share digital copies, or just display the guide on theprojector. So long as it is available for reference, anyapproach will work fine.

There's usually lots of ways you can structure a program to get it to work the way you want. The important thing whenwriting complex or large programs is that you start witha plan. Today we're going to look at how we couldimplement this plan to build our own defender game. Bythe end of the lesson you'll not only have built yourgame, but you'll know how to change it and make it yourown. Let's get going!

Activity (60 mins)

Multiframe AnimationsTransition: Students should move back to Code Studio.Before actually implementing the plan students will need to quickly review one new skill, how to use multiframe animations.Students will quickly learn how to create, modify, and rename animations as well as pick them from the library.

Code Studio levelsPlan Your Project Student Overview

StopBefore you move on you'll need to look at the Project Guide for this project. Wait for instructions from your teacher as well.

Levels 4 5


Using Multiframe AnimationsIn the sample defender game the sprites themselves were animated. Before getting started on programming this game,take a minute to get familiar with this new way of animating sprites.

Do ThisThis program already includes several sprites but they don't yet have any animations.

Go to the Animation Tab and check out the multi-frame animations already added to your project. Choose one for eachof your characters.Remember you can use setAnimation to give your sprites animations you've created in the Animation Tab.


Slow DownNice work! Time to start learning how to control these multiframe animations.

Do ThisYour sprites should be animated but they're moving really quickly.




View on CodeStudio

View on CodeStudio

Head back to the Animation Tab. Underneath each animation you should see a slider.

Use these sliders to slow down your animations so they look more realistic.

Implement Project GuideStudents are given a large amount of starter code in this project. The sprites, variables, and functions have all already beengiven to them. The work of this project is writing the code for the individual functions. These levels guide students throughhow to implement those functions. As students move through the levels point out how the project guide is being used.

The most challenging skill students use in these levels is recognizing the need to create new functions to replace repeatedcode. Students need to build this skill on their own but these levels demonstrate an instance where this might happen.

Code Studio levelsLevels 6 7 8 9 10 11 12 13 14 15 16


Editing Multiframe AnimationsYour sprites will look a lot more realistic if they turn around when they're moving. You can switch back and forth betweenmultiframe animations when the user presses different keys.

Do ThisRead this code and run the program. Make sure you know how the sprite responds to the arrow keys.

In the Animation Tab, create a copy of the alien animation by clicking the following button:

Use the tool to flip your animation. Make sure you flip both frames using this button:

Rename your new animation.Use your new animation and old animation so that the alien faces the correct direction when moving. Where do you thinkyou'll need to set the sprite's animation in your code?


Getting Started: Set AnimationsYou should have already reviewed the planning guide for this project. A lot of the work to turn this project guide into aworking game has already been started. Based on the project guide you're going to do the rest of this work.

Do This

https://images.code.org/169e11c1f6f55b607937fe9cb7e5e390-image-1476209267457.07.26 AM.png


https://images.code.org/aee81f9cd3f63bb8a9c91ac3ab250a87-image-1475699896387.38.09 PM.png

https://images.code.org/3b10b4a612f9a7c640dc7bb18f4c2b91-image-1475699599617.33.03 PM.png


View on CodeStudio

View on CodeStudio

View on CodeStudio

Before we get started you'll want some better animations for each of your sprites.

In the Animation Tab are animations for each of your sprites. Go look at what they are.In your code give each sprite its appropriate animation. Use the ones provided for now but later you'll be able to gochange them.Head to Level 4 if you need help remembering how to do this.


Moving The EnemiesIt's time to start writing the code that will move your sprites. To begin you'll need to get your enemy sprites to a randomposition and moving across the screen.

Do ThisAt the top of your program, after you create each enemy sprite, write code that will move it to the correct position and give itthe correct velocity.

Use sprite.x to set the x position to 0.

Use sprite.y to set the y position should be a random number between 150 and 250.

Use sprite.velocityX to set the x velocity to 2.

Test your program. Your enemy sprites should now be moving across the bridge.


Touching the CakeIf the enemies get all the way across to the cake you should place them back at the left side of the screen and decrease thescore. To start you'll write code for only one of your enemies .

Do ThisInside the enemiesTouchCake function you'll need to write code that checks when a ladybug is touching the cake, resets its

position, and changes the score.

Use an if and isTouching to detect whether enemy1 has touched the cake.

Inside your if block place code that:

sets enemy1's x position back to 0.sets enemy1's y position to a random number between 150 and 250.uses the counter pattern to decrease the score by 2.

(Hint: You can reuse some code you already wrote )

Test your code. One of your ladybugs should now reset when it gets across to the cake, and the score should go down by2.


Touching the Cake: SecondLadybugYour first enemy sprite should now be resetting when it gets to the cake. Now you'll want the other ladybug to reset as well.




View on CodeStudio

View on CodeStudio

View on CodeStudio

Do ThisInside the enemiesTouchCake function you should have written code that resets enemy1 .

Copy the entire if-statement you wrote in the last level (Ctrl-C).Paste the code inside of the enemiesTouchCake function, just below the last one (Ctrl-V).

Change the name of the sprite in that code from enemy1 to enemy2 .

Test your code. Now both bugs should reset when they touch the cake.


Creating FunctionsYour program now includes code in two places to set the enemies on the left side ofthe screen at a random y location. You can create functions to reset each of your twoenemies to remove repetitions from your program. This will make your program easierto read, allow you to change it more easily, and allow you to quickly reset your spritesat other points in your program if you need to.

Do ThisAt the bottom of your program create two new functions, setEnemy1 and setEnemy2 .

Inside each of these functions place the code that sets the enemies on the left side of the screenand gives them a random y position.Wherever the code for setEnemy1 and setEnemy2 appears in your program replace them with a call to the functions you

just created.


Moving Left and RightNow that your enemy sprites are moving correctly, it's time to write the code to move your player. For now you'll just need toget your character moving left and right and changing its animations.

Do ThisFor this level you'll be writing code inside the movePlayer function.

Use an if block along with keyDown to detect when the "right" arrow is pressed.

Use sprite.x and the counter pattern increase the player's x position by 3.

Use another if block to move the player to the left when the "left" arrow is pressed. This time you'll need to decrease the

player's x position.

Test your game. Your character sprite should now move left and right when you press the left and right arrows.


Moving Up and DownYou'll want your player sprite to move up and down as well.




View on CodeStudio

View on CodeStudio

View on CodeStudio

Do ThisFor this level you'll still be writing code inside the movePlayer function.

Use an if block along with keyDown to detect when the "up" arrow is pressed.

Use sprite.y to increase the player's y position by 3 using the counter pattern.

Use another if block to move the player down when the "down" arrow is pressed.

Test your code. Your character should now move in all 4 directions.


Change Player AnimationsRight now your player is always facing the same direction. You can make things look a lot more realistic by switchingbetween animations. Your player should switch between a left-facing and right-facing animation depending on which keywas last pressed. Remember, you can quickly copy and edit animations inside the Animation Tab.

Do ThisInside the Animation Tab copy the animation of your player sprite.Flip each frame of the new animation so that the sprite is facing in the opposite direction.Rename your new animation.Use the setAnimation command inside the movePlayer function so that the player changes the direction it is facing when

the "left" and "right" arrows are pressed.


Displace EnemiesIt's time to write code for some more sprite interactions. Your player sprite should displace the enemy sprites.

Do ThisFor this level you'll be writing code inside the displaceEnemies function.

Write code that makes player displace both enemy sprites.Test your program to make sure your player is displacing enemies but they keep moving right after the player movesaway.

Hint: You can use sprite.debug to see your sprites' colliders if you need to debug your program.


Touching the WaterThe last part of the game that you'll need to write is the code to reset the sprites when they touch the water. Luckily youshould have already written functions that reset each sprite, so you'll just need a good way to know when either spriteleaves the bridge. Start by writing the code for a single enemy and then copy-paste and make small changes to create codefor your second enemy.

Do This




View on CodeStudio

For this level you'll be writing code inside the enemiesTouchWater function.

Use an if statement to check whether enemy1 is off the top of the bridge by checking whether its y value is below 140.

Within your if statement:use your setEnemy1 function to reset the sprite.

add 1 to the score.Use an if statement to check whether enemy1 is off the bottom of the bridge by checking whether its y value is above260. Within your if statement:

use your setEnemy1 function to reset the sprite.

add 1 to the score.Test your program for the first enemy sprite. Make sure the sprite is resetting and the score goes up.Once it is working copy and paste the code you wrote to create the same behavior for enemy2 . You'll need to change

the name of the sprite and the name of the functions you use.

Wrap Up (20 mins)

Make It Your OwnThis last level encourages students to make the game their own. If students have made their way to this point they have allthe skills they need to progress through the curriculum, so there is no pressure to complete any of the modificationssuggested in this level. If you have time, however, getting practice planning and implementing new features will be a usefulskill. Even just modifying the animations of the game is an easy way students can make the game their own.



Make It Your OwnYou just walked through someone else's plan for creating a game, so now it's time to make it your own. What additionalfeatures or challenges do you want to create?

Do ThisSelect one of the challenges below to add to the game or come up with a challenge of your own.

Change the visuals of the game so that your player, enemies, or cake look different.End the game when the enemies get to the cake and print the score. For an extra challenge end the game only after 3enemies get through.Randomize the speed of the enemies.Create a new background that shows up when players reach a higher score.

Share: Once students have completed the project they can share their work with their classmates. Encourage students toshowcase the additional code they wrote and explain how it has changed the way the game works.






UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 21: Using the Game Design ProcessGame Lab

OverviewIn this multi-day lesson, students use the problem solving processfrom Unit 1 to create a platform jumper game. They start by looking atan example of a platform jumper, then define what their games willlook like. Next, they use a structured process to plan thebackgrounds, variables, sprites, and functions they will need toimplement their game. After writing the code for the game, studentswill reflect on how the game could be improved, and implement thosechanges.

PurposeStudents have already learned all of the programming constructs thatthey need to make a game. This lesson reviews many of thoseconcepts while introducing them to a structured process that will helpthem to manage the work. It builds on the use of the Project Guide inthe previous lesson by having students complete more of this projectguide independently before using it to build a game. This activityprepares students to write their own game from scratch for the finalproject.

AgendaWarm UpActivity

Play Alien JumperDiscuss Project GuideShare out

Wrap Up

Journal


Identify core programming constructsnecessary to build different components of agameImplement different features of a program byfollowing a structured project guide

PreparationPrint one copy of Planning Your

Platform Game - Project Guide for eachstudent or pair of students


For the Teacher

Planning Your Platform Game - Exemplar

For the Students

Planning Your Platform Game - ProjectGuide Make a Copy

https://docs.google.com/document/d/1-h8vfW6PfppsDKKqVeVDMU6FxbPP8tA1Up_oc5_p9Dk/edit



DiscussionGoal

Goal: Students should share their thoughts but if it doesn'tcome up naturally then suggest the examples provided.This discussion will motivate the use of the project guidefor building a game later in the lesson.

View on CodeStudio

Teaching GuideWarm Up

Prompt: The Problem Solving Process helps us work through all kinds of problems. Think about the problem of building alarger piece of software, like the game we built in the last lesson. What did each of the 4 steps look like? Why were theyimportant?

Discuss: Students should brainstorm quietly and writedown what each step might be. Afterwards, lead a shareout discussion. You can record ideas on the board.Possible parts of each step include:

Define: Figuring out what you want the game to looklike, how it should work, who will play it.Prepare: Plan ahead what your code will look like.Decide on a structure for your game.Try: Write the code following your plan.Reflect: Test your code, play the game to make sure it works, get feedback from other people to make the game better.

Remarks

When you build software, the problem solving process can be a helpful guide. Obviously we need to write the code, butbeing careful to define what you want to build, making a good plan to build it, and reflecting afterwards on how to improveit are all part of making good software. Today we’re going to use this process to make a new game.

Activity

Play Alien JumperDistribute: Give each student a copy of Planning Your Platform Game - Project Guide

Remarks

We're going to be building a jumper game today. You'll have a chance to play a sample game, then plan out how youwould create the game on your Project Guide.

Move students to Code Studio. On the first level they will be find a game but will not be able to see the code. Theyshould play the game and follow the instructions which ask them to list the variables, sprites, and functions they think arenecessary to create this game.

Code Studio levelsSample Platform Jumper Game Student Overview

Platform JumperThe game on the left is an example of a platform jumper. Press "Run" to play it. You can make the alien jump with the uparrow, and move it to the left and right with the arrow keys. You score by collecting stars, and if you score high enough, thebackground will change.

You already know how to use all the blocks you need to make a game just like this one, and you'll be making your ownplatform jumper in this lesson.

Discuss Project Guide



View on CodeStudio

View on CodeStudio

Teaching Tip

Making the game will take at least two class periods. Ifthere's not enough time for all students to finish the lesson,groups of students can work to to code different aspects,then share their code with each other. For example, onegroup could work on the platforms, one on the stars, andanother on the player. Student who have finished early canchoose more challenges from the later levels.

Circulate: Students should complete the project guide in the style of the one they saw in the previous lesson. They willlikely want to keep the game up as they try to determine the behavior each of the sprites will have.

Share: Students share out their plans for making the game. Reassure them that there are many correct ways to make thesame piece of software, and that they will have a chance to try out theit ideas in code studio.

Code Studio levelsCSD U3 platform intro_2018 Student Overview

Build a Platform JumperIn the next several levels, you'll be building a platform jumper game. Before you move on you'll need to look at the ProjectGuide for this project. Wait for instructions from your teacher before clicking to the next level.

Levels 4 5 6 7 8 9 10 11 12 13 14 15 16


BackgroundThe first thing that you will create for your game is the background. The sample game had two different backgrounds thatwere chosen according to the user's score. The first background has already been created for you. Look at thebackground1 function in the code below to see how it works. (Show me where )

In order for the background function to do something, you have to call it inside the draw loop. (Show me where )

There is also an empty function named background2 . (Show me where ) You will need to fill that function with new code to

make a different background, then test the code by calling the function inside the draw loop.

Do this



View on CodeStudio

View on CodeStudio

View on CodeStudio

View on Code

Read the code for background1 .

Fill the background2 function with new code for a second background.

Test your background2 function by calling it inside the draw loop.

Hint: It's much easier to copy, paste, and make small changes to your code in text mode.


Score VariableNow that you've created your backgrounds, you'll need to choose when each background is drawn. For that, you'll need ascore variable to hold information about your player's score.

You should always give your variables a starting value at the very beginning of the program. That way, they are available forany code that comes after.

Do ThisCreate a score variable at the beginning of your game program. ( Show me the block )Set the score equal to 0.


Choosing your BackgroundNow that you have your score variable, you can use it to choose the right background for your game. You can see anexample of changing your background according to your score in Lesson 19 Level 11

Do ThisInside the draw loop, use an if statement and your two background functions to draw your background according to your

score level.Test your code by changing the start score to 100, then running to code to see whether the background changes.

Challenge: If you have a third background, you can click the plus sign at the bottom of the if block.Another space will appear for your third background function, as well as a place to check the score again.


Make the ScoreboardYou'll also need a scoreboard so the player can keep track of the score. There's already a showScore

function written, but it only shows the text "Score" and not the actual score. (Show me where ) Youcan see an example of a working scoreboard in Lesson 16 Level 9 .

Do ThisRead the code in the showScore function.

Call the function inside the draw loop, right after you draw the backgrounds.Use the text block to display the score at the top of the screen.






Studio

View on CodeStudio

View on CodeStudio

Create a Platform SpriteNow that you have your background and your variables, it's time to create your sprites. Usually, it willbe easiest to start with the sprites that are part of the environment, such as your platforms. Thesample game had two platform sprites, but you'll make just one first, then test it before copying andpasting the code to make the second.

Do ThisLook at your worksheet and choose a platform sprite to create.In the "Create sprites" area at the top of your code, create your new sprite with the createSprite block, giving it the

correct position and label (name). (Show me the block )Use the setAnimation and velocityY blocks to give your sprite the correct image and downward velocity.

Test the sprite to make sure that it's moving in the correct way. You might need to adjust its velocity.

Hint: The sprite will go off the screen and not come back. You'll make it loop back around in the next level.


Loop the Platform SpriteRight now, your platform sprite moves down, but it doesn't loop back up to the top of the screen. Youcan look at Lesson 15 Level 13 to see an example of a sprite looping around a screen.

Do ThisUse the function block to create a loopPlatforms function at the bottom of your code.

Use the if block inside the function to check whether the platform has gone off the bottom of screen and, if it has, move

it back to the top of the screen.Call the function inside the draw loop, in the "update sprites" area.Run the code to test your sprite.

Hint: What will platform.y be when the sprite moves off the bottom of the screen? What should platform.ybe when you put it back at the top of the screen?


Make your Second PlatformMaking a second platform will be easier than making the first, because you can copy and paste a lotof the code, then make a few small changes. This is a lot easier in text mode, so be sure to try it outif you haven't already.

You'll need to copy two parts of your code: the part at the beginning where you made the platform, andthe part in your loopPlatforms function, where you looped the platform back to the top of the screen.

Do ThisCopy the code you used to create the first platform sprite (createSprite , setAnimation , and velocityY ), and paste it directly

beneath the original code.Change the names of the sprite in the new lines. For example, if you named your original sprite "platform", you couldname this one "platform2".



View on CodeStudio

View on CodeStudio

View on CodeStudio

Change the starting position of your new platform sprite.Inside your loopPlatforms function, copy the if statement, then paste it directly underneath the original code, inside the

function.Change the sprite name in the new lines of code.Run your code to test it.

Challenge: You can make your platforms appear at random x positions when they loop back to the top ofthe screen.


Create an ItemNext, you need to add the items that fall from the top of the screen. These move just like the platforms,but faster. In order to make the game more interesting, the items start at a random location above thescreen. For the sample game, the item's x position is a random number between 50 and 350, and they position is a random number between -30 and -60.

Do ThisUse the createSprite block to make an item sprite in the "create sprites" section of your code.

Use the randomNumber block inside your createSprite block to start the item at a random x and y position.

Use setAnimation and velocityY to give your sprite the correct image and make it fall from the top of the screen.

Run the code to test your sprite.


Loop your ItemNow that your item is falling, you can add code to loop it back to the top. This is similar to what you didfor the platform sprite, but the item sprite will loop back to a random x and y location when it goes tothe top of the screen.

Do ThisCreate a loopItems function that uses an if block to check whether the item sprite is off the bottom of the screen, then

sends the item back to a random x and y position, just as it did when you first created the sprite.Call the function inside the draw loop.Run the code to test your sprite.


Make your Second ItemNext, you'll copy and paste the code for your first item to create a second item. Remember that this isa lot easier in text mode, so be sure to try it out if you haven't already.

You'll need to copy two parts of your code: the part at the beginning where you made the item, and thepart in your loopItem function, where you looped the item back to the top of the screen.

Do This




View on CodeStudio

View on CodeStudio

View on CodeStudio

Copy the code you used to create the first item sprite (createSprite , setAnimation , and velocityY ), and paste it directly

beneath the original code.Change the names of the sprite in the new lines. For example, if you named your original sprite "star", you could namethis one "star2".Inside your loopItems function, copy the if statement, then paste it directly underneath the original code, inside the

function.Change the sprite name in the new lines of code.Run your code to test it.


Create your PlayerNow you can create your player sprite. Just like the item sprites, the player sprite will fall from the topof the screen. Unlike the items, your player sprite will get faster as it falls, just like real falling objects.This is what allows it to jump up, and fall back down.

Do ThisUse the createSprite block to make a player sprite with the label and starting position that you put on your worksheet.

Use setAnimation to give it the correct image.

Create a playerFall function that makes the sprite fall from the top of the screen. The code inside the function should use

velocityY in a counter pattern, just as when you made the falling rock in Lesson 17 Level 4.

Call the playerFall function inside the draw loop.

Run the code to test your sprite.


User ControlsNext, you should add user controls so that you can move your player around. Your player needs to move to the left whenthe left arrow key is pressed, to the right when the right arrow key is pressed, and jump when the space bar is pressed.

Do ThisCreate a new controlPlayer function in the "functions" area of your code.

Inside the controlPlayer function, use the if , keyDown , and sprite.x blocks to make your player move to the left and right

according to the arrow keys. Look at Lesson 12 Puzzle 7 for examples.Inside the controlPlayer function, use the if , keyDown , and velocityY blocks to make your player jump when the up

arrow is pressed. Look at Lesson 15 Puzzle 11 for an example.Call the controlPlayer function inside the draw loop.

Run the game and test your code.


Player InteractionsThe last part of making your game is programming the player interactions with the other sprites. First, your player needs toland on the platforms.




View on CodeStudio

View on CodeStudio

View on CodeStudio

Do ThisCreate a playerLands function and add it to the "functions" area of your code.

Inside the function, use the collide block so that your player can land on both the platforms.

Call the function inside the draw loop.Run the code to test your function.

Students work in pairs to create the alien jumper game.



Collect ItemsLast, you'll want your player to collect the items falling from the top of the screen.

Do ThisCreate a collectItems function and add it to the "functions" area of your code.

Use the if and isTouching blocks to change the x and y position of the items when the player touches them. You can

look at the loopItem function for clues in how to reset the item position.

Inside your if statement, add a counter pattern that will increase the score every time the player touches an item. Look

at Lesson 16 Puzzle 9 for an example.Call the function inside the draw loop, in the "update sprites" area of your code.Run the code to test your function.

Plane Jumper Student Overview

Plane JumperHere's another example of a platform jumper, but it has a few more features. You can use it to get ideas to improve yourown game. For example, there is a coin sprite that gives the player an extra life.

Choose one or more of the following changes and add them to your game. Choose new animations for your player,platform, and items. Make it impossible for your player to go off the left or right of the screen. Add a different type ofitem for the player to collect or avoid. Add a variable that keeps track of how many lives the player has, and end thegame if the player runs out.

Bunny Jumper Student Overview

Bunny JumperHere's another example of a jumper. In this one, the items get faster when they fall, and bounce off the platforms.

Choose one or more of the following changes and add them to your game. Make your player's animation changedirection when the player changes direction. Add another background and make it appear when the score gets evenhigher. * Make your items interact with the platforms in some way.




Students have an opportunity to improve their game after being exposed to two other versions of a platform jumper.

Share outShare: Students share their games with their classmates.

Wrap Up










UNIT

3Ch. 1 1 2 3 4 5 6 7 8 9 10 11 12 13

14 Ch. 2 15 16 17 18 19 20 21 22

Lesson 22: Project - Design a GameGame Lab | Project

OverviewStudents will plan and build their own game using the project guidefrom the previous two lessons to guide their project. Workingindividually or in pairs, students will first decide on the type of gamethey'd like to build, taking as inspiration a set of sample games. Theywill then complete a blank project guide where they will describe thegame's behavior and scope out the variables, sprites, and functionsthey'll need to build. In Code Studio, a series of levels prompts themon a general sequence they can use to implement this plan. Partwaythrough the process, students will share their projects for peer reviewand will incorporate feedback as they finish their game. At the end ofthe lesson, students will share their completed games with theirclassmates. This project will span multiple classes and can easily takeanywhere from 3-5 class periods.

PurposeThis lesson is the culmination of Unit 3 and provides students anopportunity to build a Game Lab project of their own from the groundup. The scaffolding provided by the project guide and the practicethey have using it are intended to assist students in scoping theirprojects and seeing their ideas through to completion. This project isan opportunity to showcase technical skills, but they will also need tocollaborate with their partner, provide constructive peer feedback, andrepeatedly use the problem solving process as they encounterobstacles along the way. This project should be student-directedwhenever possible, and provide an empowering and memorableconclusion to the first unit of CS Discoveries.


Review Project Guide

Activity (80-200 mins)

Define - Scope GamePrepare - Complete Project GuideTry - Write CodeReflect - Peer ReviewIterate - Update Code

Wrap Up (10 mins)

ShareReflect


Independently scope the features of a piece ofsoftwareCreate a plan for building a piece of softwareby describing its major componentsImplement a plan for creating a piece ofsoftware

PreparationPrint copies of Make Your Own Game -

Project Guide, one for each student / pair ofstudents

Print copies of Make Your Own Game -Rubric, one for each student / pair ofstudents

Print copies of Make Your Own Game -Peer Review, one for each student / pair ofstudents

Review sample games in Code Studio


For the Students

Make Your Own Game - Project Guide

Make Your Own Game - Rubric

Make Your Own Game - Peer Review

Make a Copy

Make a Copy

Make a Copy

https://docs.google.com/document/d/1SBye25XfdnytxCrc6a_OtpcS02YsT99nyJ9Vjwp_zeo/edit?usp=sharing

https://docs.google.com/document/d/1WChOizSb4gZsEbdER5KwYXj9c6Ogpeuv0AzegJ5HD8A/edit

https://docs.google.com/document/d/1ORjDuRep39xwiFaz20_jF74eWB63FVtK2FIQhq7Wecg/edit


https://docs.google.com/document/d/1WChOizSb4gZsEbdER5KwYXj9c6Ogpeuv0AzegJ5HD8A/edit


View on CodeStudio

View on CodeStudio

View on CodeStudio


Review Project GuideGroup: This project can be completed individually or in pairs. At your discretion you may choose to have students formlarger groups as well.

Distribute: Each student or group of students should be given a copy of Make Your Own Game - Project Guide . As aclass review the different steps of the project and where they appear in the project guide. Direct students towards the rubricso that they know from the beginning what components of the project you will be looking for.

Activity (80-200 mins)

Define - Scope GameCirculate: Students should spend the first 15-20 minutes playing the sample games, reviewing past work, and discussingas a group the type of game they'd like to build. If they want they can sketch ideas on scratch paper or in

Prepare - Complete Project GuideCirculate: Once students have discussed their ideas for the project they should complete the Make Your Own Game -Project Guide. While this should be a fairly familiar process, encourage students to make each component as clear anddetailed as they can at this point. Planning ahead can help them identify issues in their plan before they'll need to makemore significant changes to their code.

Try - Write Code Transition: Students are now ready to program their games on Code Studio. These levels provide some guidance onhow students may go about implementing their Make Your Own Game - Project Guide . None of the steps aresignificantly different from what students have seen from the previous two lessons. If they wish, students can work in adifferent order than the one suggested in these levels.

Code Studio levelsLesson Overview Teacher OverviewStudent Overview

Make Your Own Game - Project Guide Exemplar (PDF | DOCX)Make Your Own Game - Peer Review Exemplar (PDF | DOCX)

Design Your Game Student Overview

Create your own gameNow that you have all the skills you need, it's time to make your own game!

With a partner, brainstorm some different ideas for your game. You can think about the games you've already seen, or lookat some more sample games to give you ideas.





https://docs.google.com/document/d/1T4Br-iQAhFnuoey6QvhdYRQ7X0uPKwjAhlalAQf8Bxc/edit?usp=sharing

https://docs.google.com/document/d/1T4Br-iQAhFnuoey6QvhdYRQ7X0uPKwjAhlalAQf8Bxc/export?format=pdf

https://docs.google.com/document/d/1T4Br-iQAhFnuoey6QvhdYRQ7X0uPKwjAhlalAQf8Bxc/export?format=doc

https://docs.google.com/document/d/1eCE7xT-YWu1xRyxVLx4xCXggqihxJwtU6XkXcchqk6w/edit

https://docs.google.com/document/d/1eCE7xT-YWu1xRyxVLx4xCXggqihxJwtU6XkXcchqk6w/export?format=pdf

https://docs.google.com/document/d/1eCE7xT-YWu1xRyxVLx4xCXggqihxJwtU6XkXcchqk6w/export?format=doc



https://studio.code.org/projects/gamelab/AwDcX5nehOApfzyywI6BOLT1xbf0MIV1dUj8KjQaNtA

View on CodeStudio

View on CodeStudio

Once you have settled on a type of game with your partner, fill out the Project Guide with the backgrounds, variables,sprites, and functions that you will need to make the game. You'll spend the next few levels creating your game.

Levels 3 4 5 6 7


Create your VariablesFirst, you'll need to create all of your variables and put them in the variables area of your code. Show me the block Showme the area in the code

Don't forget, each variable needs a label (name) and a starting value. You can change the value of the variable later in yourcode.


Create your BackgroundsNext, you'll create all of the background functions that you need for your game. Some games only have one background,and others have more than one that's chosen according to user score or another aspect of gameplay. You'll need to createa function for each separate background in your game. You'll write the code to choose the correct background in the nextlevel.

Show me the block to create a new functionShow me the area in the code to put my function

After you create your functions, test them by calling them inside the draw loop, one background per test.

Show me the block to call my function

https://studio.code.org/projects/gamelab/r9OYVTSj2od8vaCA-nKikTVpx-2Co8qHhuZiBIu30JA

https://studio.code.org/projects/gamelab/hAz7RSdqc0c_MSQVUpvz1XrLDr8QLsansWDVI0ZberQ

https://studio.code.org/projects/gamelab/DmRPNYR3n7bMO--_KkP7r6mOoGynBVyi3BMVPWDiVeI



View on CodeStudio

View on CodeStudio

View on CodeStudio


Display BoardsNow that your backgrounds are working, you can add your display boards. Most games have a score board, but you mightalso want to display information about player level or lives remaining. Look at Lesson 12 Puzzle 9 for an example of howto make a scoreboard.

For each display board: Create a function to display the information Call the function in the draw loop

Be sure to test your boards by changing the starting value of your variables and making sure the board also changes whenyou run the code.


Choose your BackgroundsNow that you have the backgrounds that you need, you'll write the code to choose the correct background. You've seen thisdone in Lesson 15 Level 11 .

After you've written the code, test it by changing the starting value of your variables and making sure the correctbackground shows up.


Create your AnimationsNext you will create your animations in the animation tab. Don't forget to make multiple animations if you want your sprite tochange appearance according to how it's moving.

Reflect - Peer ReviewDistribute: Give each student a copy of Make Your Own Game - Peer Review .

Students should spend 15 minutes reviewing the other group's game and filling out the peer review guide.

Iterate - Update CodeCirculate: Students should complete the peer review guide's back side where they decide how to respond to the feedbackthey were given. They should then use that feedback to improve their game.

Wrap Up (10 mins)

ShareShare: Give students a chance to share their games. If you choose to let students do a more formal presentation of theirprojects the project guide provides students a set of components to include in their presentations including:

The original game they set out to buildA description of the programming process including at least one challenge they faced and one new feature they decidedto addA description of the most interesting or complex piece of code they wroteA live demonstration of the actual game

Reflect





View on CodeStudio

Send students to Code Studio to complete their reflection on their attitudes toward computer science. Although theiranswers are anonymous, the aggregated data will be available to you once at least five students have completed thesurvey.








Documents

CS Discoveries 2018 | Interactive Games and ... - Code.orgimages, animations, interactive art, and games. Starting off with simple, primitive shapes and building up to more ... This