# Scratch Tutorial – Colliding Clones in Scratch Games

## & (more) Linear Search

The tutorial below looks at how to create clones in Scratch and detect whether two different clones have collided with each other using a linear search algorithm. This is an extension of the first clones tutorial – I’d recommend following this first!

This tutorial is a step by step guide for students learning independently. A lesson pack for teachers is available here.

Creating The ClonesMoving and Tracking ClonesDetecting MovementChecking if the Clones Collide

## Creating a Clone of a Sprite

A clone of a sprite is a copy of a sprite that you’ve created. Extra code can be added to give the clones code that runs when they’re created.

This tutorial shows how to create two types of clone which will disappear is they collide with each other. This is the type of algorithm that is useful in shooting games like the Bug Spawner Game where the bugs we need to shoot are all clones of a sprite.

In the same way as the first clone program, start by creating a new sprite that is a simple square on the stage.

Then create another sprite which is a circle of a different colour. Place these in different places on the stage.

These are going to act as the original sprites for our program. When the game runs, we’ll hide these sprites and create three clones of each which will move randomly around the screen.

Because we need to know which clone is moving around, we will give each one an ID number. This works a bit like giving each one a name badge so we know which shape is which.

To do this, we need to create a “local” variable in the Square sprite code called “square id”. We do this by clicking on the Square sprite, then the variables menu. In here, we create a variable checking the “For this sprite only” option when we create the new variable.

We’ll repeat this in the Circle sprite to create a local variable called “circle id”.

To make it easier to see which clone is which, we’ll create duplicates of the costumes for both the Circle and the Square sprites giving each duplicate a number from 1 to 3.

Then we’ll rename each of these costumes to a meaningful name like “circle_3”.

This means that we can set the costume to show the clone ID number when the clones are created.

Although this set up is a bit fiddly, it will save time in the long run!

Before we can start creating the code, we need to create one more variable called “circle to destroy”, this time setting it to be available to all sprites. This variable will let us know which of the circles has been hit.

In the code of the square, create a starting block for when the green flag is clicked.

We hide the original square sprite because it’s the spawns that we want to add the “real” code to.

We’re going to assign the starting value for “circle to destroy” to 0 so that no circle has been selected (yet!), and “square id” to 1 so we’re ready to create the first clone of the square.

By adding a repeat block we can decide how many squares we want to add to the stage. I’ve used 3 here to match the number of costumes with numbers.

We’re going to create 3 clones of the square and each time increase the clone id variable by one – this will give each clone of the square it’s own number and let us check whether that clone has collided with something.

The “When I start as a clone” starter block will only run if a new clone is created.

By setting an id number for each clone, we can add an IF statement that will check the clone’s “square id” number and set a matching costume.

In a game, it’s unlikely that you’ll need to have this code that shows the number of a clone, but for examples where you’re testing out new ideas in code, being able to see what’s happening by showing it on the screen can be really helpful.

Some very similar code is used for the “Circle” sprite, although when this is started, there is no block setting the value of “circle to destroy” as this only needs to be set once. Click on the Circle sprite and add the code to create the clones and set the costume for each one:

Before we can test the code, we need to make our clones move around the screen. To do this, we’ll use the same block of code in the Square and Circle sprites.

Because we hid the original sprite, we need to make sure that the clone is visible when it starts.

Just like in our original clones program, to make the random movement easier, we can send each new clone to a random position, then point in a random direction so that when it starts moving, they’re all bouncing in different random directions.

There’s no real end to our simulation (apart from clicking stop), so a forever loop lets the movement & bouncing off the walls just go on forever.

At this point, you should be able to run your code and see your three clones labelled and moving around the screen:

## Tracking The Clones

Before we can start detecting whether they’ve collided, we need to store some important information about each clone: the x and y coordinates of each circle.

Because we have more than one circle clone, we need to track each one. We can do this with a list.

In the Variables menu, create a new “global” list called “circle x”. We make this global by selecting “For all sprites” when the list is created.

Repeat this, and create another list called “circle y”.

When you’ve created the lists, make sure that you have the visible on the screen checkbox selected.

When you can see the lists on your screen, click the + icon at the bottom to add three items to each list. Each item will match a clone, so if you have chosen a different number of clones, the number of items in your list must match the number of clones you chose to create.

