Game Arcade
Beginner
60 mins
Teacher/Student led
275 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

First Arcade Project

This lesson guides students through creating their first arcade project. They will learn about MakeCode Arcade, the code editor, and how to create a new project. They will add a sprite, choose a sprite from the gallery, and learn to move their sprite. They will draw a tile map and walls, make the camera follow the sprite, add projectiles, detect overlap, and set lives. Finally, they will learn how to send the code to a handheld device.
Learning Goals Learning Outcomes Teacher Notes Lesson Files

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - What is MakeCode Arcade?

    MakeCode Arcade is a fun and easy-to-use tool that lets us create our own arcade games. It's like a digital playground where we can build and play games right in our web browser.

    With MakeCode, we can use colourful blocks to build our games, just like Scratch.

    If you have a small handheld gaming computer like the BrainPad or GameGo, you can even put the games you make onto it and play them anywhere!


    2 - The Code Editor

    Imagine the MakeCode Arcade code editor as a magical toolbox. It's a lot like the Microbit and Scratch editors you might have used before. Here's what it has:

    1. A simulator, which is like a mini TV screen where you can watch your code come to life and play the games you create.
    2. A toolbox, which is like a chest full of different code blocks. These blocks are sorted into groups so you can easily find what you need.
    3. A code area, which is like your construction site. This is where you build your code.

    3 - Create a new Arcade project

    Let's create our first project!

    Go to the Arcade MakeCode website and create a new project. You can call your project anything you want!

    arcade.makecode.com


    4 - 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!

    5 - Choose a sprite from the gallery

    You can paint and design your own sprite or you can choose one from the gallery. For now choose a sprite 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)
    
    
    

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    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