This unit includes instructions for adding frequently-requested elements to students’ games, such as extra levels
and a scoring system. Students comfortable with structures are encouraged to use nested structures in their games
for more complexity.
Students will use the random function to make their game characters
appear at different loations on the screen
Students will use nested structures to add complexity to their games
Standards and Evidence Statements:
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
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)
Student workbooks
Language Table
The Ninja World 6 file [NW6.rkt from
source-files.zip |
WeScheme preloaded on students’ machines
New background image for Ninja World level two [bg2.jpg from source-files.zip or your own 640 x 480 image
Preparation:
Seating arrangements: ideally clusters of desks/tables
Types
Functions
Number
+ - * / sq sqrt expt
String
string-append string-length
Image
rectangle circle triangle ellipse radial-star scale rotate put-image
Boolean
= > < string=? and or
Introduction
Overview
Learning Objectives
Evidence Statements
Product Outcomes
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)
Student workbooks
Language Table
Preparation
Seating arrangements: ideally clusters of desks/tables
Introduction
(Time 5 minutes)
Congratulations! You’ve worked very hard throughout the last 8 lessons, and now your games
are almost completed. Your player can move any way you want, you’ve written the code to
detect how far characters are from each other, and you’ve defined a whole bunch of
conditional cases for different actions in your game. Have you brainstormed some
extra things you want to add to your game?
At this point in the course, students will have very different games, and will probably
need individual help adding the finishing touches or extra elements. This unit includes
ideas and instructions for frequently requested game elements (Using Ninja World as a
template), but feel free to have your students get creative with their additions.
Randomizing Ninja World
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Students will use the random function to make their game characters
appear at different loations on the screen
Materials
The Ninja World 6 file [NW6.rkt from
source-files.zip |
WeScheme preloaded on students’ machines
Preparation
Randomizing Ninja World
(Time 15 minutes)
If you open up the Ninja World
file, you’ll see the (almost) completed game. However, right now the ruby and
dog appear at the same part of the screen every time, making this a pretty
easy game.
What will the y-coordinate of the dog always be? What about the ruby?
Instead of appearing at the top of the screen every time, what if you could
make the dog show up at a random y-coordinate whenever it goes off the screen?
Racket already has a function to give you a random number, which could represent
a character’s y-coordinate: random. random takes
in one number as its domain, and returns a random number between 0 and that number.
So if a game contains (random 480) in the code, it will return any number
between 1 and 480.
If you want the y-coordinate of the dog to change, you’ll have to add it to the
world structure.
Go back to the top of the page where the World is defined and add in
a dogY. Don’t forget to redefine your START and NEXT worlds,
to account for the extra item in the world struct.
Right now the draw-world function draws the dog at its current
x-coordinate, and a pre-set y-coordinate.
At what y-coordinate is the dog drawn right now?
Now that dogY has been added to the world
structure, how do you get the dogY out of the world?
Change the draw-world function so that it
draws the dog at the current y-coordinate instead of 400.
The dog’s y-coordinate should change when it leaves the screen.
What function changes the game state depending on
the game’s conditions?
What does the first cond branch in
update-world test?
If this test returns true, what happens?
Change the first cond branch in update-world
so that if the cat collides with the dog, the dog’s
y-coordinate is resent to a random number between 0 and 480.
Further down in update-world, you check to see if the dog has gone
off the right side of the screen.
If this test evaluates to true, to what x-coordinate
does the dog return?
Change this cond branch so that the dog’s
y-coordinate is added to the world, as a random number
between 0 and 480.
Be sure to go through your code carefully- since you changed the world structure to
include a dogY, you’ll need to make sure it’s included every time you call
make-world, and every time a function takes in the y-coordinate of
the dog. Once the dog is reappearing randomly when it leaves the screen, you can
make the same changes to the ruby’s y-coordinate to make it appear randomly, or
add this concept to your own game.
Pay particular attention to the use of distance and collide? in the
update-world function: They take in the dog’s y-coordinate, but it is
currently hard-coded to always be 400). Make sure students realize that every
function that uses the dog’s y-coordinate must now get that value from the world
structure, using (world-dogY w).
Scoring and Levels
Overview
Learning Objectives
Students will add a scoring system to their games
Students will add levels to their games
Evidence Statements
Product Outcomes
Materials
New background image for Ninja World level two [bg2.jpg from source-files.zip or your own 640 x 480 image
Preparation
Scoring and Levels
(Time 35 minutes)
Ninja World is looking good, but right now there’s not a lot of variety.
The player avoids the dog and gets the ruby over and over again. We should
mix things up a bit: how about adding new levels? Typically a game would
progress to a new level if the player has reached a certain goal: Collected
a certain number of rubies, destroyed a certain number of zombies, or reached
a certain score. Let’s start by adding a scoring system to the Ninja World game.
Both the scoring system and randomizing the y-coordinates of the target and danger
were part of the included teachpack in Bootstrap 1, code which ran "under the hood"
in students’ first Bootstrap game. Let them know that in Bootstrap 2, they no longer
need this hidden code, because they’ve learned enough to program the entire
game (and more!) themselves.
The score is something that will be changing in the game, so you can be
sure that it has to be added to the world structure.
What data type is the score? Number, String,
Image, or Boolean?
What will be the score in the START world?
Change the world structure so it includes a
score.
Remember: Since the world structure is changing, you now have to go through
your game code- every time you make a world, the score must be included in
that world.
How do you get the score out of the world?
Now that the game has a score, it needs to be able to increase or decrease.
In Ninja World, the score should go up by 30 points when Ninja Cat collides
with the target, and down by 20 points when colliding with the danger.
Which of the cond branches in
update-world checks these conditions?
How would you decrease the score by 20 if
the player collides with the danger?
On the next cond branch, make the score increase by 30 points
when the cat collides with the ruby.
The scoring system is in place, but how will the player know what their score is? You’ll need
to display the score on the game screen.
Which function handles how the world is drawn?
In draw-world, images are placed onto the background using put-image to draw the
game. But the score is represented by a Number: we need a way to represent it as an Image.
Thankfully, Racket has some built-in functions that can help with this: the function
number->string takes in a Number for its domain and returns a String representation
of that number. This string can then be passed to the text function to return an
Image that can then be used in draw-world.
Copy the following contracts into your workbook:
; number->string : Number -> String
; text : String Number String -> Image
How would you use the number->string and text
functions together to draw the score into the world?
How do you get the score out of the world?
How large should the text of the score be? Where should it be
placed on your game scene?
The expression:
will place the score (drawn in size 30 purple text) onto the center of the BACKGROUND.
Ninja World has a visible scoring system: Now it’s time to add some levels. For
this example, you’ll make the game have a different background image when
the player progresses to the next level. The player will reach level two
when his or her score is greater than 500.
Where do you define the BACKGROUND image? Keep the original
background for the first level, but define a new variable,
BACKGROUND2, that will be used for level 2.
Now that you have another background image, it needs to be drawn into the
game- but only when a certain condition is met.
What must be true for the player to progress to
level 2 in the game?
Which function handles the way the game looks?
What is the only thing different in level 2 of Ninja World?
The only thing that changes at level 2 is the way the game looks:
specifically, the background image. Because the background only changes when
a certain condition is met, you’ll need to change the draw-world
function so that it uses cond. Leave the current code alone for now
and start right under (define (draw-world w)).
What is the first thing to write, to let the computer
know that this will be a function with different
conditions?
What is the first condition to check? (Hint: is
the sore large enough to progress to level 2?)
If this test evaluates to true, the result will look similar to the
code you already have for draw-world, starting with put-image.
What is the one thing that needs to change?
Instead of putting all your images on top of BACKGROUND, you’ll put
them over BACKGROUND2, your new background image:
Don’t forget to add an else clause before your original code,
right underneath what you just wrote. If the score is not
greater than 500, the world will be drawn with the images on the
original background.
Now Ninja World has a level 2! You can use the same process to add more levels
when the score gets even higher. Maybe instead of the background changing, you
can have the player transform, or make the game more difficult by making the
danger move faster.
You can use the provided background image for level 2 of Ninja World,
or walk students through finding and adding their own image to the game.
Change the update-world function so that the danger and
target move faster if the score is greater than 500.
Use the text function to display a game over message
on the screen when the score drops below 0.
Change the images of all the game characters when the
player progresses to the next level.
Challenge: Nested Structures
Overview
Learning Objectives
Reinforce understanding of structures as they are used in their games
Evidence Statements
Product Outcomes
Students will use nested structures to add complexity to their games
Materials
Preparation
Challenge: Nested Structures
(Time 30 minutes)
Now that you know about data structures and how to use them, you can have games
that are even more complex. For example, you could make a game with many different
characters by making each character their own data structure.
Define a character struct and some example characters for your own game.
They don’t have to follow the same pattern- your characters can have a
health property instead of a speed, for example. Just be sure your newly
defined characters have the same properties as the character structure
you define.
If each character is now its own structure, what will the world look like? Something like:
Why is it important to use variable names (c1, c2,
and c3) instead of just defining the world struct to include
specific characters (DOG, CAT, RUBY)?
Variables are used in structs for the same reason variables are used in functions:
we want to be able to change the value of those characters later. When
you define the first world, you can then make your predefined character structs
part of that world:
(define START (make-world DOG CAT RUBY))
Of course, you need some way to access parts of each character struct, even if
it’s inside another struct. This is just like accessing any part of a struct.
How do you get the first character out of the starting world?
What will that expression evaluate to?
How would you get the speed out of the resulting character?
(character-speed (world-c1 START))
For even more of a challenge, every level in the game can be its own structure. A level
could have a background image, characters, a boolean value representing wheather the
player has collided with another character, or anything you like!
Using many nested structures can get tricky: if a student is struggling, have them draw
the circles of evaluation for their expressions.
Closing
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Materials
Preparation
Closing
(Time 5 minutes)
Congratulations! You started from scratch, and now have a working videogame!
We hope you’ll continue worlding on these games, keep hacking, and keep learning!
Have students show each other their completed games!
