Avoid the Red Dots!

St Patrick’s Online Coding Lessons with Mr Darch

Project 1: Avoid the Red Dots!

We’ll begin our online coding lessons with Avoid the Red Dots. In this super simple but very fun project we’ll create a “bug” that follows our mouse pointer while we avoid the “red dots” that bounce around our screen.

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. 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.

Getting started

We’ll be using the free web app at www.scratch.mit.edu 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. 

Steps 1 & 2

  • Go to www.scratch.mit.edu
  • Click “Create” to start a new project
  • Delete “Scratch” the cat sprite from the sprite area (bottom right)
  • Come down to the new sprite icon and hover.
  • Choose the paintbrush to paint a new sprite
  • Change the fill colour to black
  • Click the zoom icon two or three times
  • Choose the circle tool and draw an oval shape
  • Line up the oval’s centre cross with the sprite’s centre cross
  • Rename the sprite “Bug”

Step 3

  • Click on the “Code” tab
  • From “Events” (yellow circle) click and drag a [when green flag clicked] block to the script area
  • Click the zoom icon three times to zoom in
  • From “Control” (orange circle) click and drag out a [forever loop]
  • From “Motion” (darker circle, top) click and drag out [move 10 steps] and a [point towards mouse pointer] block
  • Connect them together as shown in the gif above

Step 4

  • Come down to the new sprite icon and hover.
  • Choose the paintbrush icon to create a new sprite
  • Change the fill colour to red by sliding the brightness slider all the way to right
  • Make sure you have the circle tool selected
  • Click the zoom icon two or three times
  • Hold shift as you click and drag diagonally to create a small red circle
  • Move it so that the centre crosses line up

Step 5

  • Make sure you have the “Red Dot” sprite selected in the sprite area. You’ll see a blue border around the red dot if you do.
  • Click on the “Code” tab
  • From “Events” (yellow circle) click and drag a [when green flag clicked] block to the script area
  • Click the zoom icon three times to zoom in
  • From “Control” (orange circle) click and drag out a [forever loop]
  • From “Motion” (darker circle, top) click and drag out [move 10 steps] and an [if on edge, bounce] block
  • Connect them together as shown in the GIF above

Click the green flag to test your code and take a few minutes to guide the “Bug” sprite around the stage area while trying to avoid the “Red Dot” sprite

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

  • Make sure you have the “Red Dot” sprite selected in the sprite area. You’ll see a blue border around the red dot if you do.
  • Zoom out a couple of times using the magnifying glass minus icon
  • We’ll add an [if…then] block from “Control”
  • From “Sensing” drag out [touching mouse pointer]
  • From “Control” again we’ll add a [stop all] block to our script area
  • Connect them together as shown in the GIF above

Click the green flag to test your code and take play our game. Does the game stop when the “Red Dot” touches the “Bug” sprite? You’ll need to click and drag the bug so that it’s not touching the red dots to restart the game. Click the green flag to begin again.

Step 7

Let’s make our game more intesting now. Can you see the way the red dot just bounces left to right?

We’re going to make the red dot travel in a random direction every time we start the game. This will make the game much more exciting, especially when we have more that one red dot to avoid!

  • Make sure you have the “Red Dot” sprite selected in the sprite area. You’ll see a blue border around the red dot if you do
  • From “Motion” (darker blue circle) drag out the [point in direction 90] block
  • From “Operators” click and drag out the [pick random 1 to 10] block to our code area. Change the “10” to “360”
  • Click and drag the [pick random 1 to 10] block and carefully drop it on the [point in direction 90] block where it says “90”. You’ll see a white ring appear when you’re in the right place!
  • Add this to your “Red Dot” script but make sure it is NOT inside the forever loop. It should be between the [when green flag clicked] and [forever] loop block

Click the green flag and test your code. Keep tapping the green flag. Does your red dot keep changing direction? If so, well done! 

Step 8

Let’s really ramp up the fun now. We’ve written all code we need now to make a fun game that we can play with our friends. The last thing we’ll do at this point is duplicate the red dot two more times.

  • Use the right-hand mouse button (or click while holding down ctrl on a Mac) to click once on the red dot. Choose “duplicate” from the menu that pops up. Do it once more so that you have three dots bouncing around your screen. 
  • Click the green flag to test your code and take play our game.

How long can you Avoid the Red Dots for?!!

Extension Challenges:
  • Can you swap the [stop all] block to make something else happen when the bug and red dot touch each other?
  • Can you create a timer that counts how many seconds you manage to avoid the red dots for?
  • Can you create a counter to count how many times you get hit by the red dots?

Next time

In the next lesson we’ll develop our game further using variables to create things like timers, score counters and lives. Then we’ll edit our sprites to give our game a unique and interesting theme!

Recent Posts
Most Commented
© A Little Learning 2020 A Little Learning is a trading name of Left Blank Ltd. Company Number 12956468