Challenge 0: Challenge 1: Go to and. Sign in to your Google (consumer) account. Go to

Transcription

1 Challenge 0: Go to and Sign in to your Google (consumer) account. Go to and Now you can rename the game and But more importantly: Challenge 1: The city rat wants some cheese, but cats are dangerous! Use your to play. Get 200 points. The points are hard to see: they're near the top, to the right of the words My Game.

2 Challenge 2: Close the game: You have to close the running game anytime you want to edit the program. Find "My Game" in the first few lines of the program. Change it to your own title! Be careful to keep all the quotes "" and parentheses () just the way they are. Close the game. (If we forget to say this later, you still need to close the game to edit code.) Challenge 3: The title and score are hard to see because their color matches the background. Find the TITLE-COLOR and fix it! and close the game as much as you like. Challenge 4: The cat is cute, right? Let's make her a little more dangerous. Find the line in the code that has kitten-kimono in it. Somewhere in that line it says flip-horizontal. Change that to flip-vertical. What will happen when you?

3 Challenge 5: See where it says (scale 1/5...? That number means something. Try a different number. Can you make the cat bigger? smaller? Does the cat get more dangerous as she gets bigger? Try making her huge. Is there a part of the cat that's more dangerous than other parts? Challenge 6: Notice that our cat is called the DANGER because she's dangerous: (define DANGER (... "kitten-kimono.png")))) What is the TARGET? Change something about the target and run the game to find out for sure. For example, make it big. What's the PLAYER? Challenge 7: The TARGET uses a function called rotate. That number works like this: Make the cheese point left.

4 Challenge 8: Try switching the name TARGET with the name DANGER. Just the names! Do you still get points for getting the cheese? What happens? Oh Noooooooooooo!!! Change it back! Change it back! :-) Challenge 9: Find the update-danger function, a little farther down. When you change 20 to 60 in the definition, what happens to our cat? Slow down the cat, even slower than before. Challenge 10: The name x is short for "x-coordinate", and it means how far left or right you are on the screen. Let's focus on just the (- x 20) part. The open and close parentheses say that what's inside is a function first, then its inputs. The function here is the minus sign, so we'll subtract. The inputs are the old x coordinate, whatever it was, and how much to take away. If the old x coordinate was 80, how much will the new x coordinate be? If the old x coordinate was 150, how much will the new x coordinate be? When we subtract, we get smaller x, so the character goes left. To go right, we need bigger x. If x starts at 80, to go right, it should become. If x starts at 150, to go right, it should become. Can you make the cat go to the right, like the cheese does? Congratulations! You've really started programming now!

5 Challenge 11: Find update-player farther down. You see that it responds to the arrow keys by changing x or y, just like update-danger. What does the "c" key do? Why does it say 320? Why 240? (hint: the screen is 640 wide by 480 tall.) Challenge 12: The cond function has things in brackets [] for inputs. Each bracket has two parts: - a condition that can be true or false, and - the answer if that condition is true. If a key that you pressed is string=? with "up" then we'll never check for any other condition, you just take the answer to the right of that condition. Right after (cond add the line: [true (make-posn y x)] Can you still use your arrow keys? What happens? Oh nooooooooooo!!! Change it back! Change it back!!! So it looks like make-posn makes the new <x, y> position where your player should go. Challenge 13: (hint: start by copying the line for the "c" key) Add a new key that puts your PLAYER at the bottom left corner, where x=0 and y=0. Challenge 14: Add a new key that puts your PLAYER far off the screen, where it's SAFE! Challenge 15: The up, down, left, and right keys keep x the same and change y or keep y the same and change x. Make the keys move you faster, or slower. Make keys that move you diagonally on the screen, changing both x and y at the same time.

6 Challenge 16: There are two parts to the code window, and we've only been using the top part. The top part is called the definitions window. The bottom part is called the interactions window. In the interactions window, type (random 100) What number did you get back? Now type control+p to get that line back again. Hit return again. What number did you get back? Do it again, and again, and again. Now try it with (random 10) If you use control+p to get the (random 100) and delete one of the 0s, then you'll have to go back to the end of the line before hitting return. Otherwise you might just see something like > (random 1 0) To get to the end of the line quickly, press control+e, then you can press return. What do you get for (random 10)? What do you get for (random 10)? What do you get for (random 10)? What do you get for (random 10)?

7 Challenge 17: Now that you know how random works, that it gives you a random number smaller than the number you gave it, can you add a key that teleports you somewhere random on the screen? For make-posn, the x part of the position, which comes first, should have numbers less than 640 because our screen is 640 pixels wide. The y part of the position should have numbers less than 480 because the screen is 480 pixels tall. Challenge 18: Now that you know how to use the interactions window, let's solve a mystery. Find the update-mystery function, near the bottom. In the interactions window, type (update-mystery 17) What do you get back? You're about to change what update-mystery does. When you change the definitions, you have to to see your changes in the interactions window. If you're playing with this a lot before getting it right, you might want to put a semicolon at the start of the last line of the game so it says: ; (play g) That way the game won't pop up every time, and you won't have to close it to get to the interactions window. Remember to take out the semicolon when you want to play again. Change the definition of update-mystery so that (update-mystery 17) gives you 27 and (update-mystery 18) gives you 28 and (update-mystery 20) gives you 30 and (update-mystery 100) gives you 110 and (update-mystery 72) gives you 82 and (update-mystery 2) gives you 12. I hope you've noticed a pattern here! Now, when you're ready and you do play the game, what happens when you press space?

