# How to Make Games in MakeCode Arcade

## Overview

![](https://cdn-learn.adafruit.com/assets/assets/000/069/840/medium800/gaming_image.png?1548353309)

Get your joysticks ready, we're throwing an arcade party with games designed by you & me! That's right you heard me. We can design our own games, and, with no coding experience required. Then we can upload these games to our own hardware like a [Raspberry Pi Zero](https://www.adafruit.com/product/3708) to play them on the big screen!

How? With [Microsoft MakeCode Arcade](https://arcade.makecode.com/). MakeCode Arcade is a **web-based** , beginner-friendly code editor to create  **retro arcade games**  for the web and for microcontrollers.

Info: 

Please read through the below guide on using MakeCode Arcade with the Raspberry Pi Zero before continuing:

## **[Guide: MakeCode Arcade with Raspberry Pi Zero](https://learn.adafruit.com/makecode-arcade-with-raspberry-pi-zero/what-is-makecode-arcade)**

First we'll go over how to use and navigate MakeCode Arcade.

After that, we'll learn how to create our own custom games on the platform to upload to the Raspberry Pi Zero. 

We'll run through how to build the game below as the main example for the guide.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/839/medium800thumb/gaming_blinka_overview_2.jpg?1548353140)

# How to Make Games in MakeCode Arcade

## Parts and Setup

[This guide](https://learn.adafruit.com/makecode-arcade-with-raspberry-pi-zero/setup) will give most of the necessary info on options for parts and setup with the Raspberry Pi Zero. If you are looking for Adafruit M4 boards, try [this guide](https://learn.adafruit.com/makecode-arcade-with-samd51-m4).

[What's a Raspberry Pi Anyway? Click here to find out!](https://www.raspberrypi.org/help/what-%20is-a-raspberry-pi/)
If this is your first time with Raspberry Pi, here is the easiest way to get the necessary parts for this project:

### Part: Joy Bonnet Pack without Soldering - Includes Pi Zero WH
quantity: 1
Includes Raspberry Pi Zero, Joy Bonnet, HDMI adapter, USB adapter and a plastic enclosure
[Joy Bonnet Pack without Soldering - Includes Pi Zero WH](https://www.adafruit.com/product/4085)

### Part: SD/MicroSD Memory Card (8 GB SDHC)
quantity: 1
Holds the code for the games
[SD/MicroSD Memory Card (8 GB SDHC)](https://www.adafruit.com/product/1294)

### Part: Micro USB Cable
quantity: 1
Powers the Raspberry Pi Zero and connects to computer
[Micro USB Cable](https://www.adafruit.com/product/592)

### Part: HDMI Cable
quantity: 1
Connects Raspberry Pi Zero to monitor or TV for viewing the games
[HDMI Cable](https://www.adafruit.com/product/608)

Other Parts Needed:

### Part: Computer with an SD card slot.
quantity: 1
To program the games and the SD card for the Raspberry Pi

Info: 

### Part: USB MicroSD Card Reader/Writer
quantity: 1
For programming a SD card
[USB MicroSD Card Reader/Writer](https://www.adafruit.com/product/939)

# How to Make Games in MakeCode Arcade

## Navigating MakeCode Arcade

Head to the MakeCode arcade homepage at [https://arcade.makecode.com/](https://arcade.makecode.com/) and click "New Project".

## MakeCode Arcade User Interface
- On the right side of the screen is our editing space. This is where we'll drag and drop blocks onto to create the game.

 

- The center column is where we'll find all the different blocks with which to choose from.

 

- The game console on the left-hand side of the screen is where our code comes to life and where we can test our games out.

![gaming_Screen_Shot_2019-01-24_at_4.58.25_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/869/medium640/gaming_Screen_Shot_2019-01-24_at_4.58.25_PM.png?1548367225)

## Code Block Types
There are two ways to program in MakeCode Arcade: with **blocks** and with **javascript**. Block-based programming is designed for beginners and allows users to drag and drop code blocks into an editor to program. Javascript is a syntax based language for more experienced programers. We'll be using the block-based method in this guide. Here are the different kinds of code blocks to program our games with in MakeCode Arcade:

### Sprites
- This category allows us to create and define [Sprites](https://en.wikipedia.org/wiki/Sprite_(computer_graphics)). Sprites are the objects what we control in our games. They can be players, enemies, food, projectiles, and more!

![gaming_Screen_Shot_2019-01-24_at_5.13.34_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/875/medium640/gaming_Screen_Shot_2019-01-24_at_5.13.34_PM.png?1548368380)

### Controller
- These blocks let us define which buttons control what. For example if we want button A on our controller to shoot out arrows.

![gaming_Screen_Shot_2019-01-24_at_5.13.48_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/876/medium640/gaming_Screen_Shot_2019-01-24_at_5.13.48_PM.png?1548368998)

### Game
- Let us control the timeline of the game as well as when the player loses or wins.

![gaming_Screen_Shot_2019-01-24_at_5.14.11_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/877/medium640/gaming_Screen_Shot_2019-01-24_at_5.14.11_PM.png?1548369140)

### Music
- Add music and sound effects.

![gaming_Screen_Shot_2019-01-24_at_5.14.24_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/878/medium640/gaming_Screen_Shot_2019-01-24_at_5.14.24_PM.png?1548369229)

### Scene
Control the background and screen dimensions of the game.

![gaming_Screen_Shot_2019-01-24_at_5.14.32_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/879/medium640/gaming_Screen_Shot_2019-01-24_at_5.14.32_PM.png?1548369281)

### Info
- Control core game elements such as score, lives and game clock.

![gaming_Screen_Shot_2019-01-24_at_5.14.48_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/880/medium640/gaming_Screen_Shot_2019-01-24_at_5.14.48_PM.png?1548369358)

### Loops
- For repeating certain code blocks on different conditions.

![gaming_Screen_Shot_2019-01-24_at_5.15.03_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/881/medium640/gaming_Screen_Shot_2019-01-24_at_5.15.03_PM.png?1548369506)

### Logic
- Tell certain code blocks to execute based on a condition.

![gaming_Screen_Shot_2019-01-24_at_5.15.12_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/882/medium640/gaming_Screen_Shot_2019-01-24_at_5.15.12_PM.png?1548369688)

### Variables
- Create variables which are used to store data like the velocity of a sprite.

![gaming_Screen_Shot_2019-01-24_at_5.15.23_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/883/medium640/gaming_Screen_Shot_2019-01-24_at_5.15.23_PM.png?1548369818)

### Math
- Allow various mathematical functions. Can be used to modify variables for example.

![gaming_Screen_Shot_2019-01-24_at_5.15.34_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/884/medium640/gaming_Screen_Shot_2019-01-24_at_5.15.34_PM.png?1548369979)

### Advanced
Access code blocks to:

- Images: Create and edit graphics of sprites and backgrounds.
- Functions: Create custom functions to call within the program.
- Arrays: Create lists of data.
- Text: Create [strings](https://en.wikipedia.org/wiki/String_(computer_science)). Could be used to create speech bubbles for characters.
- Console: Help with _debugging_ or troubleshooting errors in the program.
- Extensions: Access additional block types like animations.

![gaming_Screen_Shot_2019-01-24_at_5.47.57_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/887/medium640/gaming_Screen_Shot_2019-01-24_at_5.47.57_PM.png?1548370132)

# How to Make Games in MakeCode Arcade

## Programming the Game

## Game Rules

- Blinka the purple snake has 4 seconds to get to the star. Clock resets and the score increases by 1 each time this is accomplished. 
- Blinka must avoid Sparky the blue smoke monster who is bouncing around the screen. Each time Sparky hits Blinka, one out of 3 lives is lost.
- Sparky's speed increases every 5 seconds.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/889/medium800thumb/gaming_blinka_overview_2.jpg?1548370782)

Feel free to follow along by creating a new project in MakeCode Arcade or by viewing the completed project.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/873/medium800/gaming_Screen_Shot_2019-01-24_at_4.53.37_PM.png?1548367680)

[Click here to view this project in MakeCode Arcade](https://makecode.com/_D6xh6g73sMLW)
## Background
- In an `on start` loop, grab a `set background image` block and create the desired background image for the game to start on.
- You can edit this image by clicking the part of the block with the thumbnail.
- Next add a `pause` block to let the intro image stay on the screen for `one second`.
- Then set the background image and background color to **black**.

![gaming_Screen_Shot_2019-01-24_at_6.01.39_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/890/medium640/gaming_Screen_Shot_2019-01-24_at_6.01.39_PM.png?1548371143)

![gaming_Screen_Shot_2019-01-25_at_11.44.15_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/946/medium640/gaming_Screen_Shot_2019-01-25_at_11.44.15_AM.png?1548434772)

# Creating Blinka's Sprite
- Now drag a `set mySprite` block under the last block we set.
- Click the drop down menu next to **mySprite**. Create a new variable and name it `Blinka` or what ever character name you want.
- Next, click the thumbnail for the sprite and create your desired sprite.\*
- Click the drop down menu at the end of the block and select the `Player` sprite type.
- Now add a `set position` block to place Blinka in a specific spot each time the game starts. By clicking on the number values, the program allows us to set x and y values visually. Just move the mouse over the game console to choose a place to put the sprite.
- Lastly add a `move` block and click the plus sign to set arrow keys as the way we move Blinka around.

\*MakeCode Arcade usually allows importing images to use for background and sprites by dragging and dropping **png** files into the editor space. However at the time of this writing, this functionality is not available due to being in Beta Mode.

![gaming_Screen_Shot_2019-01-24_at_6.03.19_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/891/medium640/gaming_Screen_Shot_2019-01-24_at_6.03.19_PM.png?1548371176)

![gaming_Screen_Shot_2019-01-25_at_11.54.32_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/947/medium640/gaming_Screen_Shot_2019-01-25_at_11.54.32_AM.png?1548435301)

![gaming_Screen_Shot_2019-01-25_at_12.00.58_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/952/medium640/gaming_Screen_Shot_2019-01-25_at_12.00.58_PM.png?1548435682)

![gaming_Screen_Shot_2019-01-25_at_11.59.53_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/953/medium640/gaming_Screen_Shot_2019-01-25_at_11.59.53_AM.png?1548435701)

## Sparky's Sprite
- Drag in `set mySprite` block, create new variable called `Sparky`, make the sprite graphic and change the kind to `Enemy`.
- Set to a position in the game.
- Create two new variables called `SparkySpeedx` and `SparkySpeedy`.
- Also in the variables block section, drag in two `set mySprites to` blocks. Set one to`SparkySpeedx` with a value of `40` and the other to `SparkySpeedy` with a value of `60`.
- Now, with a `set mySprite velocity` block, choose Sparky as the sprite, and drag in the `SparkySpeedx` and `SparkySpeedy` as the velocity values. This will allow us to increase the speed of Sparky over time later!
- Lastly, drag in a `set mySprite to stay in screen` block, change the drop down to `bounce on wall` and switch to `on`.

![gaming_Screen_Shot_2019-01-24_at_6.04.09_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/892/medium640/gaming_Screen_Shot_2019-01-24_at_6.04.09_PM.png?1548371212)

![gaming_Screen_Shot_2019-01-25_at_12.19.50_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/960/medium640/gaming_Screen_Shot_2019-01-25_at_12.19.50_PM.png?1548436836)

## Life, Food and Countdown!
- Drag in a `set life` block and set the desired value.
- Next, drag in `set mySprite` block, create new variable called `Star`, make the sprite graphic and change the kind to `Food`.
- Set its location.
- Drag in a `start countdown block` and set the desired value.

![gaming_Screen_Shot_2019-01-24_at_6.04.16_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/893/medium640/gaming_Screen_Shot_2019-01-24_at_6.04.16_PM.png?1548371242)

![gaming_Screen_Shot_2019-01-25_at_1.55.16_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/070/006/medium640/gaming_Screen_Shot_2019-01-25_at_1.55.16_PM.png?1548442559)

## Reaching Stars
- In the `sprite` blocks category, drag in an `on sprite of kind` block, set kind to `Player` and overlaps kind to `Food`.
- Play a sound when Blinka hits each star.
- Add a `change score by 1` block.
- Next we want the star to move to a new random location. To do this drag in a `set position` block. In the `math` blocks category, find and drag in a `pick random 0 to 0` block inside both x and y values. Set ranges accordingly.
- Start the countdown over.

![gaming_Screen_Shot_2019-01-24_at_6.04.59_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/895/medium640/gaming_Screen_Shot_2019-01-24_at_6.04.59_PM.png?1548371299)

## Losing Lives
- Drag in an `on sprite of kind` block, set kind to `Player` and overlaps kind to `Enemy`.
- Play desired sound when Sparky hits Blinka.
- Lose a life.
- Move Sparky to a random new location.
- Shake camera to show player a life has just been lost.

![gaming_Screen_Shot_2019-01-24_at_6.04.41_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/894/medium640/gaming_Screen_Shot_2019-01-24_at_6.04.41_PM.png?1548371264)

## Increasing Sparky's Speed
- Drag in an `on game update every x ms` block and change value to desired amount of time intervals in which to increase Sparky's speed. 5000ms is 5 seconds.
- From the variables block category, drag in two `change mySprite by` blocks and enter value of desired speed increase.
- Then to update Sparky's speed, drag in a `set velocity` block, changing the sprite to Sparky and the vx and vy to `SparkySpeedx` and `SparkySpeedy`.

![gaming_Screen_Shot_2019-01-24_at_6.05.05_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/896/medium640/gaming_Screen_Shot_2019-01-24_at_6.05.05_PM.png?1548371324)

### All done with code!
# How to Make Games in MakeCode Arcade

## Connecting with Hardware

![](https://cdn-learn.adafruit.com/assets/assets/000/069/962/medium800/gaming_IMG_6878.jpg?1548439133)

## Assembling the Pi and Bonnet and Enclosure
- Place the Pi Zero inside of the bottom enclosure piece and snap in place.

 

- Push the Joy Bonnet over the headers on the Pi and firmly press in place.

![gaming_IMG_6880.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/963/medium640/gaming_IMG_6880.jpg?1548439210)

![gaming_IMG_6881.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/964/medium640/gaming_IMG_6881.jpg?1548439221)

## Firmware

If your SD card comes with files on it, delete them, or [just format the SD card as FAT32](https://www.wikihow.com/Format-FAT32). Then download the ZIP file below, unzip it, and copy all files to the root directory of the SD card.

After this, there should for example file named `9.0.3.gz` in right in the root folder of the SD card. There should  **not**  be an `arcade` folder on the SD card. The ZIP below below contains binaries built from [https://github.com/Microsoft/uf2-linux](https://github.com/Microsoft/uf2-linux) .

[arcade.zip](https://cdn-learn.adafruit.com/assets/assets/000/069/970/original/arcade.zip?1548440329)
When the files have finished copying, eject the SD card from your computer and place it into the MicroSD slot in the Raspberry Pi Zero.

## Download the Game and upload to the Pi
- Connect the Pi to your computer via micro USB cable -- be sure to plug into the second USB port on the Pi, the one closer to the HDMI port. The first port is power only.
- In the MakeCode Arcade program press the  **Download**  button and click the "x" when asked to "pair your arcade". You should then be given options to select type of board.
- Select "Adafruit Joy Bonnet". Then click the "x" again when asked to pair the arcade to the editor. This should create a file named `arcacde-something.uf2`.
- Copy it to `ARCADE` drive that should be visible  **on the computer to which your Pi is connected with the USB cable.**

![gaming_Screen_Shot_2019-01-25_at_1.35.33_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/992/medium640/gaming_Screen_Shot_2019-01-25_at_1.35.33_PM.png?1548441589)

### With the Pi still connected to the computer, plug into a monitor or TV via HDMI and play away!
![](https://cdn-learn.adafruit.com/assets/assets/000/070/005/medium800thumb/gaming_cover_blinka.jpg?1548442350)

## Troubleshooting
If you aren't getting a signal on your TV or monitor from the Pi:

- Try booting up the Pi **after** it's connected to the TV or monitor via HDMI.
- Make sure the Pi is plugged into the computer (via micro USB) that was used to download the arcade files.
- [Try reformatting the SD card to FAT32](https://www.wikihow.com/Format-FAT32) then adding the necessary files from this guide. 

# How to Make Games in MakeCode Arcade

## Going Further

How can you modify this game to make it even crazier? Some thoughts:

- Add projectiles to dodge which shoot across the screen.
- Give Blinka the ability to shoot and destroy the projectiles!

Check out the tutorials at [https://arcade.makecode.com/](https://arcade.makecode.com/) to learn even more!

Happy gaming!


## Featured Products

### Joy Bonnet Pack without Soldering - Includes Pi Zero WH

[Joy Bonnet Pack without Soldering - Includes Pi Zero WH](https://www.adafruit.com/product/4085)
The **Joy Bonnet Pack for Raspberry Pi Zero WH ** sets you up with the fully assembled [Pi Zero WH](https://www.adafruit.com/product/3708), and our [Joy Bonnet](https://www.adafruit.com/product/3464) ** - ** our most fun Bonnet...

No Longer Stocked
[Buy Now](https://www.adafruit.com/product/4085)
[Related Guides to the Product](https://learn.adafruit.com/products/4085/guides)
### HDMI Cable - 1 meter

[HDMI Cable - 1 meter](https://www.adafruit.com/product/608)
Connect two HDMI devices together with this basic HDMI cable. It has nice molded grips for easy installation, and is 1 meter long (about 3 feet). This is a HDMI 1.3 cable.

We're now stocking a very fancy Official Raspberry Pi cable with overmolding and a Pi logo. Please note...

In Stock
[Buy Now](https://www.adafruit.com/product/608)
[Related Guides to the Product](https://learn.adafruit.com/products/608/guides)
### SD/MicroSD Memory Card (8 GB SDHC)

[SD/MicroSD Memory Card (8 GB SDHC)](https://www.adafruit.com/product/1294)
Add mega-storage in a jiffy using this 8 GB class 4 micro-SD card. It comes with a SD adapter so you can use it with any of our shields or adapters. Preformatted to FAT so it works out of the box with our projects. Tested and works great with our <a...></a...>

In Stock
[Buy Now](https://www.adafruit.com/product/1294)
[Related Guides to the Product](https://learn.adafruit.com/products/1294/guides)
### USB cable - USB A to Micro-B

[USB cable - USB A to Micro-B](https://www.adafruit.com/product/592)
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller

Approximately 3 feet / 1 meter long

In Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
### USB MicroSD Card Reader/Writer - microSD / microSDHC / microSDXC

[USB MicroSD Card Reader/Writer - microSD / microSDHC / microSDXC](https://www.adafruit.com/product/939)
This is the cutest little microSD card reader/writer - but don't be fooled by its adorableness! It's wicked fast and supports up to 64 GB SDXC cards! Simply slide the card into the edge and plug it into your computer. No drivers are required, it shows up as a standard 'Mass...

No Longer Stocked
[Buy Now](https://www.adafruit.com/product/939)
[Related Guides to the Product](https://learn.adafruit.com/products/939/guides)

## Related Guides

- [Sensors in MakeCode](https://learn.adafruit.com/sensors-in-makecode.md)
- [MakeCode Course for Circuit Playground Express](https://learn.adafruit.com/makecode-circuit-playground-express-course.md)
- [Wind Blowing Emoji Prop](https://learn.adafruit.com/wind-face-emoji.md)
- [apt.adafruit.com](https://learn.adafruit.com/apt-adafruit-com.md)
- [Retro Gaming with Raspberry Pi](https://learn.adafruit.com/retro-gaming-with-raspberry-pi.md)
- [Press Your Button for Raspberry Pi](https://learn.adafruit.com/press-your-button-for-raspberry-pi.md)
- [Glue Stick Light Pipe Sculpture](https://learn.adafruit.com/glue-stick-archway.md)
- [Circuit Playground Morse Code Flasher](https://learn.adafruit.com/circuitplayground-morse-code-flasher-makecode-circuit-python.md)
- [Custom HID Devices in CircuitPython](https://learn.adafruit.com/custom-hid-devices-in-circuitpython.md)
- [Magical Cardboard Craft Obsidian Sword](https://learn.adafruit.com/cardboard-obsidian-sword.md)
- [Magical Light-up Dreidel](https://learn.adafruit.com/magical-light-up-dreidel.md)
- [Using a Mini PAL/NTSC Display with a Raspberry Pi](https://learn.adafruit.com/using-a-mini-pal-ntsc-display-with-a-raspberry-pi.md)
- [Animated Snake Eyes Bonnet for Raspberry Pi](https://learn.adafruit.com/animated-snake-eyes-bonnet-for-raspberry-pi.md)
- [Arcade Coin-Op](https://learn.adafruit.com/arcade-coin-op.md)
- [No-Solder PaperCraft Crystal Light Strand](https://learn.adafruit.com/no-solder-papercraft-crystal-light-strand.md)