Scratch Saturday: Shoot ’em ups

This is the second in our series on programming on Scratch. In our first series, we focused on Platform Games. In this series, we’re moving to the Shoot ’em up and we’ll be looking at the classic game, Space Invaders. Space Invaders was released in 1978 and is one of the best known shooter style games in the world. It has been copied and updated and “rebooted” many times but the premise remains the same: you control a spaceship that moves left and right as aliens move left and right across the screen edging downwards. You can shoot the aliens to kill them (and they can shoot you too!) To win the game, you need to kill all the aliens and to lose the game, you need to be hit by a bullet or touched by one of the aliens.

We’re going to make an extremely simple version of the game and, as in our other series, you can update it, adding elements of your choice. In my version, I’m going to leave out the shields you find in the arcade game. I will add it the spaceship that you see along the top. However, I’m going to have fewer aliens and only a few of them will shoot.

As there’s going to be over 20 aliens in our game, the trick will be to create your sprite, perfectly coded, and duplicating them. This will save a lot of time. Essentially, we only need a few types of sprites:

• The spaceship
• The spaceship’s bullet
• An alien (duplicated several times)
• Alien bullets
• A enemy spaceship (the one that scrolls along the top of the screen from time to time)

We’ll also need a few other sprites as we go along in order to keep the game moving the way we need it.

The first thing we’ll need to do in our game is to draw our sprites so we’ll focus on this in the next lesson.

Lesson 2

Before we start any programming of our Space Invaders game, we’ll need to create our sprites. In the previous article, we said that there weren’t that many sprites to draw – a couple of spaceships, an aliens and a few bullets! We’ll also need to create a couple of sprites that will be invisible. They will be used as triggers for broadcasting certain commands. Don’t worry if the previous sentence doesn’t make sense, we’ll be looking at broadcasts later in the series.

In my version of Space Invaders, I’m going to make my sprites look “8-bit” in nature. This means that they will be deliberately blocky looking. (See example aliens below)

You are more than welcome to make your spaceship, aliens, etc. as modern as you like but it will make your game a little bit more difficult to program as we will be relying on the command block <touching colour>.

Anyway, here are my sprites that I am using for my game:

• The spaceship, which I have coloured in green.
• The alien, which is a cyan colour
• The alien spaceship, which is red
• A bullet, which is simply a white line, not pictured here
• Two black barriers, which cause the aliens to change direction. 

You can download all the sprites by clicking on the links above.

In the next lesson, we’ll get the spaceship to move left and right and we’ll get the alien to move around the screen.

 Lesson 3

Let’s get moving – our spaceship, that is! One of the first lessons most people get when they start using Scratch is the ability to move a sprite. In our case, we have a spaceship that needs to move left and right. This makes our coding very easy indeed! We need to use the coding blocks <When x is pressed> where x is a key on the keyboard. Both of these are going to be very short: when the right arrow is pressed, the spaceship is going to move using the <move> block and I’ve set it to move 5 pixels. When the left arrow is pressed, it’s -5 (minus numbers meaning left in the move block.)

OK, that’s the first easy bit. Now we’re going to have to set up the alien’s movement. The main thing with this is that we need to make sure that we have every situation accounted for as we will be duplicating this alien many times. When the game starts, the aliens will have to be in particular places so I’m setting a small piece of code to position the alien. (see right)

As we are dealing with a sprite that is going to be duplicated many times, I have to think about this sprite as abstractly as possible. Every alien is going to be a separate object but will have some things in common. Here are some things it will have in common:

1. They will move left to right then right to left, moving down the screen.
2. Some of them will shoot bullets.
3. They will die.
4. If they touch the spaceship, the spaceship will die.

Let’s focus on the first point for the purposes of this lesson. We need to ask the question: what is the signal for all the aliens to change their direction? The answer to this must be when one of the aliens touches the side of the screen. So, we must set up the code that when any alien touches off the side of the screen, a signal: <move direction> must come to all the aliens. That sounds like a broadcast to me!

Setting up the game, when it starts, I’d like all the aliens to move from left to right. In this way, I’m kicking off with a broadcast message <move right>, which I’m going to set up in the coding area of the Stage. I’ve also set a variable called level to be 1. Don’t worry about this for now.

So what does <MoveRight> do? Let’s go to the coding section for the alien.

