Frogger Tutorial

INTRO TO GAME DESIGN Project 1 – Frogger Game Designing and programming games isn’t as hard as you might think. It can actually be very creative and a lot of fun. To start out, we’ll use a language called Scratch. All the code in Scratch is shaped like a puzzle piece and can be dragged into place linking the pieces to each other. 1. Go to https://scratch.mit.edu/ and create an account. Then click the “create” button to start a new project. 2. End Goal The goal of this game is to make our own version of Frogger, where we have a character trying to get from the bottom of the screen to the top, while landing on logs to cross the river. To do this, we’ll need to create three objects: 1. Background, 2. Frog, 3. Logs 3. Delete cat First, right click on the cat character and delete it. 4. New Background Next, click on the “backdrops” tab to paint your own background. It doesn’t necessarily matter what colors things are as long as the two river banks are the same color. 5. New Character Click on “new sprite” and draw your frog character. 6. Draw Frog 7. New Sprite (log) Now make another new sprite, this time for the log. 8. Shrink sprites Right now our sprites are too big. Click the “shrink” tool at the top and then every time you click on a sprite it will shrink. 9. Code for Frog Select the frog sprite, and in the “scripts” tab, find all the code pieces until yours looks like this. They are all color coded, and you can change the values of numbers and sounds in the blanks. When choosing the colors for the “not touching color” part of the code, the first color should be the same as the riverbank, and the 2nd color should be the color of the logs. If everything works, this code checks to see if the frog is safe on the shore or on a log or if he has landed in the river and it will make a splash sound and send him back to the beginning. If he makes it to the other shore, it will make a celebration sound and end the game. 10. Motion controls for Frog Next add these scripts to control how the frog moves. If the “move ___ steps” command makes it move the wrong direction, try using the “move y ___” command instead. The “not touching color” should be the color of the water. 11. Code for log #1 Add the following code to the log sprite. This will make the log move left to right over and over. 12. Duplicate log Right click on the log sprite and choose “duplicate.” This new log will be exactly the same as the first, so let’s change the code a little bit. 13. Code for log #2 We want the 2nd log to start in the middle of the screen and then loop once it gets to the right edge. So we’ll add a little bit to the start of its code. 14. Duplicate logs and change codes Now we need 4 more logs. So duplicate the 1st log two more times, and then duplicate the 2nd log two more times. But we want them all to start at different positions (and maybe move at different speeds.) Just change the x and y coordinates for each log until they work how you want them to. 15. Share your project Click the “share” button in the top right, and then add instructions as needed. Copy and paste the link to share it with anyone.