Atari promotional poster for Asteroids

Asteroids was one of the first games coded for the big, old-fashioned arcade machines.

You can play a version of it today without going into an old-style arcade.

Play here

Basic Ingredients

To get started in 2Code, we'll set up some basic ingredients for the ship and the space background.

  1. Log in to Purple Mash and go to 2Code.
  2. Select 'Free Code Gorilla'.
  3. Go into 'Design' mode and drag a vehicle object into the design.
  4. Change its image to a spaceship. Choose a rockets in the 'space' category or paint your own.
  5. Change its name to 'spaceship'.
  6. Make it smaller by setting its 'scale' property. Anything under 50% should work OK for now.
  7. Finally, change the background to something spacey.

Move the Ship

Exit design mode and see that your new 'spacehip' object has appeared in the objects area. You will need some 'when key' events to control the ship using the arrow keys.

  1. Drag a 'when key' event into the code area.
  2. Set it for the 'up arrow' key.
  3. Drag a reference to your 'spaceship' object into the body of the 'when key' event.
  4. Increase (add to) the speed of your spaceship.

Repeat for the other arrow keys. Test your code by pressing the 'Run' button.

Add some asteroids

This might seem a bit odd at first, but you need to add an 'Animal' object and then change it into an asteroid. That's right, in the 2Code world, asteroids are animals.

The reason for this will become clear when you set up the collision detection for when the ship collides with asteroids. It helps that the asteroids are a different type of object.

  1. Go back into design mode (you are saving as you go along, aren't you?)
  2. Drag an animal into the design.
  3. Change its picture into an asteroid. You'll need to paint this one.
  4. Rename it to 'ast1'
  5. Copy it and drag the copy to a new starting position

After this step, you will have two asteroids to code with. You can add more later.


Make the asteroids move

One of the reasons I suggested animal objects for the asteroids was because they have a speed and angle property like the vehicle object we used for the spaceship.

Set the speed and angle of each new asteroid ('ast1' and 'ast2') to be random numbers.

You'll have to experiment to find the right ranges for the game.


You can organise your code by creating a new tab for the asteroid code. You can also rename the 'MyCode' tab to a more meaningful word.

What should happen when the asteroid hits the ship? Can you predict what code block you'll need?


Asteroids Destroy the Ship

We want the ship to be destroyed when hit by an asteroid so, of course we need a collision detection block.


See how we used 'any animal' when choosing what the ship collides with. This is so we don't have to write the same code again for each asteroid. Because they are all animals, they'll all trigger this collision event.

So far, there are no extra lives for the ship; the player only gets one chance. We'll add lives later on.


Give the Ship Some Protection

One of the best things about the original asteroids game was that the ship had a laser blaster to defend itself with. Shooting up the asteroids is the most important part of the game.

This means we need to add another object in Design Mode.

  1. Go back into 'Design' mode and drag in a new vehicle object.
  2. Change its image and scale to make a thin yellow line like a laser bolt.
  3. Change its name to 'blaster'.
  4. Make it invisible in the game using the show/hide property.

It helps to put it near the ship to remind you what it is. Of course, the ship will probably move in the game and you can't see it anyway. This is just a way of keeping organised.

For the blaster to work, our code needs two new events. The first is a FIRE! when key event that shoots the blaster. I've used the spacebar, but you can choose whichever key you want.

Click the image to see it bigger.


The Blaster Destroys Asteroids

The second new event we need is a collision detection between the blaster and any asteroid (animal).

Let's keep things simple, for now, by not breaking up the asteroids into smaller pieces.

To hide the asteroid that the blaster hit, you need to drag in a change variable block. Then you can select collided animal and set its 'show/hide' property to hide.


Keep Score

Now that the ship can destroy asteroids, we can start keeping score.

First, use Design Mode to add a number to the screen, as shown in the picture.

  1. Use Design Mode to add a number to the screen.
  2. Change its name to 'score'.
  3. Add a text object next to it.
  4. Click the object and change the word to 'Score:'.
  5. You can also change its name property to remind you what it is.
  6. It improves the appearance of the game if you make the text size property the same for both.

Now we need to make the score go up when the blaster destroys an asteroid. Add the code shown to the collision detection between the blaster and any animal.

This code only gives you one point for destroying an asteroid.

How would you change it to give more points?

Click the image to see it bigger.

It will look a little odd in Design Mode because both the number and the text will show the word 'score'. Don't worry, that will change when you run the program and you will see 'Score: 0' when it starts.