Firstly, it makes the sprite move down the screen by 20 pixels. Next it repeats until it touches a sprite called “right.” Where did this come from? There are two sprites – “left” and “right.” They are two black vertical lines, which are placed on the left and right of the screen respectively. Because the stage is black, they are invisible. They serve no other purpose other than to trigger the alien to leave the <repeat> loop.

Until the sprite does reach the “right” sprite, the computer is told to wait 0.1 divided by the level number seconds. As we set the level to 1 at the start of the game, the computer waits 0.1 seconds. Next the alien moves 5 steps to the right.

Once it touches off the “right” sprite, the command <broadcast moveLeft> is unleashed. I’ll let you figure out how to program, moveLeft!

I’ve mentioned the variable “level” a couple of times in this article so I should explain why I put it in. The plan for my game is that as the spaceship kills all the aliens, he moves to the next level. By my coding, the speed of the aliens will increase each time. For example, level 2 will make the alien wait 0.1 / 2 seconds, which is only 0.05 seconds. Level 3 will be 0.033 seconds and so on.

In the next lesson, we’ll start shooting bullets and get our alien spaceship moving.

Lesson 4

This lesson we’re going to get our spaceship to fire bullets and move our alien spaceship across the screen. The spaceship is probably the easiest of the two to do so we’ll code this first. There are a few things that we need to do with the spaceship. The first of these is to randomise how often the spaceship comes on to the screen. We’re going to make the spaceship move across the screen in 10 seconds so the journey is going to have to start after more than 10 seconds.

When we start our game, the alien spaceship is going to be hidden. I want it to appear between 12 and 20 seconds later, move across the screen, then disappear and start the process again. This should look a little bit like the code below.

You’ll notice that I’ve used the broadcast tool for this. I’ve done this in case I need to reuse this code somewhere else for a different sprite.

Now let’s move on to firing a bullet from our own spaceship. In this case, I want my bullet to fire from the point where the spaceship is and I want it to go upwards. I’ll need it to stop when it either hits an enemy sprite or when it reaches the top of the screen. I want this to happen when I press the space bar.

Obviously, before I press the space bar, the bullet should not be seen so when I click the green flag, the only code for the bullet is <hide>. I need to set up a new broadcast called <fireBullet>. I do this for my alien ship. By the way, I only have one bullet so I can only fire one bullet at a time. This gives me a limited firing range, which makes the game more difficult. Perhaps, it’s something you might think about changing in your own game.

Anyway, the code is simple: when space is pressed, broadcast <fireBullet> then wait one second. The waiting for one second, stops the user from repeatedly pressing the space bar to give one second for the bullet to reach its destination. The bullet now receives the broadcast <fireBullet> and needs to act.

This code does the following:

• The bullet goes to the centre of where the space is and appears (<show> block)
• The bullet moves up by 10 pixels until it hits something that is red (the alien spaceship) or something cyan (an alien) or its position is more than 175 (near to the top of the screen)

This all takes around one second to complete, ready for the space bar to be pressed again and for another bullet to be launched!

In the next session, we’ll need to start doing some damage to our aliens and alien spaceships. We might even try a few cool explosion effects.

Lesson 5

This lesson I promised that we would do some damage to our aliens when they get hit by a bullet. We’re going to be working with costumes, variables and collisions. When an alien gets shot, we need to make it explode then disappear and finally give a score to the player. For the purpose of making life easy and simple, all the regular aliens are going to give a score of 100 and the spaceship is going to give a score of 1,000. The first thing we’ll do is make the costume for the alien. I’m going to make two more costumes – one with the alien on fire then one with a score of 100. I’m going to make the explosion fade before changing the costume to the score, which I’m going to make move upwards and fade. Below is a screenshot of my three costumes.

I’ll do something similar with the spaceship. The next thing for me to do is add a new variable. This is very easy. Simply go to the Variables section and click on the button, Make a Variable. Give it a name, (in this case <score> works well.) At the start of the game, I’m going to set the score to zero.

I also will need to set all the sprite’s costumes to their default costume. This should be done for each of the sprites. Now, we’re ready to do some damage!

What we want to do now is get our aliens to react when they are “touched” by the bullet. The code will need to be something along the lines of: if touched by the bullet, change costumes, hide and increase the score by 100. In the bit where we change costumes, I’m going to create some fading effects so it will take a second or two before the alien completely disappears.

