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

First Arcade Project

Let's create a simple game in Arcade so we can learn about the code editor and what sorts of things we can do.

We will be starting at 11 am Saturday the 3rd of April.
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 website and create a new project.

    arcade.makecode.com

    2 - Add a sprite

    When we add a sprite to an Arcade project, we add it by putting it into a variable. We normally use variables to store numbers and text but we can also put more complicated things in them like sprites!

    Add the following code to your project.

    let mySprite = sprites.create(img`
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        `, SpriteKind.Player)
    
    

    This creates a variable called 'mySprite' and stores a sprite of kind Player in the variable. There are different types of sprites such as:

    • Player - for sprites that are your character in the game.
    • Projectile - for bullets, rockets or anything you want to fire!
    • Food - for health packs, potions etc.
    • Enemy - for enemy sprites that you play against or attack you.
    • or you can even create your own kind of sprite!

    3 - Choose a sprite from the gallery

    You can paint and design your own sprite or you can choose one from the gallery. 

    let mySprite = sprites.create(img`
        . . . . . . f f f f . . . . . . 
        . . . . f f f 2 2 f f f . . . . 
        . . . f f f 2 2 2 2 f f f . . . 
        . . f f f e e e e e e f f f . . 
        . . f f e 2 2 2 2 2 2 e e f . . 
        . . f e 2 f f f f f f 2 e f . . 
        . . f f f f e e e e f f f f . . 
        . f f e f b f 4 4 f b f e f f . 
        . f e e 4 1 f d d f 1 4 e e f . 
        . . f e e d d d d d d e e f . . 
        . . . f e e 4 4 4 4 e e f . . . 
        . . e 4 f 2 2 2 2 2 2 f 4 e . . 
        . . 4 d f 2 2 2 2 2 2 f d 4 . . 
        . . 4 4 f 4 4 5 5 4 4 f 4 4 . . 
        . . . . . f f f f f f . . . . . 
        . . . . . f f . . f f . . . . . 
        `, SpriteKind.Player)
    
    
    

    4 - Move your sprite

    In Arcade we have a total of eight buttons (4 directions, A, B, MENU and RESET) and we can program each of these.

    Arcade also comes with useful blocks that let's us program somethings quickly. Add the following new code block to your project to program your sprite to move with the up, down, left and right buttons.

    let mySprite = sprites.create(img`
        . . . . . . f f f f . . . . . . 
        . . . . f f f 2 2 f f f . . . . 
        . . . f f f 2 2 2 2 f f f . . . 
        . . f f f e e e e e e f f f . . 
        . . f f e 2 2 2 2 2 2 e e f . . 
        . . f e 2 f f f f f f 2 e f . . 
        . . f f f f e e e e f f f f . . 
        . f f e f b f 4 4 f b f e f f . 
        . f e e 4 1 f d d f 1 4 e e f . 
        . . f e e d d d d d d e e f . . 
        . . . f e e 4 4 4 4 e e f . . . 
        . . e 4 f 2 2 2 2 2 2 f 4 e . . 
        . . 4 d f 2 2 2 2 2 2 f d 4 . . 
        . . 4 4 f 4 4 5 5 4 4 f 4 4 . . 
        . . . . . f f f f f f . . . . . 
        . . . . . f f . . f f . . . . . 
        `, SpriteKind.Player)
    controller.moveSprite(mySprite)
    
    
    

    After you add the block try moving the sprite using the direction buttons in the simulator.



    5 - Draw the tile map

    In Arcade we can create tile maps that our players can move around and through.

    Add the following new code block and then go into the editor to draw a simple map that just has a border all the way around the edge.

    let mySprite = sprites.create(img`
        . . . . . . f f f f . . . . . . 
        . . . . f f f 2 2 f f f . . . . 
        . . . f f f 2 2 2 2 f f f . . . 
        . . f f f e e e e e e f f f . . 
        . . f f e 2 2 2 2 2 2 e e f . . 
        . . f e 2 f f f f f f 2 e f . . 
        . . f f f f e e e e f f f f . . 
        . f f e f b f 4 4 f b f e f f . 
        . f e e 4 1 f d d f 1 4 e e f . 
        . . f e e d d d d d d e e f . . 
        . . . f e e 4 4 4 4 e e f . . . 
        . . e 4 f 2 2 2 2 2 2 f 4 e . . 
        . . 4 d f 2 2 2 2 2 2 f d 4 . . 
        . . 4 4 f 4 4 5 5 4 4 f 4 4 . . 
        . . . . . f f f f f f . . . . . 
        . . . . . f f . . f f . . . . . 
        `, SpriteKind.Player)
    controller.moveSprite(mySprite)
    tiles.setTilemap(tilemap`level3`)
    
    

    Once you have drawn your map, use the direction buttons to move your sprite again, you will notice that your sprite can move over the tiles you have drawn. This is because we have not drawn any walls yet.



    6 - Draw the walls

    A wall in Arcade is a tile that you cannot move through. We draw the walls separately using the editor.

    Open the editor again but this time choose the 'Draw Walls' tool. Then draw walls over the tiles that you drew in the previous step.

    Now when you try and move your sprite over the tiles it won't be able to as they are walls.



    7 - Camera follow sprite

    At the moment when you move down your sprite will move off the screen. This is because the tile map is bigger than the screen.

    Add the following new code block to make the camera follow your sprite as you move around the tile map.

    let mySprite = sprites.create(img`
        . . . . . . f f f f . . . . . . 
        . . . . f f f 2 2 f f f . . . . 
        . . . f f f 2 2 2 2 f f f . . . 
        . . f f f e e e e e e f f f . . 
        . . f f e 2 2 2 2 2 2 e e f . . 
        . . f e 2 f f f f f f 2 e f . . 
        . . f f f f e e e e f f f f . . 
        . f f e f b f 4 4 f b f e f f . 
        . f e e 4 1 f d d f 1 4 e e f . 
        . . f e e d d d d d d e e f . . 
        . . . f e e 4 4 4 4 e e f . . . 
        . . e 4 f 2 2 2 2 2 2 f 4 e . . 
        . . 4 d f 2 2 2 2 2 2 f d 4 . . 
        . . 4 4 f 4 4 5 5 4 4 f 4 4 . . 
        . . . . . f f f f f f . . . . . 
        . . . . . f f . . f f . . . . . 
        `, SpriteKind.Player)
    controller.moveSprite(mySprite)
    tiles.setTilemap(tilemap`level3`)
    scene.cameraFollowSprite(mySprite)
    
    
    

    Now when you move around the map the camera will follow your sprite.



    8 - Add some projectiles

    Now let's add some skill into the game. We're going to make a projectile fire across the map every 2 seconds. You will need to dodge them otherwise you'll lose a life if they hit you.

    Add the following code to your project.

    game.onUpdateInterval(2000, function () {
        projectile = sprites.createProjectileFromSide(img`
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            `, 50, 50)
    })
    
    

    Open the editor and paint your own design for the projectile.



    9 - Set their direction and speed

    A projectile is a motion sprite that moves from the location it’s created at. It moves with speeds (velocities vx and vy) that you set in both the horizontal and vertical directions.

    The side of the screen that the projectile starts from depends on the direction of the velocity values it’s given. The vx and vy velocities have either positive or negative values which determine the direction. The projectile starts from a side of the screen based on the velocity direction shown in the following table.

    Side vx vy
    upper left positive positive
    lower left positive negative
    upper right negative positive
    lower right negative negative

    After you have designed your projectile, add some (pick random) blocks into the vx and vy boxes as follows. This will randomise the speed and direction the projectiles come from.

    game.onUpdateInterval(2000, function () {
        projectile = sprites.createProjectileFromSide(img`
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . 5 5 5 5 5 5 5 . . . . 
            . . . 5 5 5 5 5 5 5 5 5 5 . . . 
            . . 5 5 f f 5 5 5 5 5 5 f f . . 
            . . 5 5 5 f f 5 5 5 5 5 f 5 5 . 
            . . 5 5 5 5 f f 5 5 5 f f 5 5 5 
            . . 5 5 5 5 5 f 5 5 5 f 5 5 5 5 
            . . 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
            . . 5 5 f 5 5 5 5 5 5 5 f 5 5 . 
            . . 5 5 5 f 5 5 5 5 5 f f 5 5 . 
            . . 5 5 5 5 f f f f f f 5 5 . . 
            . . 5 5 5 5 5 5 5 5 5 5 5 . . . 
            . . . . 5 5 5 5 5 5 5 5 . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            `, randint(-50, 50), randint(-50, 50))
    })
    
    

    10 - Detect overlap

    Now let's add some code to detect when a projectile hits your sprite (an overlap) and when it does play a sound and do an effect.

    Add the following code to your project.

    sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
        music.powerDown.play()
        mySprite.startEffect(effects.spray, 500)
    })
    
    let mySprite: Sprite = null
    controller.moveSprite(mySprite)
    tiles.setTilemap(tilemap`level3`)
    scene.cameraFollowSprite(mySprite)
    mySprite = sprites.create(img`
        . . . . . . f f f f . . . . . . 
        . . . . f f f 2 2 f f f . . . . 
        . . . f f f 2 2 2 2 f f f . . . 
        . . f f f e e e e e e f f f . . 
        . . f f e 2 2 2 2 2 2 e e f . . 
        . . f e 2 f f f f f f 2 e f . . 
        . . f f f f e e e e f f f f . . 
        . f f e f b f 4 4 f b f e f f . 
        . f e e 4 1 f d d f 1 4 e e f . 
        . . f e e d d d d d d e e f . . 
        . . . f e e 4 4 4 4 e e f . . . 
        . . e 4 f 2 2 2 2 2 2 f 4 e . . 
        . . 4 d f 2 2 2 2 2 2 f d 4 . . 
        . . 4 4 f 4 4 5 5 4 4 f 4 4 . . 
        . . . . . f f f f f f . . . . . 
        . . . . . f f . . f f . . . . . 
        `, SpriteKind.Player)
    

    11 - Lose a life

    At the moment we haven't set any lives for our game so add the following new code to:

    1. start off with 3 lives.
    2. lose a life when you hit a projectile.
    3. destroy that projectile.
    sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
        music.powerDown.play()
        mySprite.startEffect(effects.spray, 500)
        info.changeLifeBy(-1)
        otherSprite.destroy()
    })
    let projectile: Sprite = null
    let mySprite: Sprite = null
    info.setLife(3)
    mySprite = sprites.create(img`
        . . . . . . f f f f . . . . . . 
        . . . . f f f 2 2 f f f . . . . 
        . . . f f f 2 2 2 2 f f f . . . 
        . . f f f e e e e e e f f f . . 
        . . f f e 2 2 2 2 2 2 e e f . . 
        . . f e 2 f f f f f f 2 e f . . 
        . . f f f f e e e e f f f f . . 
        . f f e f b f 4 4 f b f e f f . 
        . f e e 4 1 f d d f 1 4 e e f . 
        . . f e e d d d d d d e e f . . 
        . . . f e e 4 4 4 4 e e f . . . 
        . . e 4 f 2 2 2 2 2 2 f 4 e . . 
        . . 4 d f 2 2 2 2 2 2 f d 4 . . 
        . . 4 4 f 4 4 5 5 4 4 f 4 4 . . 
        . . . . . f f f f f f . . . . . 
        . . . . . f f . . f f . . . . . 
        `, SpriteKind.Player)
    controller.moveSprite(mySprite)
    tiles.setTilemap(tilemap`level3`)
    scene.cameraFollowSprite(mySprite)
    game.onUpdateInterval(2000, function () {
        projectile = sprites.createProjectileFromSide(img`
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . 5 5 5 5 5 5 5 . . . . 
            . . . 5 5 5 5 5 5 5 5 5 5 . . . 
            . . 5 5 f f 5 5 5 5 5 5 f f . . 
            . . 5 5 5 f f 5 5 5 5 5 f 5 5 . 
            . . 5 5 5 5 f f 5 5 5 f f 5 5 5 
            . . 5 5 5 5 5 f 5 5 5 f 5 5 5 5 
            . . 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
            . . 5 5 f 5 5 5 5 5 5 5 f 5 5 . 
            . . 5 5 5 f 5 5 5 5 5 f f 5 5 . 
            . . 5 5 5 5 f f f f f f 5 5 . . 
            . . 5 5 5 5 5 5 5 5 5 5 5 . . . 
            . . . . 5 5 5 5 5 5 5 5 . . . . 
            . . . . . . . . . . . . . . . . 
            . . . . . . . . . . . . . . . . 
            `, randint(-50, 50), randint(-50, 50))
    })
    
    
    

    12 - Send the code to your handheld

    That's it you've created your first 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!


    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