8 More with Mystery Challenge 19: Make it shoot left instead. Challenge 20: What's a better name for this mysterious thing? Rename mystery and update-mystery everywhere, even near the bottom. You can use command+f to search for places where it says mystery. This is called refactoring. Challenge 21: You can make update-mystery (or whatever you're calling it) shoot diagonally by asking for both x and y, and making a position (posn) as the result. Copy from update-target and change both x and y. Challenge 22: Maybe you can make the shots go at random speed? Challenge 23: Maybe you can make them slow down as they get closer to the left edge? Challenge 24: There is a function called sin that looks like this: So (sin (* 2 pi)) gives you a number close to zero. What happens if you (define (update-mystery x) (+ x (* 40 (sin (* pi (/ x 320)))))) Try changing 40 and 320 to different numbers. What does the 40 change? What does the 320 change?

9 Challenge 25: Look at the collide? function. This is where the game decides if you've hit something with the player. A hit is when the distance between player and that something is small enough. Why didn't we check if they were at exactly the same place? (try changing 60 to 1 to find out) Challenge 26: Make it really easy to hit things. Challenge 27: In collide? we get the distance between the player at (px, py) and the other character at (cx, cy). How might you get the distance between the player and the center of the screen? Remember, the screen is 640 pixels wide by 480 pixels tall. Challenge 28: (distance ) Let's make a quick copy of collide? and call it safe-collide?. In the next challenge, we'll make the center a safe zone. So copy the entire function. Paste it below and rename it, like this: (define (safe-collide? px py cx cy)... At the bottom, use the new one: (define g (make-game TITLE TITLE-COLOR BACKGROUND DANGER update-danger TARGET update-target PLAYER update-player mystery update-mystery *distances-color* line-length distance safe-collide? onscreen?))

10 Challenge 29: Now that you have a new function to work in, let's make sure that you only collide when you're close enough to each other and the player is not close to the center. To help you on your way, try typing these into the interactions window and write down the answers: (< 3 5) (> 3 5) (= 3 5) (distance ) (> (distance ) 1) (not (> (distance ) 1)) (< (distance ) 7) (< (distance ) 4) (< (distance ) (distance )) (and (< 3 5) (> 10 5)) (or (< 3 5) false) (or (> 3 5) true) (/ 640 2) (/ 480 2) Your other experiments: (Bonus: watch Vi Hart's video on proving the Pythagorean Theorem that helps us find the distance!)

11 Making Images: Add a Flag to a Building Challenge 30: We've learned a bunch of functions, but they're just the beginning! To learn new functions quickly, we'll use contracts and function headers. A contract gives: - the name of the function - the domain: the types of the inputs. - the range: the type of the output. The function header gives the names of the inputs. This is sometimes the most helpful part! For example, the contract for addition is ; + : Number Number -> Number You use it by typing + after an open parenthesis, then it needs two numbers, and you get back a number. The contract for circle is: ; circle : Number String String -> Image a String is anything in quotes, "like this". The header is (define (circle radius style color) Notice that there are three inputs, with three corresponding types. You still need to know that style can only be "solid" or "outline". Try typing this in the interactions window: (circle 100 "solid" "red") Now, let's actually name that. Back in the definitions window, below where you define PLAYER: (define red-dot (circle 100 "solid" "red")) Now run it, close the game, and in the interactions window, type red-dot You can now use this again and again. Challenge 31: Try some new functions: ; rectangle : Number Number String String -> Image (rectangle width height style color) ; triangle : Number String String -> Image (triangle size style color)

12 Challenge 32: You saw radial-star being used in mystery. Fill in the contract. ; radial-star : -> (radial-star #points inside outside style color) Challenge 33: The contract for put-image is: ; put-image : Image Number Number Image -> Image (put-image top x y bottom) Below where you defined red-dot, define a flag as Define a flag like this. (define flag (put-image red-dot (rectangle "outline" "black"))) The rectangle is 300 x 200, so the middle is at x=150 and y=100. After you run, in the interactions window, if you type flag then you'll see the Japanese flag. Challenge 34: Make the Somalian flag: Challenge 35: Make the Polish flag:

13 Challenge 36: Make your own flag (American might be too hard, but here are some other ideas): Indonesia, Perú, Switzerland, France, United Arab Emirates, Chile, Panama Challenge 37: All right, let's find an American flag too: In another browser window, go to images.google.com Search for American flag. On the left hand side, you'll see some filters. Choose Now click on your favorite one, then on the right, click Now, copy its address, from the same place where you typed "images.google.com" before. The contract for bitmap/url is ; bitmap/url : String -> Image (bitmap/url : address) So in the definitions window type (define American-flag (bitmap/url "")) And paste your flag's address in between the double quotes.

14 Challenge 38: Use put-image to make a new background: (define FLAG-BACKGROUND (put-image flag BACKGROUND)) Now at the bottom of the code, use FLAG-BACKGROUND instead of just BACKGROUND to make the game: (define g (make-game TITLE TITLE-COLOR FLAG-BACKGROUND DANGER update-danger TARGET update-target PLAYER update-player mystery update-mystery *distances-color* line-length distance collide? onscreen?)) Challenge 39: Can you put both flags up? Challenge 40: gremio@acm.org to ask about a rocket. Author: Gregory Marton. gremio@acm.org Copyright This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. This document is based on a video game created for Bootstrap. Many of the ideas therefore come from Emmanuel Schanzer. Please consider donating to Brown University on behalf of Bootstrap. It was created for a take-your-child-to-work-day activity at Google NYC, and was fun for ages 10 18, at many skill levels. We gave stickers after challenge 10 and made the rest completely optional. If you make it better, I would love to see your revised version.

15