Looking at the code above, the block <change ghost effect by> might need explaining. The ghost effect changes a sprites transparency. At 100 effect, the sprite has completely disappeared. The value of 0 is completely opaque. The rest of the effects should be fairly self-explanatory. We’ll do something very similar to the alien spaceship but we need to remember that when it is destroyed, it does come back again so don’t forget to reset its costume and its graphic effects!

Even though we’re in the early stages of our game, we now have the basis for a full game. The only things we really have to do is clone all the aliens and get our player to die somehow. I’m going to have two types of alien. One that shoots back and one that doesn’t. In the next part, I’m going to make our second character and see how this effects are game.

Lesson 6

So far, we have the foundations of our Space Invaders-inspired game and this week we’re going to add another character to see the effect of having more than one alien of the screen. We’ll also be creating a new variable called “lives”, which we will set at the predictable number of 3! Each time something bad happens, the variable will reduce by one until it reaches zero and the game ends.

Let’s get creating our variable and our new sprite!

The first job is done in the same way as creating any other variable as I showed in the last lesson. I’m going to duplicate my alien and change a few of its variable values. The only change I made is to move its starting position to be placed to the right of the first alien. On running the program, we come up with a small problem. This problem is that when our alien touches the right barrier, it receives the signal, <moveLeft>, but our other alien hasn’t finished moving right. We need to create a variable that breaks the other alien out of its loop. This variable is going to be called “breakLoop.”

We need all the aliens to move left or right when one alien reaches the side. Up until now, the program only tracked the one alien so now we have to send out a variable to all aliens to switch direction or get out of the <repeat until touching> loop. Now the aliens will keep moving in whatever direction they are going until they receive the message that <breakLoop> is now true. This happens when one alien touches <left> or <right>. Once the message gets to all the aliens, breakLoop goes back to being false.

While we have two aliens, we might as well add some code to let us know when we have completed the level. How will we know the level is completed? The answer is when all the aliens are dead. How do we know all the aliens are dead? Yes, we need a new variable: <numAliens>.

When the game starts, we need to set this variable to whatever number of aliens we have. So far we have 2 so we can set it at this number. We’ll change it later. Now we need to subtract 1 from the variable when we kill an alien so we’ll have to add this to each of our aliens.

Out new code on touching a bullet receives an extra line of code. We’re going to add a new block of code that waits for this momentous occasion and when it happens, it will reset everyone’s positions and change the level up by one. We’ll do this in the Stage’s script area.

The broadcast above tells the aliens to go back to where they started and to carry on moving in the direction they were going.

In the next lesson, we’ll start off finding some ways that our player can be killed.

Lesson 7

So far in our Space Invaders-inspired game, we have created the foundations of our characters and we have learned how to kill them off and move up a level when we kill all our aliens. So far, our game is easy because, firstly, we only have 2 aliens; and secondly, nothing can kill our player yet. One of our aliens is about to get armed! We’re going to create a new sprite for our alien, which we’re going to rename as <armed>.

This alien is the one that’s going to shoot a sprite called <ray>. When the game gets more aliens, we’ll have <armed2> and <ray2>, <armed3> and <ray3> and so on. The bullets are going to be yellow for the sale of ease when programming the <touching colour> block.

My plan is that each alien will fire a bullet at a random time. If it hits our player, he loses a life and we start the level again. If it misses him, the bullet gets destroyed. I’m going to create another sprite that allows the latter to happen and I’ll call it <bottom>. It’s going to be a horizontal black line that will only interact with the alien bullets and the aliens themselves.

The easiest bit will be the latter. We’re going to lose a life if the <bottom> touches off any alien life form. This will simply involve checking all the time for whether an alien is touching the <bottom>. If it is, we’ll hide the <bottom> immediately to stop losing more than one life, <lives> will reduce by one, there’ll be a bit of a pause, (maybe an animation) and we’ll reset the variables. So we need to make it <show> when we start the game.

I created a broadcast called <die> which tells the program to send a message to the spaceship to lose a life and reset the game. It also makes the <bottom> disappear so no extra lives are lost. When the spaceship receives the message, <die>, I’ve made a small explosion and then I reset the positions of the sprites.

