Alex & Jordan in Computer Science
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.
To follow more tutorials from my Alex & Jordan in Computer Science series, please click here.
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!