This step by step tutorial will demonstrate how to re-create “Space Invaders” using the online version of Scratch.
Setting up the stage
Start a new project in Scratch and change the stage backdrop to the backdrop called “Stars”.
The Spaceship/Rocket Sprite
Next, we will delete the Cat sprite and create a new Rocket sprite:
We will also resize our Rocketship sprite to 35% of its original size:
The rocketship sprite has 5 costumes but costume 5 is bigger than the other 4 costumes, so we will delete costume 5:
Let’s start coding
Using the Rocketship sprite, let’s add some code.
First we will make sure the “Stars” backdrop is always displayed when the game starts:
Now let’s animate the Rocketship sprite:
Controlling the Rocket ship using the left and right arrow keys
The rocket ship is positioned at the bottom of the screen. The user should be able to slide the rocket ship horizontally to the left or the right using the arrow keys.
The Invader Sprite
Let’s add a new sprite using the “Gobo” sprite from the scratch library:
We will then resize our invader sprite to 40% of its original size:
Let’s add some code to our invader sprite to position and animate the sprite:
Now let’s add some code to make the invader move across the screen. Everytime the sprite reach the edge, it should drop down closer to the rocket ship and change direction (left/right movement).
Adding a Game Over Screen
The games ends when an invader hits the rocket. To implement this we will first need design a Game Over screen/backdrop:
Then we will add some code to our Invader sprite to detect when the invader is touching the rocket ship.
Adding a laser beam sprite
To add a laser beam, we will paint a new sprite:
Firing the laser beam
The following code will let the user fire a laser beam by pressing the space bar. The laser beam will always be launched from the rocket ship current position:
Adding a score variable
Let’s make a new variable called score. We will use this variable to score 1 point when the laser beam hits an invader. To do so we will need to go to the variable section:
Then you will click on the “Make a Variable button”.
Give a name to your variable: score and tick the option “For all sprites”
Make sure your variable is visible (Tick the checkbox next to the variable itself):
Using our Rocket ship sprite we will edit our code as follows to reset the score to 0 when the game starts:
Then we will add some code to our invader sprite:
Let’s add some more invaders
We will duplicate our invader sprite 10 times:
All we have to do now is re-position each invader sprite one at a time by changing their x and y coordinates in the code:
We now have a fully working game!
Add a “Level Complete!” screen that appears when the user scores 10 points (All invaders have been destroyed!).