Avoid the Red Dots! Part 2

St Patrick’s Online Coding Lessons with Mr Darch

Avoid the Red Dots – Part 2!

In this second lesson on Avoid the Red Dots we’ll extend the simple but very playable game and add more advanced functions like a timer, health display, levels and a game over screen!

This is part two of Avoid the Red Dots. If you haven’t completed part 1 go here and build the simple game first: https://www.alittlelearning.org/avoid-the-red-dots/

Notes for parents: Each child will work at their own pace on this. I’ve uploaded video and written instructions for each step. With Scratch children ideally need access to a keyboard to name sprites and enter numbers but much of this project can be done on an iPad or tablet without any issue.

Children should be encouraged to work at their own pace and enjoy playing what they’ve made as they go. Do encourage them to watch the video for each step again if they get stuck. Some will complete this is in half an hour, others might like to come back to this project 3 or 4 times to complete it.

Please direct any feedback or suggestions to dave@alittlelearning.org

Happy Scratching!

We are learning to:

Use the Scratch programming language to solve computer science problems in a fun and engaging way.
Read code in the first person to help us understand what’s really going on.
Use the sprite editor in Scratch
Write code to control each sprite (character) in the game
Use loops to repeat parts of our program
Use conditional statements (IF) to allow our program to make decisions about what should happen and when.
Use variables to store and retrieve data from within our game
Use conditional statements in conjunction with variables to make things happen once certain criteria is met
Initialise code in our game to ensure that sprites are in the right place and values stored in variables are reset ready for each play of our game

Getting started

We’ll be using the free web app at www.scratch.mit.edu again for this lesson. You don’t need an account to take part.

Try to watch each video a few times before you read the instructions. This will help you to clearly understand what you need to do.

Go to www.scratch.mit.edu
Open your ATRD project from last week or go to: https://scratch.mit.edu/projects/361140950/ and use Mr Darch’s project
Test the game by clicking the green flag to make sure that everything is working as expected

Step 1

Move your mouse down to the cat/bear icon and hover
Click on the paintbrush icon
Draw any single shape on the paint editor
Change it’s outline to transparent (orange diagonal line, bottom left)
Change it’s colour to transparent (orange diagonal line, bottom left)
Name the sprite “Variables”

Step 2

Click on the “Variables” tab
Right-click on “my variable” and choose delete
Click on “Make a variable” and name it “timer”
Drag out [set timer to 0] and [change timer by 1] and put it on the transparent sprite
From “Events” drag [when green flag clicked]
Take a [wait 1 second], [repeat 10] and [forever] loop from “Control”
Inside the [forever] loop put [set timer to 0] and change the 0 to 10
Inside the [forever] loop and below [set timer to 10] put [repeat 10]
Inside the [repeat 10] put [wait 1 second] with [change timer by 1] below it but change the 1 to -1

Step 3

Click on the Stage area
Click on the Backdrops tab to access the paint editor
Choose the rectangle tool and drag from the top left corner towards the bottom right corner
Choose the colour
Click and drag the rectangle towards the upper left corner
Drag out the bottom right corner further
Click on the top left arrow (Select) tool
Centre the rectangle by lining up the crosses

Step 4

Click on the “Code” tab for the Stage
Drag out an [if…then] block from “Control”
From “Operators” choose the [=] block and place it inside the [if…then] block
From “Variables” choose the “timer” jellybean block and drag it to the first slot in the [=] block
Type 10 in the second slot of the [=] block
From “Looks” choose [change color effect by …] and type 70
Add a [wait 1 seconds] block from “Control” and change it’s value to 1.2
Wrap all of this in a [forever] loop block
Lastly place a [when green flag clicked] block at the top of the script

Step 5

Make a new variable by clicking on “Variables” in the blocks pallete and choosing “Make a Variable”.
Name it “level”
Click back on our invisible variables holder sprite.
Add [set level to 1] just below the [when green flag clicked] block
At the bottom (and outside!) of the [repeat 10] loop block add [change level by 1]

Key learning:

Did you play the game?

What happened when the red dot sprite touched the bug sprite?

That’s right NOTHING!

Why not? Because we haven’t written any code to make that happen!

We need to add more code to make something happen when these sprites touch.

Step 6

Come down to the cat/bear icon and hover
Click on the magnifying glass icon
Type “heart” in the search box
Choose the simple red heart that changes to pink when you hover over it with your mouse
Click on the costumes tab
Delete the second costume (the pink one) of this sprite

Step 7

Turn the outline of our heart sprite to transparent
Click on the select tool
Make the heart sprite smaller by dragging it’s corner
Re-centre the sprite
Click copy then paste
Copy and paste again until you have three hearts
Line them up, three in a row
Adjust the size from the sprite pane until they look right in your game
Right click and duplicate the heart sprite three times
Name the first one “health 3”
Name the second one “health 2”
Name the third one “health 1”
Name the last one “health 0”
Name the sprite “Health”

Step 8

Create “health” variable

Use the pattern below to set up which costume of the “Health” sprite should appear

[if health = 3 then switch costume to health 3]

Use a forever loop to tell the code to keep checking “IF”
Use a green flag clicked to start the script

Step 9

Now we’ll make the Red Dots change the value of our “Health” variable when they touch the Bug

Right click on a Red Dot sprite and choose delete
Do this again until there is only one left
On the remaining Red Dot create another [when green flag clicked] with a [forever] loop underneath it
Bring the [if touching Bug then …] block over to the new [forever] loop
Change Red Dot code to read [change health by -1] instead of [stop all] when touching the Bug sprite
Add a [wait 1 seconds] from “Control” to the [if] block to prevent us losing more than one life each time we get hit

Let’s now do a small thing that makes our game more playable and exciting. We’ll get the Red Dots to always start from the centre of the screen and the Bug sprite to start from the top corner.

From Motion add [go to x:0, y:0] to the top of of the Red Dot sprites
Click and drag the Bug sprite to the top left corner of the screen.
From Motion drag the [go to x: ,y:] block to the top of the Bug script.

It should read something like x:-200 y:150

Now duplicate the Red Dot sprite twice until there are three of them again.

Step 10

Let’s create a game over sprite now to appear when our health score is at zero!

We’ll be checking the value stored in our “health” variable to see when the game over screen will appear. We could use a broadcast message to achieve something similar but this is easier to debug and therefore a better way to do this.

Move your mouse down to the cat/bear icon and hover
Click on the paintbrush icon
Click on the T (for text) tool in the sprite editor window
Choose the colour you want your text to be in
Click on the empty screen and then type “Game Over” or whatever message you want to appear
Click on the “Select” tool
Drag the corner of your text until it is big enough. (Check the stage to see how it looks!)
Line up the crosses to centre your sprite
Over on the stage click and drag to position your game over message where you want it

Step 11

Our last step is make sure that everything else hides when the game over screen appears

We want to use this code to make the Red Dots and the Bug disappear:

Make a variable called “isGameOver”
Add a green flag and below that [set isGameOver to 0]
Add [hide] from “Looks”
crete code to show if isGameOver = 1
Inside a [forever] loop use [if isGameOver = 1 then [show]]

Extension Challenges:

Can you make the game get more difficult as you reach the higher levels?

How could you do that?

Could there be more Red Dots?
Could they move faster and faster?

How would you control that? What logic would you use?

Think “If this is happening, make that happen”

St Patrick’s Online Coding Lessons with Mr Darch