The final part for tracking is to add two extra blocks of code into just the Circle clone’s movement loop.

This will save the x and y coordinates for each Circle clone into its place in the list (circle 1 will store it’s x & y coordinates in place 1, circle 2 will store it’s x & y coordinates in place 2… etc.).

We use the replace block because we want to constantly track each clone’s position as it moves.

The round block makes sure that we’re storing whole numbers so to make checking the position easier.

## Checking if the Clones Collide

The collision block uses some big IF statements, so we’re going to break down building this section into smaller stages!

The algorithm that we’re using to check each circle to see if it’s collided with a square is called linear search. This is a computer science algorithm that looks at each item of data along a list, starting from the beginning and checking each one in turn until the data we’re looking for (a collision) is found, or the end of the list is reached.

Unlike the movement code, we only need to add this to the Square Sprite.

If you’ve already completed the single clone collision program, you’ll notice that this is very similar. In Computer Science, this ability to solve new problems using methods that we’ve used before is called pattern recognition (and it’s why practicing code is so important).

We’ll start by adding another starting “When I start as a clone” block to the Square Sprite code. You may want to put this underneath your other code blocks as some of the lines end up quite long!

We want this to be checking for collisions all the time that the program runs, so a forever loop will go around all of the code.

We’re going to check all of the circles in our list, so we need to create a new variable called “check for circle”. This will start at 1, then count through each circle clone’s id number.

Then add a repeat block which will loop as many times as the circles in your lists. Inside this, we’ll increase the “check for circle” variable by one to look at the next circle.

Our two long IF statements will check that the circle’s coordinates for both x and y are inside the square.

If only one (x or y) matches, then the two sprites haven’t collided. Because of this, we need two IF statements: one to check for the X coordinates, and another for the Y coordinates.

The first of our long IF statements goes inside the repeat block. This checks to see if the X (left and right) coordinates of the circle are in the same range as the square.

Over in the code for the circle sprites, we need to add one final block of code to destroy the circle when it’s hit.

We’ll start by adding another starting “When I start as a clone” block to the Circle Sprite code.

We also want this to be checking all the time to see if it was hit, so a forever loop will go around all of the code.

We’re going to check if the current circle’s ID is the one that’s been hit. We’ll know this if the variable “circle to destroy” is the same as the circle’s id.

If it is, we’ll update the x & y coordinates in the list to a number that can’t be on the stage (this stops the squares from hitting ghosts of the circles), and destroy the circle sprite.

At this point, we’re ready to test that the coordinates are working by running the program and watching the data in the two lists:

And now, you should have a clone experimenter program that lets you detect other types of clone on the screen.

What did you do with your clone program? Let me know below!

# Scratch Tutorial – Bug Spawner Game

The Scratch tutorial below will show you how to create a bug shooter game in Scratch. This uses clones and a computer science algorithm called Linear Search to find and splat the bugs using our player character (and a few well aimed shoes).

I have created some beginner tutorials which you may find useful to work through before starting your full game: There’s A single clones tutorial which shows how to make clones detect each other, and The Colliding Clones Tutorial which shows how clones of two types can detect each other.

This tutorial is a step by step guide for students learning independently. A lesson pack for teachers is available here.

Creating The Player SpriteSetting Up The Player ScriptCreating The Bug SpawnersCreating The BugsSpawning Bugs!Creating & Shooting Bugs!Tracking Bugs!Shooting Bugs!Hitting a BugGame Over!Extensions

## Creating a Top Down Player Sprite

Start with a blank Scratch project and name it “Bug Spawner game” (or something similar).

Create a new sprite by choosing to draw your own sprite.

Start by adding a coloured circle for the top of the player’s head (this acts like the top of a hat).

Next, add another smaller circle overlapping the right of the first one in another colour. This will act like the peak of a cap to show which way the player character is facing.

Once the shape is in the right position, use the “Back” button to send the peak of the cap to the back of the drawing to create an image that looks like a hat.

Once you’ve drawn your sprite, give it a name of “player”.

Set the size of your sprite to 20. This will reduce the size from 100% to 20% and make it small enough to be a small player on the screen.

Set the X and Y coordinates to 0 (zero) to place the sprite in the middle of the screen.

