Creating a Frog GameCreate a game where a frog earns points for eating butterflies, but loses points for eating bats. When clicked, the frog’s tongue extends in the direction of the mouse and eats anything it touches. The goal is to eat the butterflies while avoiding the bats that are also trying to eat the butterflies.

Scratch BasicsThis project assumes a basic knowledge of Scratch. You may wish to complete a Scratch tutorial prior to tackling this project.

AnimationIf a sprite has multiple costumes, you switch between those costumes to create animation. For example, select the brown bat sprite.

We will then create a loop that continuously changes costumes:

It starts on a green flag click

It loops forever

It changes between the costumes in the sprite

A delay is inserted to slow down how quickly it changes between the costumes

MovementNext we want to move the animated sprite around the screen. The previous animation code has a small delay between costume changes, so we will create a separate chain of blocks under a different green flag to run our movement separately. Code that is independent should run under a separate green flag, while code that must go in a set order should be in the same chain of blocks under one green flag. Think of each green flag as running a separate thread. The sprite movement will be smoother by avoiding the wait block in the animation code, for example:

Again we start on a separate green flag

It loops forever

It moves around the screen 5 pixels at a time

If it hits the edge of the screen it rebounds

To avoid having the sprite turn upside down when it bounces off an edge, we want to change the sprite rotation style. We can add it to our program using

-1-

the set rotation style block. If this block is used, it only needs to be run once, so it would go after the green flag clicked block and before the loop starts.

Aother way to do this, is to adjust the sprite directly by clicking on the sprite info button:

And then choose the left-right rotation arrow

Next, we can adjust the movement so it looks more lifelike. Bats do not fly in straight lines, nor do they always fly at the same speed. The random block can help us to adjust the movement script:

Start on green flag click

Loop forever

Small random direction change

Speed up and slow down

Bounce off the edge of the screen

Bounded World versus Wrapped WorldRight now the bat bounces off the edges of the display area. An alternative is to treat the edges of the screen as if they wrap around and touch each other; so a sprite that hits the right edge is instantly moved to the left edge, while a sprite that hits the left edge is moved to the right.

Select another sprite and modify the code to create a wrapped world:

Note: You can copy code from one sprite to another using drag-and-drop. Click on the code block and drag it from the code area of one sprite to the other sprite in

the Sprites area and it will make a copy of that block in the new sprite. For example, drag the animation loop from the bat to the butterfly and the butterfly will also be animated. Next, drag and drop the chain of movement blocks and then modify them to create a wrapped world.

Again, start on the green flag

-2-

Loop forever

Less maneuverable than the bat

Not as fast as the bat

If we approach the right edge

Move to the left

If we approach the left edge

Move to the right

If we hit the top or bottom we still bounce

Warning: If the butterfly hits the left or right edge before it reaches x position of 210 or -210, the “if on edge, bounce” block will turn the butterfly around and the if condition that checks the x position will never run. The butterfly must be small enough to reach x position 210 before it hits the edge of the screen in order for this code to work.

You can shrink the sprite using the shrink tool to make it smaller.

1. Stop the program from running using the red stop sign next to the green flag.2. Click on the shrink icon at the top center of the screen and the cursor will change.3. Click on the Sprite in the display area and each click will shrink it to a smaller size.

Note: If you shrink a sprite in the costume editor screen, it will change the size of just one costume and give strange results. Shrink sprites in the main view area to change all of the costume sizes at the same time.

Note: Blocks inside of blocks – The shape of the hole gives you an idea of the shape of block that can be placed inside of it. For example: In the example above, an if block contains a diamond shaped hole, which matches the shape of the greater than block, and that block contains an x position block. Blocks with round sides are variables. Scratch has predefined variables, but also allows you to create your own variables.

Collision DetectionWhen the bat and butterfly occupy the same space on the screen it is called a collision. Games use these collision events to trigger actions. For example, the following code detects when the bat and butterfly are touching each other and then hides the butterfly for a period of time before respawning:

When green flag is clicked

To detect a collision more than once, use a loop

Wait for the collsiion with the bat

Hide this sprite

Wait a few seconds

-3-

Show this sprite

This is event driven collision detection. A later example will show another technique called polling.

Creating the Frog

Select a sprite using the New Sprite from library option. Browse the Sprite Library and choose the frog. Remove the predrawn tongue using the following steps:

Click on the frog in the Sprites section and then choose the costumes tab

The editor will appear on the right, where the scripts are usually shown.

Editing the Frog Sprite to Remove the TongueYou could follow these steps to remove the tongue, but there is a better way

Choose the convert to bitmap button (bottom right)

Zoom in to make editing easier Choose the eraser and remove the tongue

-4-

Do NOT click the convert to bitmap button, though you can zoom in to make it easier to click on the tongue.Left click to choose the color from the color palette below the image. (This is the invisible color)

On the right hand side of the editor click on the fill button Move the mouse over the tongue, and when it is in place the tongue will disappear. Click on the tongue.

Creating a New Tongue

Now we are going to draw a new sprite. Choose Paint New Sprite Zoom in and paint a pink dot in the middle of the screen. This will be our tongue sprite.

If the tongue is not centered on the screen, you can use the centering tool in the paint editor (top right). This is the location from which the tongue will extend, so use the centering tool to make sure the tongue starts on the right place on the frog.

