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.

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”