## Setting Up The Player Script

Click on the player sprite & go into the code area.

Create a new variable called “lives”.

In the code area, move the sprite to the centre of the screen (0,0) and set the lives to the starting value of 5.

## Creating The Bug Spawners

Imagine the spawners like boxes that our bugs are created in and will be released from. If you’ve used a spawner in Minecraft, this is is a similar object. In our game, these won’t actually be the objects that spawn the bugs, but it will look like it!

Start by drawing a Sprite as a box or square. Alternatively, you can download the Spawner Box image below and upload this as a sprite:

Once you’ve created your sprite, set the name to “Spawner Yellow”.

Set the size to 30 (or about the same size as your player sprite).

Place it in the top right corner of the stage.

The game uses four spawner boxes, but we’ll make sure the first one works before creating any more.

## Creating The Bugs

Create a new sprite using the “Beetle” sprite in the Scratch menu.

In the Costumes tab, use the paint fill tool to change the colours of the beetle to Yellow to match the yellow bug spawner.

This is a much quicker way of changing an image that using the paintbrush!

Give the beetle sprite a name of “Yellow Beetle”.

Set the size to 50 (or just smaller than the spawner box).

Move the yellow beetle sprite so it is on top of the yellow spawner box.

Finally, click on direction and use the wheel to rotate the bug so it’s facing the player.

## Spawning Bugs!

It will actually be the Yellow Beetle sprite that spawns the other bugs, called “clones”. This helps to keep things simple, so while it might look like an image on the box, this is where all the exciting stuff happens.

Select the Yellow Beetle sprite and click on the code tab.

When the game starts, we want to start with just one new bug that will appear under the spawner box and move towards the player.

The Yellow Beetle sprite does this by creating a “clone” of itself. This uses all the same code as the original yellow beetle without us needing to write extra code for the new bug!

Stay in the Yellow Beetle sprite and click on the code tab.

“When I start as a clone” will run when a new version of the yellow beetle is created by the spawner.

Start the bug in the same position as the Yellow Beetle sprite.

Point the new bug towards the player sprite.

Create a loop that will move the bug 3 steps towards the player until they collide.

Once they collide, delete the new bug from the game.

## Shooting Bugs!

To shoot the bugs, we need to start by turning our player around. One of the easiest ways to do this is to use the mouse.

Select the Player sprite and open the code tab.

Add another starting block for when the green flag is clicked.

Create a loop that continues for the whole game that points the player sprite in the direction of the mouse.

## Creating New Bugs

Because we’re going to have more than one bug to shoot, and we can shoot more than once, we need to be able to keep a track of which bug is which. (If you’ve not completed the Colliding Clones tutorial yet, it’s a good idea to pause and look at this as you’ll be able to see this in a more simple program).

Select the Yellow Beetle sprite and open the code tab.

We’re going to create a new variable for each Yellow Beetle to give it it’s own number. A bit like the little flags our beetles are carrying below, these will be hidden numbers that help us to identify a beetle. We’ll call these IDs.

Because each new bug needs it’s own ID (number), when we need to create a “local” variable in the Yellow Beetle sprite code called “yellow bug id”.

We do this by clicking on the Yellow Beetle sprite, then in the variables menu. In here, we create a variable checking the “For this sprite only” option before clicking OK.

We need to repeat this for a second variable called “max yellow bugs”, but this time, check the “For all sprites” option. This variable will tell the program how many yellow bugs we want to spawn.

We’re now ready to create more bugs!

Click on the Yellow Beetle sprite, then in the code screen, add two new blocks at the start of the When the Flag is clicked block.

Under here, we’re going to set the starting “max yellow bugs” to 3 so we start with a low number (it will get bigger!). Then, set the yellow bug id to 1 so the first yellow bug has the number 1.

Finally, we’re going to update the code at the end to add a repeat block that will repeat the same number as the max yellow bugs variable.

Adding a wait block after each creation of the clone stops them from arriving on the screen too fast (you can change this to any speed you like, or even set it as a speed variable).

We can test the code at this point to check that our spawner is creating three bugs that appear, move towards the player, then vanish when they reach the player sprite.

## Tracking The Bugs

At this point, we can’t tell which bug is which, so we’re going to store them into a list.