How to draw a tongue on the screen? Start by making the tongue sprite go to the frog. Set the color for the line that will be drawn (the tongue).

Click in the color area and the cursor will change to a finger; move the cursor over something on the screen that has the color you want and click the mouse. Whichever color you hover over and click, will be the color set in the block.

Set the pen size to make the line thicker Point the tongue sprite toward the mouse cursor Make the sprite visible Put the pen down on the page Draw the line in small steps Pick the pen up Hide the tongue sprite Clear the tongue from the screen

Can you find all of the blocks listed above? Think about what they do and look for them in the proper category. (Pen, Looks, Motion, Control)

Creating an event to trigger the tongueYou can run the code you have written by clicking on it with the mouse, this is especially helpful in debugging the code. However, if we want it to run while we are playing the game we need to choose an event that will start the code during the game.

Double-Click on the stage (left of sprite list). Select the Scripts tab (top center). Choose the Events category. Drop a “when stage clicked” block into the script area

on the right-5-

Select a broadcast [message] block and click on message to create a new event. This is going to be the trigger that tells you someone has clicked on the stage.

Now go back to your tongue sprite and put the when I receive message block from the events menu and add it to the top of your tongue drawing script. If it worked correctly, you can now click on the stage

and the tongue will extend toward your mouse cursor.NOTE: If you broadcast the eat message with a when clicked block on each of the butterflies and the bat, the tongue will extend if you click on the sprites and not just when you click on the stage.

Adding Collision EventsNow you can add a collision event for the tongue with the bat and butterfly. See the previous Collision Detection section for an example of collision detection code and hiding and respawning.

ScoringWe are going to create a variable to track our score. Go to the data category and click the “Make a Variable” button. This variable will be “For all sprites” because we only have one score. If each sprite needed a separate score, like in a multiplayer game, then you would NOT want to share the

score between the sprites and you would select “For this sprite only”. If a variable is not shared by multiple sprites it is a good idea to make the variable just for the sprite that uses it.

Initialize the score to zero when the game begins. Put this in a common location like the frog sprite using a green flag to make sure it happens at start up. You could also use the stage, or some other sprite that has only one of them.

Next, go to your butterfly and put a change score block after the code that detects the tongue collision. (see the previous Collision Detection section for examples of collision detection code.)

Change the score amount to what you wish to award the player for eating a butterfly (for example 5 pts). Follow a similar process in the bat sprite but give it a negative score (like -10 pts).

-6-

Game OverChoose the paint a new sprite option (just like the way we created the tongue).

Select the Text Tool (it is a big “T” on the left side of the picture editor).

Click in the middle of the screen and write GAME OVER.If you click on the corner of the text box, you can pull it out and make the text bigger.

Return to the Scripts tab and create a script to end the game after a period of time:

Starts when green flag is clicked.Hides the game over message.Waits a minute.Shows the game over message.Ends the program.

This will complete the requirements for the program. Feel free to add your own features or change the operations of the program to your tastes. Here are some additional blocks that may be useful.

Collision Detection -- Polling vs Event DrivenThese are two different examples of collision detection blocks for the butterfly to determine what to do when it hits the bat. Additional collision blocks will be added for detecting tongue collisions in both the butterfly and the bat, but these will need to be changed to add or subtract from the game score when

the collision occurs.

With polling, the if condition is checked repeatedly as the program cycles through the forever loop.

In event driven code, the program stops and waits for an event before repeating the loop.

-7-

POLLING EVENT DRIVEN

Making sprites reappear in random locationsThis optional block will move a sprite to a random screen location. This can be fun to do when a sprite respawns.

Chasing ButterfliesYou may wish to have the bat chase the closest butterfly rather than just moving around the screen randomly. This is an algorithm that uses a variable to determine which butterfly is closest and points towards it so the following movement blocks will chase the closest butterfly. This works best if the butterflies change to a random screen location after being eaten.Select Closest Butterfly

You can add optional sound effects, backgrounds, or other game features. To view a working demo of the program, go to the following URL:

https://scratch.mit.edu/projects/61229126/

-8-

STEM Computer ScienceFrog Project Rubric

Name _______________________________________________ Period ____________________

⃝S 10 pts At least one animated sprite (flapping wings for example)

⃝S 10 pts Animated sprite moves around the screen with some randomized movement

⃝S 10 pts Target sprites move in a wrapped world (when it reaches an edge, it appears on the opposite side)

⃝S 10 pts Target sprite is duplicated at least 3 times

⃝S 10 pts Target sprite disappears when touched and after a period of time respawns

⃝S 10 pts A different animated sprite moves around the screen in a bounded world causing the first sprite to respawn

⃝S 10 pts An attacking sprite should be added to the screen that attacks when the mouse key is pressed

⃝S 10 pts A variable should be used and displayed to track the user score

⃝S 10 pts Scoring should add positive points for hitting the target sprite and negative points for hitting the second animated sprite

⃝S 10 pts A timer should end the game with a game over message

Bonus Features – Maximum total bonus is 10 pts

⃝S 1-10 pts

Sound effects

⃝S 1-10 pts

Hunting algorithm to make the second sprite pursue the target sprites

⃝S 1-10 pts

Additional Feature:

⃝S 1-10 pts

Additional Feature:

-9-