This code along has finished! ⌚
You can watch it back by playing the video!
The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!
Go to the arcade.makecode.com website and create a new project.
In this game you will control a spaceship that has to dodge and shoot asteroids that come flying at it.
Add the following code to create the spaceship sprite and use the sprite editor to design your spaceship.
Rename your sprite to spaceship.
let spaceship = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . d d d . . . . . . . .
. . 2 2 2 1 1 1 d d . . . . . .
. . 2 4 4 1 1 1 1 1 d d . . . .
. 2 4 4 5 1 1 1 1 1 1 1 d d . .
2 4 4 5 5 1 1 1 1 1 1 1 1 1 d d
2 2 4 4 5 1 1 1 1 1 1 1 d d . .
. 2 2 4 4 1 1 1 1 d d d . . . .
. . 2 2 2 d d d d . . . . . . .
. . . . 2 d d . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Player)
Click on the gray box in the sprite block to open the Editor. You can choose a sprite from the Gallery or you can paint your own sprite using the Editor.
Now add the following new code to control the spaceship with the arrow keys and set it so that it cannot go off the screen.
let spaceship = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . d d d . . . . . . . .
. . 2 2 2 1 1 1 d d . . . . . .
. . 2 4 4 1 1 1 1 1 d d . . . .
. 2 4 4 5 1 1 1 1 1 1 1 d d . .
2 4 4 5 5 1 1 1 1 1 1 1 1 1 d d
2 2 4 4 5 1 1 1 1 1 1 1 d d . .
. 2 2 4 4 1 1 1 1 d d d . . . .
. . 2 2 2 d d d d . . . . . . .
. . . . 2 d d . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Player)
controller.moveSprite(spaceship, 150, 150)
spaceship.setStayInScreen(true)
Arcade is designed for programming games so there's lots of helpful blocks that we can use.
To set the number of lives you have at the start of the game, add the set life to 3 block.
let spaceship = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . d d d . . . . . . . .
. . 2 2 2 1 1 1 d d . . . . . .
. . 2 4 4 1 1 1 1 1 d d . . . .
. 2 4 4 5 1 1 1 1 1 1 1 d d . .
2 4 4 5 5 1 1 1 1 1 1 1 1 1 d d
2 2 4 4 5 1 1 1 1 1 1 1 d d . .
. 2 2 4 4 1 1 1 1 d d d . . . .
. . 2 2 2 d d d d . . . . . . .
. . . . 2 d d . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Player)
controller.moveSprite(spaceship, 150, 150)
spaceship.setStayInScreen(true)
info.setLife(3)
Now let's create a new asteroid sprite every 1 seconds. Add the following code and then use the sprite editor to design your asteroid.
Rename your sprite variable to asteroid and set it to a type of Enemy.
game.onUpdateInterval(1000, function () {
asteroid = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . d d d d d . . . . .
. . . . d d d d d d d d d . . .
. . . . d d b b d d b b d . . .
. . . . d d d d d d d b d d . .
. . . d d b d d d d d b d d d .
. . d d d b d d d d d d d d d .
. . d d d d d d d d d d d d d .
. . d d d d d d d d d d d d . .
. . d d d b d d d d b d d . . .
. . . d d b d d d b b d d . . .
. . . d d d d d b b d d d . . .
. . . d d d d d d d d d d . . .
. . . . d d d d d d . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Enemy)
})
Click on the gray box in the sprite block to open the Editor. You can choose a sprite from the Gallery or you can paint your own sprite using the Editor.
We want the asteroids to get created and fly in from the right hand side of the screen.
Add the following 3 new code blocks to set speed and direction of the asteroids.
- Setting the vx (velocity x) value to a random number between -20 and -100 will make the asteroids move in the left direction at a random speed. They move to the left as we are using a negative number, if we used a positive number they would move to the right.
- Setting the x position to 160 will make the asteroid start off the screen to the right.
- Setting the y position to a random number between 0 and 120 will make the asteroid start off in a random position somewhere between the top (0) and the bottom (120) of the screen.
- Setting the auto destroy to on means that the sprites will be deleted once they move off the screen (and don't slow down our game).
let asteroid: Sprite = null
game.onUpdateInterval(1000, function () {
asteroid = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . d d d d d . . . . .
. . . . d d d d d d d d d . . .
. . . . d d b b d d b b d . . .
. . . . d d d d d d d b d d . .
. . . d d b d d d d d b d d d .
. . d d d b d d d d d d d d d .
. . d d d d d d d d d d d d d .
. . d d d d d d d d d d d d . .
. . d d d b d d d d b d d . . .
. . . d d b d d d b b d d . . .
. . . d d d d d b b d d d . . .
. . . d d d d d d d d d d . . .
. . . . d d d d d d . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Enemy)
asteroid.setVelocity(randint(-20, -100), 0)
asteroid.setPosition(160, randint(0, 120))
asteroid.setFlag(SpriteFlag.AutoDestroy, true)
})
To defend our spaceship we will fire rockets when we press the A button on the gamepad (the space key on your keyboard when you are using the simulator).
Add the following code.
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
projectile = sprites.createProjectileFromSprite(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . 4 . . . . . . . . . .
. . . 5 5 4 2 2 . . . . . . . .
. . 5 5 5 4 2 2 2 2 2 2 2 2 2 2
. . 5 5 5 4 2 2 . . . . . . . .
. . . . 5 4 . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, spaceship, 200, 0)
})
let projectile: Sprite = null
Now let's detect when one of your rockets hits an asteroid. If it does we will make the asteroid explode and give the player 1 point.
Add the following code.
sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, otherSprite) {
otherSprite.destroy(effects.ashes, 200)
info.changeScoreBy(1)
})
Finally let's detect when an asteroid hits our spaceship. When it does we will destroy the asteroid, do a camera shake effect and lose a life.
Add the following code.
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
otherSprite.destroy(effects.fire, 200)
scene.cameraShake(4, 500)
info.changeLifeBy(-1)
})
That's it you've completed the Space Shooter game in Arcade, have fun playing it and try adding something new into the game.
If you do have an Arcade handheld computer download the code onto it so you can play it on the go!
Give your project a name and send it to your Arcade game console (i.e. BrainPad Arcade) by following these steps:
- Type "your project name" into the Project Name box.
- Connect your game console to your computer using the USB cable.
- Click the 'Download' button (a file called 'arcade-project-name.uf2' will be downloaded to your computer).
- Open the folder on your computer where the file downloaded to.
- Right click on the file.
- Click Send To.
- Click Arcade (or whatever your game console is listed as).
As an extra challenge have a think about how you would add a power up into the game. Something that you collect that gives you an extra life.
Join our club 😃
Create your profile, earn points & badges and learn how to code!
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.