Space Invader in Scratch

This step by step tutorial will demonstrate how to re-create “Space Invader” using the online version of Scratch.

space-invader-scratch

Step 1Step 2Step 3Step 4Step 5Step 6Step 7Extension

Setting up the stage


Start a new project in Scratch and change the stage backdrop to the backdrop called “Stars”.
scratch-add-backdrop
space-invader-stars-backdrop

The Spaceship/Rocket Sprite


Next, we will delete the Cat sprite and create a new Rocket sprite:
scratch-remove-sprite-cat
space-invader-rocketship
We will also resize our Rocketship sprite to 35% of its original size:
space-invader-resize-rocketship

The rocketship sprite has 5 costumes but costume 5 is bigger than the other 4 costumes, so we will delete costume 5:
space-invader-remove-costume

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:
scratch-switch-to-stars-backdrop

Now let’s animate the Rocketship sprite:
scratch-animate-rocket

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.
scratch-left-right-rocket

The Invader Sprite


Let’s add a new sprite using the “Gobo” sprite from the scratch library:
scratch-gobo-sprite
We will then resize our invader sprite to 40% of its original size:
scratch-resize-invader

Let’s add some code to our invader sprite to position and animate the sprite:
scratch-animate-gobo

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).
scratch-invader-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:
scratch-game-over-screen

Then we will add some code to our Invader sprite to detect when the invader is touching the rocket ship.
scratch-game-over-trigger

Adding a laser beam sprite


To add a laser beam, we will paint a new sprite:
scratch-paint-new-sprite
scratch-paint-laser-beam

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:
scratch-fire-laser-beam

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:
scratch-variables-section
Then you will click on the “Make a Variable button”.
scratch-make-variable
Give a name to your variable: score and tick the option “For all sprites”
scratch-ball-bouncing-code-complete
Make sure your variable is visible (Tick the checkbox next to the variable itself):
scratch-make-variable-visible
Using our Rocket ship sprite we will edit our code as follows to reset the score to 0 when the game starts:
scratch-reset-score-variable

Then we will add some code to our invader sprite:
scratch-laser-collide-invader

Let’s add some more invaders


We will duplicate our invader sprite 10 times:
scratch-duplicate-gobo-sprite

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:
scratch-invaders-positions

We now have a fully working game!

space-invader-scratch

Extension Task


Add a “Level Complete!” screen that appears when the user scores 10 points (All invaders have been destroyed!).
Share Button
Tagged with: