Game Arcade Inventor Project
Normal
60 mins
485 points
What you need:
  • Computer/laptop

Arcade Space Shooter

Control a space ship that has to dodge and shoot asteroids!

This message will be visible to everyone. Send

    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!

    1 - Create a new Arcade project

    Go to the arcade.makecode.com website and create a new project.

    2 - Create your spaceship sprite

    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)

    3 - Control the spaceship

    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)
    

    4 - Set the number of lives

    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)
    

    5 - Create the asteroids

    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)
    })

    6 - Program the asteroids

    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)
    })
    

    7 - Fire rockets

    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


    8 - Destroy asteroids

    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)
    })


    9 - Lose a life

    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)
    })


    10 - Send the code to your handheld

    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!


    11 - Challenge

    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.

    see the code

    let powerup: Sprite = null
    game.onUpdateInterval(randint(5000, 20000), function () {
        powerup = sprites.create(img`
            . . . . . . . 5 . . . . . . . . 
            . . . . . . 5 5 5 . . . . . . . 
            . . . . . 5 5 2 5 5 . . . . . . 
            . . . . 5 5 5 2 5 5 5 . . . . . 
            . . . 5 5 5 5 2 5 5 5 5 5 . . . 
            . . 5 5 5 5 5 2 5 5 5 5 5 5 . . 
            . 5 5 5 5 5 5 2 5 5 5 5 5 5 5 . 
            5 5 2 2 2 2 2 2 2 2 2 2 2 2 5 5 
            . 5 5 5 5 5 5 2 5 5 5 5 5 5 5 . 
            . . 5 5 5 5 5 2 5 5 5 5 5 5 . . 
            . . . 5 5 5 5 2 5 5 5 5 5 . . . 
            . . . 5 5 5 5 2 5 5 5 5 . . . . 
            . . . . 5 5 5 2 5 5 5 . . . . . 
            . . . . . 5 5 2 5 5 . . . . . . 
            . . . . . . 5 5 5 . . . . . . . 
            . . . . . . . 5 . . . . . . . . 
            `, SpriteKind.Food)
        powerup.setPosition(160, randint(0, 120))
        powerup.setVelocity(-100, 0)
        powerup.setFlag(SpriteFlag.AutoDestroy, true)
    })
    
    sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, otherSprite) {
        otherSprite.destroy(effects.ashes, 200)
        info.changeScoreBy(1)
    })
    
    

    Join our club 😃

    Create your profile, earn points & badges and learn how to code!

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more