# Re-MakeCode the Classics: Arkanoid

## Overview

![](https://cdn-learn.adafruit.com/assets/assets/000/076/475/medium800thumb/gaming_ark.jpg?1559674237)

https://www.youtube.com/watch?v=izO7Fy2mxN4

Let's Re-MakeCode a classic game: _Arkanoid_! It's lots of fun to look at classic retro games to learn what makes them tick, and to flex your skills at building games in MakeCode Arcade.

_Arkanoid_ and _Breakout_ were both huge hits when they came out, and they're still lots of fun to play today. In this guide we'll focus on the essential game mechanics -- one ball, one paddle, and lots of bricks to knock out!

We'll also add some graphics and sound inspired by the original _Arkanoid_, and build it all in MakeCode Arcade. Then, you can play it in your browser, or transfer the game to your PyGamer or PyBadge/PyBadge LC for handheld fun!

![](https://cdn-learn.adafruit.com/assets/assets/000/076/355/medium800/gaming_components_hero.png?1559598957)

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

Info: 

## Parts
### Adafruit PyGamer Starter Kit

[Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277)
**Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)**

What&nbsp;fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4277)
[Related Guides to the Product](https://learn.adafruit.com/products/4277/guides)
![Adafruit PyGamer Starter Kit with PCB, enclosure, buttons, and storage bag](https://cdn-shop.adafruit.com/640x480/4277-08.jpg)

### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino

[Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242)
What&nbsp;fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4242)
[Related Guides to the Product](https://learn.adafruit.com/products/4242/guides)
![Angled shot of Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino.](https://cdn-shop.adafruit.com/640x480/4242-00.jpg)

### Adafruit PyGamer Acrylic Enclosure Kit

[Adafruit PyGamer Acrylic Enclosure Kit](https://www.adafruit.com/product/4238)
You've got your PyGamer, and you're ready to start jammin' on your favorite arcade games. You gaze adoringly at the charming silkscreen designed by Ada-friend PaintYourDragon.&nbsp;The nostalgia is palpable!

Cradling the PCB in your hands, you realize there's something...

In Stock
[Buy Now](https://www.adafruit.com/product/4238)
[Related Guides to the Product](https://learn.adafruit.com/products/4238/guides)
![Enclosure pieces and black, plastic hardware for a DIY handheld game console.](https://cdn-shop.adafruit.com/640x480/4238-00.jpg)

### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4200)
[Related Guides to the Product](https://learn.adafruit.com/products/4200/guides)
![Angled shot of a Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino. ](https://cdn-shop.adafruit.com/640x480/4200-01.jpg)

### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the&nbsp; **Adafruit PyBadge LC!** &nbsp;We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3939)
[Related Guides to the Product](https://learn.adafruit.com/products/3939/guides)
![Angled Shot of Adafruit PyBadge - Low Cost. ](https://cdn-shop.adafruit.com/640x480/3939-05.jpg)

### Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh

[Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh](https://www.adafruit.com/product/4237)
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 350mAh for a total of about 1.3 Wh. If you need a larger (or smaller!) battery, <a...></a...>

In Stock
[Buy Now](https://www.adafruit.com/product/4237)
[Related Guides to the Product](https://learn.adafruit.com/products/4237/guides)
![Lithium Ion Polymer Battery 3.7v 350mAh with JST 2-PH connector and short cable](https://cdn-shop.adafruit.com/640x480/4237-04.jpg)

### Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt

[Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt](https://www.adafruit.com/product/4227)
Hear the good news! This wee speaker&nbsp;is&nbsp;a&nbsp;great addition to any audio project where you need 8 ohm impedance and 1W or less of power. We particularly like this&nbsp;speaker&nbsp;as it is&nbsp;small and comes with nice skinny wires with a connector on the end. It has a handy...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4227)
[Related Guides to the Product](https://learn.adafruit.com/products/4227/guides)
![Mini Oval Speaker with Short Wires ](https://cdn-shop.adafruit.com/640x480/4227-06.jpg)

### USB A/Micro Cable - 2m

[USB A/Micro Cable - 2m](https://www.adafruit.com/product/2185)
This is your standard USB A-Plug&nbsp;to Micro-USB cable. It's 2 meters long so you'll have plenty of cord to work with for those longer extensions.

Out of Stock
[Buy Now](https://www.adafruit.com/product/2185)
[Related Guides to the Product](https://learn.adafruit.com/products/2185/guides)
![USB Cable with Type A and Micro B ends](https://cdn-shop.adafruit.com/640x480/2185-00.jpg)

# Re-MakeCode the Classics: Arkanoid

## Re-Make Arkanoid

https://youtu.be/npI9ugvs9NA

## MakeCode Arcade

If you're not already familiar with the basics of MakeCode Arcade, [check out this guide](https://learn.adafruit.com/makecode-arcade-pixel-art-sprites/creating-sprites-in-makecode-arcade) on creating a character sprite and moving it with controls.

To start, open a new Chrome browser window (Chrome works best) and go to [MakeCode Arcade beta](https://arcade.makecode.com/beta).

These MakeCode Arcade guides are designed to take you through the fundamentals before tackling more complex games, such as _Arkanoid_:

- [Pixel Art](https://learn.adafruit.com/makecode-arcade-pixel-art-sprites)
- [Animation](https://learn.adafruit.com/makecode-arcade-pixel-animation)
- [Level Design](https://learn.adafruit.com/makecode-arcade-platform-level)
- _[Sparky Invaders](https://learn.adafruit.com/makecode-arcade-sparky-invaders)_
- [Next Level Game Techniques](https://learn.adafruit.com/next-level-makecode-arcade-games)

Primary: 

## _Arkanoid_

We'll begin by loading a completed version of the MakeCode Arcade Arkanoid game and then take a look at each section of the program to understand how it all works!

Start by launching [MakeCode Arcade beta](https://arcade.makecode.com/beta) using the Google Chrome web browser. Then, download the **Re-MakeCode-Arkanoid.png** file by right-clicking on the image below and saving it to your computer.

![](https://cdn-learn.adafruit.com/assets/assets/000/076/476/medium800/gaming_arcade-Re-MakeCode-Arkanoid.png?1559674336)

## Load the Code

This is a special .png file that contains not only an image, but the entire game is embedded in it as well!

Simply drag it from the location to which you saved the image on your computer (such as the desktop as shown here) onto the Chrome browser window that is already running MakeCode Arcade (MCA). Note that the image in this graphic is of a different game, but you'll be dragging the _Arkanoid_ png file.

This will open the code into the MCA editor.

![gaming_MakeCode_Arcade_3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/358/medium640/gaming_MakeCode_Arcade_3.jpg?1559599820)

![gaming_Banners_and_Alerts_and_MakeCode_Arcade.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/359/medium640/gaming_Banners_and_Alerts_and_MakeCode_Arcade.jpg?1559599880)

Info: 

Give the game a test play -- it's fun! Press the A button to start the game and launch the ball. Then, use the controller d-pad/thumbstick to move the paddle left and right and bounce the ball into the bricks!

Now, we'll have a look at the blocks that make it all work.

## On Start

Here's the first block set we'll use, contained within the **on start** loop.

![](https://cdn-learn.adafruit.com/assets/assets/000/076/360/medium800/gaming_MakeCode_Arcade.jpg?1559600919)

## Background and Tile Map/Tiles

We'll begin by creating the background image. You can use a solid color for this, or create a pattern. I made a black and blue checkerboard pattern that will read like a dark blue, especially on the PyGamer or PyBadge screen.

The tile map will define the position of the walls for bouncing the ball as well as determining when the ball has been missed by the panel. Also, to create a graphical border frame similar to the original&nbsp;_Arkanoid&nbsp;_style, we need to make six tiles that will be placed on each of their associated color indexed spots on the tile map.&nbsp;

Note that the tile for the red tile map positions is just a sliver of the same background pattern so that it doesn't show up -- if you leave a color on the tile map without an associated tile the palette color of the tile map itself will show up, in this case it would be a big red line across the bottom.

![gaming_MakeCode_Arcade_2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/379/medium640/gaming_MakeCode_Arcade_2.jpg?1559602680)

![gaming_MakeCode_Arcade_3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/389/medium640/gaming_MakeCode_Arcade_3.jpg?1559607892)

![gaming_MakeCode_Arcade_4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/390/medium640/gaming_MakeCode_Arcade_4.jpg?1559607899)

![gaming_MakeCode_Arcade_5.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/391/medium640/gaming_MakeCode_Arcade_5.jpg?1559607903)

![gaming_MakeCode_Arcade_6.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/392/medium640/gaming_MakeCode_Arcade_6.jpg?1559607913)

![gaming_MakeCode_Arcade_7.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/393/medium640/gaming_MakeCode_Arcade_7.jpg?1559607922)

![gaming_MakeCode_Arcade_8.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/394/medium640/gaming_MakeCode_Arcade_8.jpg?1559607929)

![gaming_MakeCode_Arcade_9.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/395/medium640/gaming_MakeCode_Arcade_9.jpg?1559607940)

![](https://cdn-learn.adafruit.com/assets/assets/000/076/398/medium800/gaming_tilemap.png?1559608346)

## Make a Splash

Once the field is in place we'll us the **splash** blocks to write text on screen. First "Re-MakeCode:" and "ARKANOID" will be displayed, and require the player to press the A button to advance. Then we'll use a second **splash** block to give instructions "Press 'A' button" and "to launch ball"

## Music, Maestro

Next, we'll play the Arkanoid theme music. This is done with a separate function, named `BGM`,&nbsp; for "background music". This function contains the notes that we'll play, and it's triggered with the `call BGM` function block.

You'll see that many parts of the game are created with functions so that they can be called discreetly when necessary, as well as too keep things organized -- otherwise this **on start** loop, for example, would be getting really big!

![gaming_MakeCode_Arcade_10.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/411/medium640/gaming_MakeCode_Arcade_10.jpg?1559609920)

## Brick Work

We'll create the rows of bricks as functions as well, one function per row of eight bricks.

Each brick is made with the **set mySprite to \<sprite art\> of kind Food** block ( **Food** is selected from the dropdown menu.) Rename this first one to `brickA01`

Here's an example of some simple sprite art for the beige and red bricks, but you can get as fancy as you like here, just keep the dimensions the same.

In a future guide, we'll explore creating this type of repetitive sprite set using iterative loops and arrays, but for now, each is made by copying and pasting the **set brickA01 of type Food** block and **set brickA01 position** block pairs multiple times.

Note how the **position y** value is the same for each brick per row, while the **position x** value increases by 16 pixels for each brick.

We'll create five rows of bricks, each with its own function. This allows us to only use some rows but not others to leave a fun gap between rows for bonus bounces of the ball!

You can see here the rows called in our **on start** loop being displayed.

![gaming_Banners_and_Alerts_and_MakeCode_Arcade_2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/412/medium640/gaming_Banners_and_Alerts_and_MakeCode_Arcade_2.jpg?1559610366)

![gaming_MakeCode_Arcade_11.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/414/medium640/gaming_MakeCode_Arcade_11.jpg?1559610635)

![gaming_Banners_and_Alerts_and_MakeCode_Arcade_3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/415/medium640/gaming_Banners_and_Alerts_and_MakeCode_Arcade_3.jpg?1559610704)

![gaming_bricks.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/416/medium640/gaming_bricks.jpg?1559611044)

![](https://cdn-learn.adafruit.com/assets/assets/000/076/417/medium800/gaming_bricks.jpg?1559611058)

## Paddle Setup

After the bricks are set, we call the **paddleSetup** function to, well, set up the paddle!

This consists of first creating the sprite **paddle** of type **Player.**

We then set it to move with the thumbstick/d-pad buttons. By setting the velocity to **vx = 150** and **vy = 0** , we are constraining it to move horizontally only, but quite quickly.

We'll prevent the paddle from leaving by turning on **stay in screen,** and finally, set it to the center, bottom of the screen.

![gaming_MakeCode_Arcade_12.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/418/medium640/gaming_MakeCode_Arcade_12.jpg?1559611272)

![gaming_MakeCode_Arcade_13.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/419/medium640/gaming_MakeCode_Arcade_13.jpg?1559611308)

## Lives and Variables

The last things we'll do in the **on start** loop are set the **life** counter to **3** and create these two variables we'll use later:

- **brickCount** variable will be used to determine when the player has hit the final brick for the level,
- **ballInPlay** variable is a sort of toggle for keeping track of the state of the ball so we know when to allow the player to send a new ball into the level after they've lost a paddle life.

## Press A

The next thing we set up is what to do when the player presses the A button.

The **if** statement checks to see if the ball is currently in play, based on the **ballInPlay** variable's value. Since we set it at **0** in the startup, the condition is true and it'll proceed to call the **ballUpdate** function, essentially launching the ball into play.

We also immediately flip the **ballInPlay** variable to **1** so that pressing the A button again won't do anything until the ball goes out of bounds.

![gaming_MakeCode_Arcade_16.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/422/medium640/gaming_MakeCode_Arcade_16.jpg?1559619384)

## Ball Update

When the **ballUpdate** function is called, here's what happens:

First, the **if else** block checks to see that there are still lives left, since this function will be called both when the player starts a level and when the ball goes out of bounds (the player missed it with the paddle). If the life counter is at **0** it will run the **game over lose with melt effect** block.

If there are more lives than **0** , the **ballSetup** and **paddleReset** functions will be called.

![gaming_MakeCode_Arcade_17.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/423/medium640/gaming_MakeCode_Arcade_17.jpg?1559619640)

![gaming_MakeCode_Arcade_19.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/425/medium640/gaming_MakeCode_Arcade_19.jpg?1559619866)

![](https://cdn-learn.adafruit.com/assets/assets/000/076/434/medium800/gaming_MakeCode_Arcade_18b.jpg?1559627060)

 **ballSetup** does a number of things! First:

- Create the sprite named **ball** with a ball graphic of the type **Projectile**
- Set the **ball** to **bounce on walls** and **stay in screen**
- Set the **ball's** velocity down and left with **vx = -60** &nbsp; and **vy = 60**

Then, we will create a few variables to help set ball speed and figure out the bounce angles:

**ballInitSpeed** is the initial speed of the ball

**ballChangeSpeed** can be used to adjust speed between levels

**ballMaxVxFactor** can be used as a factor to mulitply the **ballInitSpeed** and derive the **ballMaxVx** maximum velocity on the x axis

**ball position** is then set to the lower near-center of the screen

The **ballVx&nbsp;** variable is set to&nbsp; **0** , this will be used to calculate the bounce angle.

The the **ballVy** variable is set to the **ballInitSpeed** speed minus the **ball's**  **vx** value.

Next, the **paddleReset** function is called to set the **paddle** sprite back to its starting position.

![gaming_MakeCode_Arcade_20.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/444/medium640/gaming_MakeCode_Arcade_20.jpg?1559627153)

## Ball Hits Paddle

Here we'll get to bouncing the ball off of the paddle. This isn't as simple as the wall bounce we've used before, as it's not a canned function, and we want the player to be able to angle the ball depending on where on the paddle they hit it.

![](https://cdn-learn.adafruit.com/assets/assets/000/076/461/medium800/gaming_MakeCode_Arcade_21b.jpg?1559627664)

The **on sprite of kind Projectile overlaps otherSprite of kind Player** block will run any time the ball (a Projectile) hits the paddle (a Player).

Next, we set the **xDiff** variable to the differential between the ball's horizontal position&nbsp;**(ball x)** and the paddle's horizontal position **(****paddle x).**

We'll use this **xDiff** to help us determine where on the paddle the ball has hit.

Note: this method comes from [AlexK's excellent breakout game posted on the MakeCode forums](https://forum.makecode.com/t/introducing-breakout/90)!

If the **xDiff** is equal to zero, this means the ball has hit dead center on the paddle. We actually don't want to allow this to cause the ball to bounce off straight up and down, so we'll nudge it just a couple of pixels and re-set the **xDiff** value to **2** before proceeding.

Next, we'll set the **ballVx** variable to the absolute of **xDiff** multiplied by the **ballMaxVx** divided by the **paddle width** plus 2. This give us the velocity x value we'll need to send the ball off the paddle.

Then, we'll set the **ballVy** variable to the **ballVx** variable's value we just determined, minus the ball's initial speed.

Now, if the differential between the ball and paddle's x positions is negative, the **if xDiff \< 0** block will invert the **ballVx** value by mulitplying it by **-1**.

Now that the variables have been calculated, those values are actually applied to the ball with the **set ball velocity to vc ballVx vy BallVy** block.

## Ball Misses Paddle

When the player misses the ball, it will hit the red wall as set in the tile map -- using the **on sprite of kind Projectile hits wall (red)** allows us to take action.

First, we'll shake the camera a bit, then **destroy**  **ball with ashes effect for 20 ms.**

We'll reduce the player life count by one, play a four tone sound effect, and then flip the **ballInPlay** variable to zero.

## Paddle Misses Ball

When the player misses the ball, it will hit the red wall as set in the tile map -- using the **on sprite of kind Projectile hits wall (red)** allows us to take action.

First, we'll shake the camera a bit, then **destroy**  **ball with ashes effect for 20 ms.**

We'll reduce the player life count by one, play a four tone sound effect, and then flip the **ballInPlay** variable to zero.

![gaming_Banners_and_Alerts_and_MakeCode_Arcade_4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/462/medium640/gaming_Banners_and_Alerts_and_MakeCode_Arcade_4.jpg?1559629457)

## Ball Hits Bricks

Similarly to the ball hitting the paddle, we use the overlap test to see when the ball ( **sprite of kind Projectile** ) overlaps a brick ( **otherSprite of kind Food** ).

If the ball is traveling upward ( **vy \> 0** ) we invert the velocity on y and send it back down. The opposite is true if the ball is traveling downward when it hits a brick, which happens on rebounds off the top of the board or higher rows of bricks.

Next, we'll **destroy otherSprite** to get rid of the brick.

The score goes up by 200 points. Yay!

The **brickCount** variable is reduced by one, so we'll know when the last brick is hit.

A satisfying tone is played for a 1/4 beat.

If the final brick is hit **(brickCount \< or = 0)** then we destroy the ball and paddle, pause a brief moment, and then reset everything for the next level.

This includes calling the brick setup functions for the rows you want, setting the associated **brickCount** value, setting **ballInPlay** to **0** and finally, playing the **BGM** music!

## Ball Hits Bricks

Similarly to the ball hitting the paddle, we use the overlap test to see when the ball ( **sprite of kind Projectile** ) overlaps a brick ( **otherSprite of kind Food** ).

If the ball is traveling upward ( **vy \> 0** ) we invert the velocity on y and send it back down. The opposite is true if the ball is traveling downward when it hits a brick, which happens on rebounds off the top of the board or higher rows of bricks.

Next, we'll **destroy otherSprite** to get rid of the brick.

The score goes up by 200 points. Yay!

The **brickCount** variable is reduced by one, so we'll know when the last brick is hit.

A satisfying tone is played for a 1/4 beat.

If the final brick is hit **(brickCount \< or = 0)** then we destroy the ball and paddle, pause a brief moment, and then reset everything for the next level.

This includes calling the brick setup functions for the rows you want, setting the associated **brickCount** value, setting **ballInPlay** to **0** and finally, playing the **BGM** music!

![gaming_MakeCode_Arcade_23.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/463/medium640/gaming_MakeCode_Arcade_23.jpg?1559631084)

And now, the player can start up the next level by pressing A!

https://www.youtube.com/watch?v=izO7Fy2mxN4

# Re-MakeCode the Classics: Arkanoid

## Update the PyBadge/PyGamer Bootloader

You are at the bleeding edge of handheld, open source, game playing hardware and software, what with your PyBadge/PyBadge LC or PyGamer! Congratulations! It's fun and exciting! It is also changing and improving all the time, so please update your bootloaders before proceeding to put your MakeCode Arcade games on the board!!

Info: 

## PyBadge/PyBadge LC Bootloader

If you have a **PyBadge** or **PyBadge LC** , [please go to this page for instructions on updating the bootloader.](https://learn.adafruit.com/adafruit-pybadge/updating-the-bootloader)

![gaming_pyb.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/276/medium640/gaming_pyb.jpg?1559330072)

## PyGamer Bootloader

If you have a **PyGamer** , [please go to this page for instructions on updating the bootloader.](https://learn.adafruit.com/adafruit-pygamer/updating-the-bootloader)

![gaming_pyg.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/277/medium640/gaming_pyg.jpg?1559330110)

Danger: 

## Hardware Checks

If, after updating your board's bootloader, you still think you may have a hardware problem, here's a great way to test out all of the functions. From buttons, to the light sensor, thumbstick (PyGamer only), accelerometer (PyGamer and PyBadge only, not the LC), and more, we've got a super nifty set of hardware test .UF2 files you can use.

Click on the link for your board below for more info and a link to the appropriate UF2 file.

[PyBadge/PyBadge LC Hardware Check](https://learn.adafruit.com/adafruit-pybadge/arduino-test)
[PyGamer Hardware Check](https://learn.adafruit.com/adafruit-pygamer/arduino-test)
Another way to do a hardware check is with the handy, dandy MakeCode Arcade Basic Hardware Test. This was created with MakeCode Arcade and you can use it to check that your d-pad buttons or thumb joystick can move the yellow face around the screen, and that the A and B buttons work to play a sound (just make sure you have a speaker plugged in to the PyGamer first).

You can [open this link](https://makecode.com/_icwXcg4PWRYW) to get to it, or download the UF2 file below and drag it onto your board's USB drive in bootloader mode.

[arcade-Basic-Hardware-Test.UF2](https://cdn-learn.adafruit.com/assets/assets/000/076/316/original/arcade-Basic-Hardware-Test-PyBadge_and_PyGamer.uf2?1559345409)
![](https://cdn-learn.adafruit.com/assets/assets/000/076/317/medium800/gaming_hwtest.png?1559345457)

# Re-MakeCode the Classics: Arkanoid

## Load a MakeCode Game on PyGamer/PyBadge

Let's load a game! For example, here's a link to **Run, Blinka, Run!&nbsp;** To open the game in the MakeCode Arcade editor, first, click the share link below. This will allow you to play the game in the browser right away.

[Makecode Arcade Game: Run, Blinka, Run!](https://makecode.com/_Y90aTaiHfh41)
Then, click on the&nbsp;Show Code&nbsp;button in the upper left corner. The shows the code for the game, and by clicking the&nbsp;Edit&nbsp;button in the upper right corner, it'll open into the editor where you can upload it to your PyGamer/PyBadge.

Once you have a game working on the MakeCode Arcade web editor, it's time to download it and flash it onto your board.

![adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/078/777/medium640/adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_2.jpg?1564457638)

![adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/078/778/medium640/adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_3.jpg?1564457679)

Primary: 

## Board Definition

In order to load a game made in MakeCode Arcade onto the PyBadge, first choose the proper board definition inside of MakeCode. Click the ellipsis (...) next to DOWNLOAD and then the **Choose Hardware** item.

![adafruit_products_MakeCode_choose_hardware.jpg](https://cdn-learn.adafruit.com/assets/assets/000/108/981/medium640/adafruit_products_MakeCode_choose_hardware.jpg?1644859647)

## Change Board screen

Click on the image of your board, either the PyBadge/PyBadge LC or the PyGamer

![adafruit_products_MakeCode_Arcade.jpg](https://cdn-learn.adafruit.com/assets/assets/000/078/781/medium640/adafruit_products_MakeCode_Arcade.jpg?1564458209)

This will cause the game .uf2 file for your particular board to be saved to your hard drive. You only need to do this the first time you use a new board. Thereafter you can simply click the **Download** button on the MakeCode Arcade editor page.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/943/medium800/gaming_downloaded.png?1556169879)

Danger: 

## Bootloader Mode

Now, we'll put the board into bootloader mode so we can drag on the saved .uf2 file. On the back side of the board you'll see a reset button at the top. Make sure the board is plugged into your computer via USB with a USB micro B to A data cable. Also, be sure the board is turned on.

&nbsp;

Then, press the reset button. This will initiate bootloader mode.

&nbsp;

When the board is in bootloader mode you'll see a screen similar to this one show up.

![gaming_IMG_5427.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/945/medium640/gaming_IMG_5427.jpg?1556170490)

![gaming_IMG_5428.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/991/medium640/gaming_IMG_5428.jpg?1556308393)

![gaming_IMG_5429.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/992/medium640/gaming_IMG_5429.jpg?1556308428)

## Drag and Drop

Now that the board is in bootloader mode, you should see a **BADGEBOOT** drive show up on your computer as a USB flash drive. Simply drag the arcade game .uf2 file onto the drive.

![gaming_dragtoPyBadge.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/944/medium640/gaming_dragtoPyBadge.jpg?1556308458)

## Play!

That's all there is to it! Once the file is copied over the board will restart and launch the game!

![](https://cdn-learn.adafruit.com/assets/assets/000/074/948/medium800/gaming_IMG_5430.jpg?1556170587)

https://youtu.be/au5w1sLjsaU

Keep an eye on Adafruit.com for additional game related content.

# Re-MakeCode the Classics: Arkanoid

## Troubleshooting MakeCode Arcade

If you run into trouble with MakeCode Arcade, here are some resources for getting help:

- [Microsoft MakeCode Arcade Forum](https://forum.makecode.com/c/Share-your-Arcade-projects-here)
- [Adafruit MakeCode Forum](https://forums.adafruit.com/viewforum.php?f=64)
- [Microsoft MakeCode Arcade Discord](https://aka.ms/makecodecommunity) -- look for the #arcade channel
- [Adafruit MakeCode Discord](https://adafru.it/discord) -- look for the #makecode channel

Primary: 


## Featured Products

### Adafruit PyGamer Starter Kit

[Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277)
**Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)**

What&nbsp;fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4277)
[Related Guides to the Product](https://learn.adafruit.com/products/4277/guides)
### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino

[Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242)
What&nbsp;fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4242)
[Related Guides to the Product](https://learn.adafruit.com/products/4242/guides)
### Adafruit PyGamer Acrylic Enclosure Kit

[Adafruit PyGamer Acrylic Enclosure Kit](https://www.adafruit.com/product/4238)
You've got your PyGamer, and you're ready to start jammin' on your favorite arcade games. You gaze adoringly at the charming silkscreen designed by Ada-friend PaintYourDragon.&nbsp;The nostalgia is palpable!

Cradling the PCB in your hands, you realize there's something...

In Stock
[Buy Now](https://www.adafruit.com/product/4238)
[Related Guides to the Product](https://learn.adafruit.com/products/4238/guides)
### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4200)
[Related Guides to the Product](https://learn.adafruit.com/products/4200/guides)
### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the&nbsp; **Adafruit PyBadge LC!** &nbsp;We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3939)
[Related Guides to the Product](https://learn.adafruit.com/products/3939/guides)
### Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh

[Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh](https://www.adafruit.com/product/4237)
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 350mAh for a total of about 1.3 Wh. If you need a larger (or smaller!) battery, <a...></a...>

In Stock
[Buy Now](https://www.adafruit.com/product/4237)
[Related Guides to the Product](https://learn.adafruit.com/products/4237/guides)
### Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt

[Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt](https://www.adafruit.com/product/4227)
Hear the good news! This wee speaker&nbsp;is&nbsp;a&nbsp;great addition to any audio project where you need 8 ohm impedance and 1W or less of power. We particularly like this&nbsp;speaker&nbsp;as it is&nbsp;small and comes with nice skinny wires with a connector on the end. It has a handy...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4227)
[Related Guides to the Product](https://learn.adafruit.com/products/4227/guides)
### Pink and Purple Braided USB A to Micro B Cable - 2 meter long

[Pink and Purple Braided USB A to Micro B Cable - 2 meter long](https://www.adafruit.com/product/4148)
This cable is&nbsp;super-fashionable&nbsp;with a woven pink and purple Blinka-like pattern!

First let's talk about the cover and over-molding. We got these in custom colors, and if you&nbsp;_have_&nbsp;to have visible cables, then you might as well have the nicest fabric-bound...

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

## Related Guides

- [Adafruit PyBadge and PyBadge LC](https://learn.adafruit.com/adafruit-pybadge.md)
- [Introducing Adafruit PyGamer](https://learn.adafruit.com/adafruit-pygamer.md)
- [PyGamer NeoPixel Controller](https://learn.adafruit.com/pygamer-neopixel-controller.md)
- [Next Level MakeCode Arcade Games](https://learn.adafruit.com/next-level-makecode-arcade-games.md)
- [Submitting Games to MakeCode Arcade Front Page](https://learn.adafruit.com/submitting-games-to-makecode-arcade-front-page.md)
- [Creating Your First Tilemap Game with CircuitPython](https://learn.adafruit.com/creating-your-first-tilemap-game-with-circuitpython.md)
- [Wakanda Forever Game](https://learn.adafruit.com/wakanda-forever-game.md)
- [Playing Arduboy Games on Arcada](https://learn.adafruit.com/playing-arduboy-games-on-arcada.md)
- [Creating Custom Symbol Fonts for Adafruit GFX Library](https://learn.adafruit.com/creating-custom-symbol-font-for-adafruit-gfx-library.md)
- [MakeCode Arcade: Sparky Invaders](https://learn.adafruit.com/makecode-arcade-sparky-invaders.md)
- [Arcada Animated GIF Display](https://learn.adafruit.com/pyportal-animated-gif-display.md)
- [PyGamer Marble Labyrinth in MakeCode Arcade](https://learn.adafruit.com/pygamer-marble-labyrinth-in-makecode-arcade.md)
- [MakeCode Arcade Platformer Level Design](https://learn.adafruit.com/makecode-arcade-platform-level.md)
- [Game & Watch Octopus](https://learn.adafruit.com/game-watch-octopus.md)
- [Saving CircuitPython Bitmaps and Screenshots](https://learn.adafruit.com/saving-bitmap-screenshots-in-circuitpython.md)
- [How to Hack NES ROMs to Add Your Own Sprites](https://learn.adafruit.com/how-to-hack-roms-to-add-your-own-sprites.md)
- [Go Fishing with Rotary Encoders](https://learn.adafruit.com/gone-fishing-game.md)
