Students return to the Ninja World game, and codewalk through the ’update-world’ and ’draw-world’ functions. Making minimal changes to these functions, they are
able to modify the dog’s speed, add static clouds, etc. They then modify the world to include the ruby’s x-coordinate, and systematically update each function in
the source code to accommodate this new world. If time allows, additional iterations are possible by adding more sets of coordinates to the World.
Students brainstorm their videogames, and derive the structure for their game world.
Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.
Length: 90 minutes
Glossary:
example: shows the use of a function on specific inputs and the computation the function should perform on those inputs
Materials:
Pens/pencils for the students, fresh whiteboard markers for teachers
Class poster (List of rules, design recipe, course calendar)
Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)
Language Table
Preparation:
Seating arrangements: ideally clusters of desks/tables
The Ninja World 2 file [NW2.rkt from source-files.zip | WeScheme preloaded on students’ machines
Types
Functions
Number
+ - * / sq sqrt expt
String
string-append string-length
Image
rectangle circle triangle ellipse star text scale rotate put-image
Pens/pencils for the students, fresh whiteboard markers for teachers
Class poster (List of rules, design recipe, course calendar)
Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)
Language Table
Preparation
Seating arrangements: ideally clusters of desks/tables
Review
(Time 5 minutes)
You have had a lot of practice with structs over the past few lessons, so now it’s time for a challenge.
Turn to Page 19 in your workbook. Fill in the blanks with the
information you know about auto, party, and world structs.
Refresh students’ memories about the Structs they have already seen, in preparation for defining their own.
Codewalking
Overview
Learning Objectives
Deepen their understanding of structures, constructors and accessors by being introduced to a third data structure.
Discover the event-based microworld implementation of Racket, which uses events to modify the world.
Evidence Statements
Product Outcomes
Materials
Preparation
The Ninja World 2 file [NW2.rkt from source-files.zip | WeScheme preloaded on students’ machines
Codewalking
(Time 20 minutes)
Open up Ninja World 2 and click "Run".
What happens? Does it do the same thing as in the simulation last unit?
Let’s walk through it and figure out what’s wrong. At the top of the screen, you see the ;; DATA section.
This is where we define everything we need to keep track of during the animation. As you can see,
define-struct is used to define the World structure here.
What is in the world structure?
Take a look at the section labelled ;; STARTING WORLD. What is the name of the
first variable defined here?
What kind of thing is it?
How would you get the dogX out of the START world?
As in the last Ninja World, if the dog is moving ten pixels to the right each time,
what should the world be in the next frame?
Underneath the START world, define another world called NEXT. What will
the value of dogX be in the NEXT world?
There are also a number of values for images, defined below, which will be used in the game. What are they
images of?
Type in their names in the interactions window to find out.
World structures will be used to define every changing value within the game world. At the moment, the
game contains only one changing thing, the dog’s x-coordinate.
Now that we have a world structure, we need to know how to draw it.
Scroll down until you see ;; GRAPHICS FUNCTIONS. What is the name of this function? What
is the Domain? The Range?
As in the last lesson, the draw-world function is using put-image to place the DOG onto the
BACKGROUND at some coordinates.
What is it using for the dog’s x-coordinate? The dog’s
y-coordinate?
Think for a moment about how the Ninja World "game" worked in the last lesson. On each "tick"
draw-world would take in the current world and extract the dogX before using it to draw dog.
But this draw-world function never looks at the current world! If the function isn’t
looking at the world it’s taking in, so it has no way to change the position of the dog.
How would you get the dogX out of the world?
Which world is going to be used? (Which world is update-world taking in?)
(world-dogX w)
Now where do you need to put this (world-dogX w)? Which number here represents
the x-coordinate of the DANGER on the BACKGROUND?
This draw-world function will always draw the dog at (0, 400) on the screen. Even through the world is
being updated and passed to draw-world, students should understand that unless the image of the dog is
drawn at the UPDATING x-coordinate (dogX), the game will not animate.
Suppose you want to add the CLOUD image to the game at the position (500, 400). How could you use
put-image to stick them on the BACKGROUND?
Since this is their first time using put-image themselves, write the code with the kids. They’ll have
time to practice on their own later. Point out the "staircase" pattern that develops when you put images on
top of one another. Once they’ve put the image onto the background, have them click "Run" and
take a look at that cloud!
Now scroll down until you see ;; UPDATING FUNCTIONS. This code is responsible for changing the World.
What does update-world DO to the world?
update-world will make a new world and add 10 to the dogX of that world.
How will this make the dog move? Does it go to the right, left, up, down?
If the dog is at 100, where will it be next? After that?
How could you make the dog move faster? Slower? Backwards?
Write two examples for update-world, using the START world and the
NEXT world you already defined.
Each of these three functions work together to create the game that students see. define-struct world tells the
computer what a world contains, draw-world draws the images onto the screen, and update-world changes the
world, according to the rules of the game. Point out to students that without all of these functions, the game would not be
playable.
Extending the World
Overview
Learning Objectives
Students will modify draw-world to add clouds and a ruby
Students will iteratively expand the World structure, and trace these changes throughout their program
Evidence Statements
Product Outcomes
Materials
Preparation
Extending the World
(Time 15 minutes)
Let’s make this game more exciting:
If you wanted to draw the TARGET into the world, at the coordinates (500, 300), What will
you need to modify?
If the TARGET isn’t moving, then nothing new will be changing in the game, so we don’t need to
change the world structure. The draw-world function will need to change, however, if we want
the TARGET to show up in the game.
Using put-image, place the TARGET image on top of everything you have already,
so that it shows up when you click "Run".
This section requires that you walk through and model each one of the changes to the code, with students
following along on their own computers. You can write the code on the board or use a projector to show the
code, and use cutouts of the dog and ruby to model their behavior.
Now suppose the TARGET is flying across the screen, moving left slowly at 5 pixels each frame.
The ruby’s position will be changing, so this time the world DOES need to be modified.
What specifically will be changing about the ruby?
How does the world struct need to change?
What is a good variable name to represent the ruby’s x-coordinate? How about
rubyX?
How has the contract for make-world changed? Update it on your
contracts sheet
Now that the world structure includes a rubyX, What new function
do you now have access to? Write it in your contracts page.
; world-rubyX : world -> Number
Because the world structure is different, we need to go through the code, line-by-line, and change every
world we find. Look at the START variable - It uses make-world, which now requires
two inputs in its Domain.
What should the ruby’s x-coordinate be when the simulation starts? Include
this number in the START world.
Now change the definition of NEXT. Don’t forget to think about how
the ruby’s x-coordinate will change from the START world to the NEXT world
Do the definitions of the image variable need to change? Why not?
What about draw-world? Does its contract change? The contract says it
takes a World as its Domain, and it still does. The only thing that has changed
is what a world contains. Does draw-world still produce an Image?
What needs to change about the body of draw-world? Right now the ruby is being
drawn at the coordinates (500, 300) every time, but we want the position (namely, its
x-coordinate) to change. How do you get the rubyX out of the world? Place the
image of the TARGET at that x-coordinate.
What about update-world? Does the contract change, now that the world structure is different? Why or why
not?
Get rid of the function body of update-world completely, because a lot needs to change
here. Don’t delete the Contract - we’re not going to change the Domain or Range of the function!
Once again, the contract tells you a LOT about how to write the function. Here’s a quick tip: if the range is
a World, you know that you’ll have to make a world at some point.
How do you make a world?
The moment you write make-world, your instincts should kick in right away: Every world contains a dogX
and a rubyX, so you can write them down automatically.
Now you can ask yourself: What happens to dogX be? In the game, the dog will still be moving to the right by
10 pixels.
How will you update the x-position of the dog? How do you get the dogX out of the world?
How would you add ten to that?
We said we wanted the ruby to move to the left by 5 pixels. How do you get the rubyX
out of the world?
If it’s moving to the left, will you add or subtract from the position?
Which world are you pulling the dogX and rubyX out of?
Do the examples for update-world need to change?
Look at the first example: how many things are being passed into make-world? How
many should there be? Hint: look at its domain.
The ruby’s x-coordinate needs to be added. Where does it begin, in the START world?
If it goes left by 5 pixels, where should it end up in the first example?
Fix the second example in the same way, adding the ruby’s x-coordinate.
Every time the world (or any structure) changes, every single instance of make-world (or make-auto,
make-party, etc.) will need to change to reflect that. Have students find instance of make-world and
incorporating the rubyX into the new world. Any time they add something new to their game they will need to do
the same thing, so make sure they understand that every change to the world structure requires careful reading
and editing of their world functions.
Game Brainstorming
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Materials
Preparation
Game Brainstorming
(Time 15 minutes)
You have been working with structures for the last three lessons, and you’ve gotten really good at defining, making and
accessing them. Now, you’re going to define the World structure for YOUR GAME!
Suppose I have a racing game, where my player is at the bottom of the screen, sitting in their car. In front
of them, I have two lanes, with cars coming at me as I catch up to them. To move out of the way, I need to
change into the left or right lane of the road.
What are all the things I need to keep track of in my game?
PlayerX - a number
CarY - a number
Car2Y (if I want another car) - a number
Score - a number
How would I define this world?
How do I get the playerX out of my word? My CarY? My Car2Y? The score?
What if I wanted the player’s car to change color as the score goes up? How would my world
structure need to change?
Now think about YOUR game - what will be changing in your world?
Make sure they are collaborating with their partner(s) to brainstorm a game that they will both be happy with. Make sure
you force them to think about their world structures, and start simple: Limit their world structure to no more than five
things, initially. Pass out some scratch paper. They will need it to brainstorm on
Game Design!
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Student will define their World structures
Materials
Preparation
Game Design!
(Time 10 minutes)
It’s time to start work on your game!
Turn to Page 20 in your workbooks. First, you’re going to draw a rough sketch of what your
game should look like when the user clicks "Run".
Keep your world structure limited to five or fewer things to begin with - you can add more things to make it more complex later on.
Make a list of all the images you’ll need in your game.
Make a list of everything that changes in your game - if something moves, will you need to keep track of it’s
x-coordinate? y? both?
Many students will want to create ambitious games at first, with many values in their world structure. Make sure they start
simple at first: Once they have a simple game working, they can add more elements and features to make it more advanced.
Check their work: Does each pair’s world structure correspond to the things that are changing in their game?
Defining the World
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Materials
Preparation
Defining the World
(Time 20 minutes)
Now that you’ve gotten a list of everything that changes, it’s time to turn them into a World structure.
Turn to Page 21 in your workbooks, and define your world structure. When you’re done,
write down all of the contracts that you need to work with your structures.
Define an example world called START, which is how your world should look a split-second after the
game begins. Write it in on the bottom of Page 21.
Review each team’s structure and make sure it accurately models their world. Also be sure to check their
contracts, which should include make-world, and functions to access every part of their world structure.
Closing
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Materials
Preparation
Closing
(Time 5 minutes)
Now you have the basic building blocks of your game and an understanding of how draw-world,
update-world, and big-bang work together to create an animation in Racket. In the next unit you’ll
use your world structure to write the draw-world and update-world functions for your own game.
Have the class take turns telling their peers about their games: Who the player is, what their danger, target, etc.
will be. Most importantly, have them tell the class what they have in their World structure.
Make sure student names are on page 20
Take page 20 itself, or take photos of page 20, to prep game images for the next unit.
Images should be in PNG or GIF format. Background images should be 640x480, and character images should generally be
no larger than 200px in either dimension. Make sure that the character images have transparent backgrounds!
TIP: use animated GIFs for the characters - not only does the animation make the game look a lot better, but these
images usually have transparent backgrounds to begin with.