Now to add some bullets to the fun. As stated before, we have an alien called <armed1> and now we have a bullet called <ray1>. Every random number of seconds, he’ll fire his bullet. To set this up, I’m going to do something similar to how we make the alien spaceship go across the screen as the trigger and then use a similar code for how we fire a bullet from our own spaceship. We’ll do this to the bullet. First, we need to place it at the centre of his alien and then we need to fire it downwards.

Notice at the end of the block starting <When I receive fireRay> that it ends with <broadcast fireRay>. This bullet will fire every 12 to 20 seconds. The last piece of the puzzle is to make the spaceship die if it’s hit by one of these bullets.

This is easily done by adding an <if> condition under <change y by -6>. You’ll need <if touching color green> then <broadcast die>.

You can try out the game now and see how you get on. Before we move on to the final part of our game, there remains one problem to sort out. Even when you kill an enemy alien, its bullets still fire. We need to set something up to prevent this. It looks like our next lesson is going to involve some variables.

Lesson 8

In our last lesson, we had almost got to a stage where we could safely say, “we’re almost done”, but we hit an obstacle. We have two types of alien: one shoots bullets and the other doesn’t. If we kill the non-shooting alien, we have no problems. However, if we shoot the armed alien and we kill him, his bullets live on. We need to find some general way to kill off his bullets when he dies. My idea to solve this problem is to create a list. In the world of programming, this is known as an array.

Each shooting alien is going to be given a number starting with one. Each corresponding bullet will have the same number. We’ll call the list/array: <deadAlien> and at the beginning, each <deadAlien> will have the value zero. (In programming, the value zero, usually means false and it is false that the aliens are dead at the start of the game.) If I kill Armed1, I’m going to set deadAlien[1] to the value of 1. My bullet will be constantly checking the value of deadAlien[1] and if it reaches 1, it will hide itself away.

Now, when our bullet hits the <armed1>, we’re going to change the value of deadAlien[1] to 1 and then we’ll make sure to hide <ray1>. The codes we use are below.

Once we finish a level, the list is reset back to zero. Because we are going to add lots more aliens to our game, we’ll probably set a loop to reset the list. Before we finish this lesson, we’ll add a couple of sounds to the game to liven it up. Adding sound in Scratch is really easy and I’m going to add a sound:

• when we fire a bullet
• when we kill an alien
• when we die
• when we hit the alien spaceship
• when the alien spaceship starts to move

Here’s an example of adding a sound to the alien spaceship. While I can add my own sounds, I’m going to use some of the sounds that come with Scratch by clicking the import button for the sprite I wish to make the sound for.

I’m going to add similar sounds for the other sprites. To make them play is very easy – you just use the <play sound> block like the one below.

In all cases, we’re going to play these sounds until they’re finished playing (until done). In our next lesson, we’re going to add the rest of our aliens to the mix and we should have a complete game of Space Invaders.

Lesson 9

It’s time to add the rest of the aliens. Remember we have two types of alien: one that shoots and one that doesn’t. In my version of the game, we’re going to have 18 aliens, 3 rows of 6. 9 of the aliens won’t be shooters and the other 9, you’ve guessed it, will. The easiest ones to set up are the non-shooters so we’ll add these first. We just need to duplicate the aliens. we only have to change one piece of code for each alien and that is its starting position. There are going to be 50 pixels between each alien horizontally and vertically.

The next stage is to add the shooters. Every time we duplicate a shooter, there are a couple of things to change:

• The starting position of the alien
• Where the ray is going to fire from
• The number of the alien (1 – 9) in each list item

At the start of the game, we also have to update our list to include all 9 shooting aliens. Each time we start a level, each item <deadalien> is set to zero and when we kill a shooter alien, the corresponding <deadalien> goes to 1 so he can’t fire anymore bullets.

All that’s left to do in our last lesson is to end the game once all our lives have gone.

Lesson 10

It’s our final lesson in developing Space Invaders and all that’s left to do is end the game once our lives reach zero. This is the easiest part of the game and involves us creating a new sprite, which simply states that the game is over. In my example, I’m going to make is appear on screen and change colour for a couple of seconds before the game ends completely.

The code for this sprite is fairly straight forward. When the game begins, hide it and when lives reaches zero, show it and do your effects. Here’s my code:

We have now finished our game of Space Invaders and all there’s left to do now is sit back and enjoy it! Below is the link to my game, where you can download and adapt it to your choosing. I hope you enjoyed the series and we’ll be back with another type of game to explore soon!