Alex & Jordan in Computer Science

Alex - Alex & Jordan in Computer Science

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.

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

Scratch Variable - 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!

Scratch Sprite: Spawner Box

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.

Scratch Bucket Fill Tool

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 green flag clicked
create clone of [myself v]

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.

Test out your code to see if your player rotates with your 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!

when green flag clicked
set [max yellow bugs v] to [3]
set [yellow bug id v] to [1]
create clone of [myself v]

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.

when green flag clicked
set [max yellow bugs v] to [3]
set [yellow bug id v] to [1]
repeat (max yellow bugs)
    create clone of [myself v]
	wait (1.5) seconds
end

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.

Bug Spawner Game Tutorial in Scratch

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

define spawn yellow beetles (number of bugs)
repeat until <(length of [yellow x v]) = (number of bugs)>
    add [2000] to [yellow x v]
end
repeat (number of bugs)
    create clone of [myself v]
    wait (1.5) seconds
end

“></p>
</div>



<div class=

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.

when green flag clicked
set [max yellow bugs v] to [3]
set [yellow bug id v] to [1]
delete all of [yellow x v]
spawn yellow beetles (max yellow bugs)

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.

when I start as a clone
forever
    replace item (yellow bug id) of [yellow x v] with (round (x position))
end

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.

when I start as a clone
go to x: (207) y: (163)
point towards [Player v]
repeat until <touching [Player v]>
    move (3) steps
end
replace item (yellow bug id) of [yellow x v] with [3000]
delete this clone
“></p>
</div>



<div class=

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.

when I start as a clone
forever
    set [check yellow v] to [1]
    repeat (max yellow bugs)
        change [check yellow v] by (1)
    end
end

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.

Not a collision

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

when I start as a clone
forever
    set [check yellow v] to [1]
    repeat (max yellow bugs)
        if <<(x position) < ((item (check yellow) of [yellow x v]) + (30))> and <(x position) > ((item (check yellow) of [yellow x v]) - (30))>> then
            if <<(y position) < ((item (check yellow) of [yellow y v]) + (30))> and <(y position) > ((item (check yellow) of [yellow y v]) - (30))>> then
                set [yellow bug to destroy v] to (check yellow)
                wait (0.2) seconds
                delete this clone
            end
        end
        change [check yellow v] by (1)
    end
end

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.

when green flag clicked
go to x: (0) y: (0)
set [lives v] to [5]
forever
    if <touching [Yellow Beetle v]> then
        change [lives v] by (-1)
        wait (0.5) seconds
    end
end


“></p>
</div>



<div class=

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.

when green flag clicked
switch backdrop to [backdrop1 v]
forever
    if <(lives) < [1]> then
        switch backdrop to [backdrop2 v]
        stop [all v]
    end
end



“></p>
</div>



<div class=

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.

Extension: New Rounds

Coming soon!

Did you find this helpful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this.

I'm sorry that this wasn't very useful for you!

Help me to improve this!

Tell me how I can improve this?