Unit 9

Completing Games

Unit Overview

Agenda

• 5 minIntroduction

• 15 minRandomizing Ninja World

• 35 minScoring and Levels

• 30 minChallenge: Nested Structures

• 5 minClosing

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.

Product Outcomes:

• 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 your games are almost complete. 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 it’s 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.

   ;; The World is the x and y positions of the dog, x position of the ruby, and y position of the cat (define-struct world (dogX dogY rubyX catY)) Right now the draw-world function draws the dog at it’s current x-coordinate and a fixed (unchanging) 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.

   [(collide? 320 (world-catY w) (world-dogX w) (world-dogY w)) (make-world -50 (random 480) (world-rubyX w) (world-catY w))]

  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.

   ;; The World is the x and y positions of the dog, x position of the ruby, ;; y position of the cat, and the player's score (define-struct world (dogX dogY rubyX catY 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?

   (define (update-world w) (cond [(collide? 320 (world-catY w) (world-dogX w) (world-dogY w)) (make-world -50 (random 480) (world-rubyX w) (world-catY w) (-(world-score w) 20))]))

  On the next cond branch, make the score increase by 30 points when the cat collides with the ruby.

  Many students will want to display the score on their game screens. In order to do this they will need to place an Image of the score onto their scene in draw-world. The function number->string takes in a Number for its domain and returns a String representation of that number. This string can be passed to the text function to return an Image that can then be used in draw-world. For example, the expression: (; text: String Number String String -> Image) to return an Image. The expression: (put-image (text (number->string (world-score w)) 30 "purple") 320 240 BACKGROUND) will place the score (drawn in size 30 purple text) onto the center of the BACKGROUND.

• Ninja World has a 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?)

   (define (draw-world w) (cond [(> (world-score w) 500) (.....)]))

  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:  (define (draw-world w) (cond [(> (world-score w) 500) (put-image PLAYER 320 (world-catY w) (put-image TARGET (world-rubyX w) 300 (put-image CLOUD 500 400 (put-image DANGER (world-dogX w) (world-dogY w) BACKGROUND2))))]))

  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.

   [else (put-image PLAYER 320 (world-catY w) (put-image TARGET (world-rubyX w) 300 (put-image CLOUD 500 400 (put-image DANGER (world-dogX w) (world-dogY w) 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.

  These modifications can be seen in action in the Completed Ninja World file, or NWComplete.rkt from source-files.zip.

  Some more options for students who finish early:

  • 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.  ;; A character is an image, speed, x-coordinate, and y-coordinate. (define-struct character (image speed x y)) (define DOG (make-character DANGER 10 -50 400)) (define CAT (make-character PLAYER 20 320 240)) (define RUBY (make-character TARGET 10 690 300))

  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:  ;; The World is three characters: (dog, cat, ruby) and a score (define-struct world (c1 c2 c3 score))

  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!