UPDATE:

The instructions below are for the older Scratch 2.
For the newer Scratch 3 instructions, click here.

Frogger, Page 1
    Make a Game with Scratch 2

We will be making a simplified version of Frogger.

Never heard of the Frogger video game?
Try here (wikipedia) or here (Konami).
(Or, just do a search for "Frogger".)

If you complete this game, you can post it on scratch.mit.edu and please let me know!

Getting used to Scratch 2

If you haven't used Scratch 2 before, then check out:

• Introduction to Coding
• How to use Scratch 2
• Introduction to Scratch 2 (with exercises)

If you use these tutorials, please let me know.

About Scratch

Scratch is an entry-level  free and open source software programming environment developed by MIT.

Let's Make a Video Game!

In this unit of study, we'll be building our own Frogger-style video game.

In this unit, we'll cover:

• positive & negative numbers
• X and Y coordinates
• loops and conditions
• variables and "broadcasts"
• object-oriented programming
• input devices (keyboard)
• event sequences
• ... and more

---

    

What you will need:

• Scratch installed on your computer.
• Have completed some Scratch tutorials
  (Previous Scripts 1,2&3 will do.)
• A sense of adventure!

---

Get the Frog Moving

We are going to build our Frogger video game will only accept input from the arrow keys on the keyboard. 

So, after we remove the cat and get a frog (or other animal), then what?

First, get the right blocks:
    if 
          a key is pressed
    then 
          change the frog's location

And those pieces look like this:

Now, you have the building blocks,
so change the settings that:
    if
          the up arrow key is pressed
    then 
          move the frog up by 3

                                -->answer <--

Common Problem

"I clicked the green flag and nothing happened!"

Answer:  Did you press the arrow key on your keyboard?  

Your script is waiting for you to press the arrow key!

---

Make all 4 Arrow Keys Work Correctly

Can you figure out the other 3 arrows?

---

If "change y by 3" moves up 3, then how can you use a similar block to move down 3 left 3 or right 3? 

                        -->answer <--

---

Edit the Stage 
To Create a Highway

Next up, making a background!

Select the Stage sprite.
      Select the Backdrops tab.
 
Then, use the drawing tools to create the highway background.

FYI: Scratch2 has 2 very different drawing toolbars:

- Bitmap Toolbar
  (use this)

- Vector Toolbar
  (Very different!
  Not used to vectors?
  Try the Inkscape
  lessons.)

Here's what your highway backdrop should look like when finished:

Finished Highway
Click for larger image

---

Frog Must Start at Start

At the beginning of each game, the frog should be at the START position.

And since that won't happen automatically, we have to code it!

You'll either need to use 
GO TO  or  GLIDE code. 
Here's a sample, but where to add it?

---

Create a Moving Car

To make a car move, we use the same basic structure as when we wanted the cat to bounce around inside the fence.

However, in this case, we have highway lanes that are perfectly horizontal.  So, to make sure that the cars stay in their lanes, instead of  "moving 10 steps", we're going to just "change x by 10".

Trust me, this will keep everything nice and orderly!


NEAT TRICK:
Rather than making hundreds of cars, we're going to re-use our car so that (for now) only one car travels in each lane.

To do this, we're going to make our car drive across the video game screen, and then "teleport" back to the beginning of the lane.

Watch this video to get the idea.

When you're done, you should have a car object in your list of sprites, like this:

And in your car object, you should have code like this:

Click for larger image

---

Common Problem

Adding a second car is not as easy as it sounds.
If you want to try it now, go ahead!We will teach that in our next page of videos.

---

---

Set that Car to Kill

Sadly, in a video game called "Frogger", the whole point is to see how long the frog lasts before it dies.

In this video, we set the car to send a message ("FrogIsDead") to the frog. We use a Data Variable, and a code blocks that look like this.  But where do they go?

---

Kill the Frog and then
Bring it Back to Life!

When the Killer Car sends a message to the Frog ("FrogIsDead"), then the Frog must die!

Remember, nothing will happen unless we code it. What should happen when the frog dies?

Oh, and should the frog come back to life so the game can continue?  Then we'll need to code that too.

So, here's a list of all the things that need to happen so the frog can die and come back to life again.

In ALL cars:

• Sense the Frog and then send a message by setting the FrogIsDead variable

  

Click for larger image

In the frogger:

• Receive the message by checking the FrogIsDead variable
• Frog stops moving as the arrow keys don't work anymore (else)

• Frog makes dying sound
• Frog goes back to start (try glide!)
• Frog comes back to life (FrogIsDead variable)

Options:

• Frog can say something (Looks palette)
• Frog can change to a "dead" costume (Looks palette)

No live frogs are harmed in the making of this game!

Click for larger image

---

Next:  Frogger (Page 2)
Up:     Return to Scratch 2 (Coding)