We’re going to use this list to track the position of each bug using its X and Y coordinates.

We’ll start by tracking the X (left & right).

With the Yellow Beetle sprite selected, in the Variables menu, create a new “global” list called “yellow x”. We make this global by selecting “For all sprites” when the list is created.

This will appear on the stage as an empty box. Don’t worry that it takes up a lot of space, because we can hide it as soon as we’ve checked that it works.

Lists are like variables, but they can hold more than one piece of data. The data is then found using the position that it is in the list. For our yellow bugs, bug clone number 1 will be saved at position 1, bug clone number 2 will be saved at position 2… etc.

In the code screen of the Yellow Beetle we’re going to create a special block called a Procedure. This is a block of code that can be reused more than once – in this case, all of the code to set up and spawn the yellow bugs!

In the “My Blocks” menu, select “Make a Block” and give it the name “spawn yellow beetles”.

Before you click ok, click on “Add an input” for number so we can tell it how many to spawn. We’ll call this “number of bugs”.

Your new clode block will now show with the word “define” next to it. This means that anything under this block is what happens when the block runs.

With this new clode block, we can make some changes to the Spawner Yellow code to make things more efficient (writing less code is always good!)

We’ll start by adding a repeat block under the spawn procedure that will keep adding new items to the yellow x list until it’s the same length as the number of bugs that we want to create.

These items are given the value 2000 so that they can’t be mistaken for an actual X coordinate (2000 would be waaaaay off the screen!).

You might have noticed that we’re using the pink “number of bugs” instead of the variable “max yellow bugs”. That is because number of bugs is a parameter – that means it’s data that’s passed into the procedure block and often has a different name. When we call this block, we’ll give it (pass in) the value of our “max yellow bugs”.

After the repeat block, we’re going to move the repeat block from under the When the flag is clicked and change the “max yellow bugs” variable for our new “number of bugs” parameter. This means that this code can be run at the start of the game or for a new round later on.

Finally, under the When the flag is clicked block, we’re going to add two more blocks.

We want to start each new game by clearing the list so it’s ready for our new bugs, then calling the “spawn yellow beetles” procedure giving it the value of “max yellow bugs”.

When we’re using procedure blocks, calling is like shouting over to the block that it’s time to do your thing! As programmers, this means that we can write the code in a block just once and use a single block to run it more than once – less work for us!

The final piece of our yellow bug puzzle is to give each new yellow bug an ID and save where it is inside the list.

We’re going to add one final block to the “spawn yellow beetles” procedure. This increases the yellow bug id by 1 so that each new bug is created with a new id number.

Add another When I start as a clone block to the Yellow Beetle sprite. In here we want to use a forever block to repeat adding the X coordinate into our list all the time that the sprite clone is on screen.

The “yellow bug id” that we gave our clone helps to find the place in the list to save the data. Rounding the x position makes this easier to see.

In the original When I start as a clone block, we also want to update the list when we delete the clone. This helps to prevent “ghosts” on the stage where the X coordinate is still being tracked.

Using 3000 helps to set this outside of the stage, but also lets us know that this is a bug that is deleted (as we set it to 2000 when we created the list).

Running your game now, you’ll be able to see the list track the X coordinates of each bug, then set them to “3000” as they disappear.

Because we need to track both X and Y coordinates, we need to repeat this process using a list for “yellow y”.

• Create a new list called “yellow y”
• When the flag is clicked, delete everything from the list
• In the define procedure add a block inside the first repeat to add “2000” to the “yellow y” list
• Inside the forever loop, replace the item as “yellow bug id” in “yellow y” with the rounded y position
• When the bug is destroyed, replace the item as “yellow bug id” in “yellow y” with “3000”

Your final Yellow Beetle sprite code, should look like this:

## Create a Sprite to Shoot

Create a new sprite using the “Shoes” sprite in the Scratch menu.

In the costumes, select the shoes-a and delete one of the shoes.

Move the remaining shoe into the middle of the screen so it lines up with the middle “target” icon.

Repeat this for all of the shoe costumes so that there is just one shoe in each.

Click on the Code tab for the shoe sprite.

When the game starts, set the original sprite to hidden. This will let us create clones to throw at the bugs, but we won’t see the original.

When the player shoots (throws), a clone will be created of the shoe sprite. The new clone needs to be visible, and if we place this at the back “layer” of the stage, it will look like it’s appearing from under the hat of our player.

The clone of the shoe needs to start at the same position as the player and be facing in the same direction.

As the player faces the mouse, we can set the shoe to do this too.

After this, the shoe will keep moving in that direction until it reaches the edge of the screen.

We also want it to disappear if a bug is hit, but we will create that from the bug’s code.

Finally, click on the “Player” sprite and select the code tab.

Add blocks so that when the space key key pressed, a clone of the shoe is created (which will run the code above).

## Hitting a Bug

The final thing that we need to do in this section is to check if the shoe has hit a bug. If it has, we want to remove both sprites.

This requires a long IF statement to check each bug so we’ll break this down, step by step.

We’ll start by creating a new “local variable” called “check yellow”. This will be used to check each possible yellow bug by creating a loop for each yellow bug id.

Remember to check “for this sprite only” because we can fire more than one shoe.

This means that each shoe will check separately for the possible bugs to hit.

We’ll also create a global variable “for all sprites” called “yellow bug to destroy” which will tell the correct yellow bug that it’s been hit.

The algorithm that we’re using to check each bug to see if it’s collided with a shoe is called linear search. This is a computer science algorithm that looks at each item of data along a list, starting from the beginning and checking each one in turn until the data we’re looking for (a collision) is found, or the end of the list is reached.

Start by adding another When I start as a clone block. This will mean that each shoe is checking for collisions.

All the time that the shoe is on the screen, we want to repeat a check for every bug.

Set “check yellow” variable to 1 to start at the first bug, then use a repeat block to increase the “check yellow” variable by 1 until all yellow bug ids have been checked.

Using the “max yellow bugs” variable for this means that no matter how many bugs have been created, it will check all of them.

Our two long IF statements will check that the yellow bug’s coordinates for both x and y are inside the shoe sprite. The + and – 30 in here are the width of the bug (for your code, you may need to adjust this a little bit to match the width of your bug sprites).

We can break this code down into pieces:

• IF…
• The x position of the shoe is less than…
• … the x position that’s stored in the list at the position of the current bug we’re checking…
• … plus it’s width
• AND
• The x position of the shoe is more than…
• … the x position that’s stored in the list at the position of the current bug we’re checking…
• … minus it’s width
• THEN
• … we might have a collision!

If only one (x or y) matches, then the two sprites haven’t collided. Because of this, we need two IF statements: one to check for the X coordinates, and another for the Y coordinates.

Our two long IF statements will check that the yellow bug’s coordinates for both x and y are inside the shoe.

The second IF statement checks the Y coordinates and goes inside the first – we only need to run this block If there is a collision for X. If there isn’t a collision for the X co-ordinates, there’s no need to check Y because there wasn’t a collision as both must be true.

If the second IF statement also finds a collision, then we can set the variable “yellow bug to destroy” to the ID of the current bug (check yellow).

Waiting a short time gives the program time to destroy the right bug, then we can delete the shoe too.

The final piece of code to add is an extra IF statement to the Yellow Beetle sprite.

Inside the When I start as a clone loop, the IF statement checks to see if the current yellow bug to destroy is the same as the yellow bug id (it’s ID number). This is like the bug asking “is it my turn?”.

If it has been hit, then just like when the bug reaches the player, the coordinate list is set to 3000, then the bug is deleted.

## Game Over

The game will be over, when all the bugs are gone, or when the player runs out of lives.

In the Player sprite, update the When the flag is clicked block to add a loop at the end to look for collision.

This is much more simple than our shoe & bug collision as there’s only 1 player.

If the player is touching a bug, then reduce the lives variable by 1.

The wait block allows the bug to disappear (otherwise more than one life will be removed).

On the Stage, create a new backdrop for your end screen that will show your player that the game is over.

In the code area of the backdrop, add a new When the flag is clicked block.

At the start of the game, set the backdrop to be your original game backdrop, so it always starts with the play screen.

Add a loop to check through the game to see if the player’s lives have run out (are less then 1).

If the player has run out of lives, switch the backdrop to the end screen and stop all scripts to end the game.

Coming soon!