You can relive the excitement of a good marble maze game -- such as Labyrinth or Marble Madness -- right on your PyBadge or PyGamer, thanks to the built-in accelerometer! Use MakeCode Arcade to code it and then you can build your own challenging levels to test your skills!
Code Marble Labyrinth in MakeCode Arcade
MakeCode Arcade
MakeCode Arcade is a free Microsoft block programming environment designed specifically to make games. Learning to use MakeCode is easy & fun.
If you're not already familiar with the basics of MakeCode Arcade, check out this guide 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.
These MakeCode Arcade guides are designed to take you through the fundamentals before tackling more complex games:
For intermediate-level techniques, check out:
Marble Labyrinth
To start with, let's load the completed version of Marble Labyrinth and try it out.
Start by launching MakeCode Arcade using the Google Chrome web browser. Then, download the arcade-Marble-Labyrinth.png image cartridge file above by right-clicking on the image and saving it to your computer.
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 Marble Labyrinth .png file.
This will open the code into the MCA editor.
Play the Game
Try out the game before we look at how it works. You can simply hover the mouse over the simulator window to "tilt" the game console around to play.
Use the Accelerometer
In order to use the accelerometer built into the PyGamer (or PyBadge) with MakeCode Arcade, we need to add the Controller extension.
To add the extension, click on Advanced and then + Extensions.
From the next screen, click on the Controller extension.
Then, you'll be able to use extended controller features, as shown here, including the readings from the accelerometer in milli-gravities on x, y, and z axes.
Here's a minimum viable example of using the accelerometer to move a ball around the screen:
Intro Tutorial
One popular concept in game design is the notion of teaching the player how to play the game by doing, rather than including step-by-step instructions, or requiring a manual.
We'll use this method to get the player used to the tilting mechanic, and so that they have a feel for how much to tilt the PyGamer before the stakes are high.
In the intro to the game, the title "Marble Labyrinth" is pinned to the ball using the sprite say " " block, and there are no hazards. So, players will naturally tilt the ball around with the controller and eventually try crossing over the green "F" for "Finish" block, which advances them to the first real level.
Intro Tutorial
One popular concept in game design is the notion of teaching the player how to play the game by doing, rather than including step-by-step instructions, or requiring a manual.
We'll use this method to get the player used to the tilting mechanic, and so that they have a feel for how much to tilt the PyGamer before the stakes are high.
In the intro to the game, the title "Marble Labyrinth" is pinned to the ball using the sprite say " " block, and there are no hazards. So, players will naturally tilt the ball around with the controller and eventually try crossing over the green "F" for "Finish" block, which advances them to the first real level.
Note also, we've set up a variable to indicate the state when the ball has touched a hole tile. So long as that remains false, the on game update loop will use the accelerometer to guide the ball sprite's velocity on x and y (vx, vy).
We'll also use the on sprite of kind Player hits wall (purple) loop to end the intro level and start the first real level, which is index 0, by calling the function with call makeLevel levelNumber.
Make Levels
Once the player initiates the start of the level, here's what the makeLevel function does (note the function type used here accepts an integer number argument that we'll use to pick different level maps):
- set the background image
- create the array of tile maps, in this case there are three possible levels (later, you can design your own levels by simply clicking the + sign in the list array and adding another image. A good way to start is to RMB-click an existing one to copy it and place it in the new empty value.
- set the tile map to the index chosen with the num argument when the function was called, as an 8x8 pixel tile map
- place the start image on the red tile
- place the brown walls on the black tiles, with wall on
- place the hole hazards on the pink tiles, with wall on
- place the finish image on the green tile, with wall on
- place the player's ball sprite on the red tile
- pause for half a second, then set the touched variable to false so the accelerometer values will be used again to set the ball's velocity on x and y
Click on the first tile map so it opens in the sprite editor and you can see how this easy difficulty level is designed. This one is meant to give the player an early success while introducing the hole hazard element.
Fall in a Hole
Just like the original, real-world game, Marble Labyrinth is hard! When the player over-corrects and steers the ball right into a hole, here's what happens:
- on sprite of kind Player hits wall (pink) loop runs
- We set the touched variable to true to disengage the accelerometer control
- set sprite image to blank so that it appears that the ball has fallen into the hole
- set dropped to true which will call the game over lose with bubbles effect in the forever loop
Completing a Level/Winning the Game
When the player gets the ball to the Finish tile, here's what happens:
- on sprite of kind Player hits wall (green) lets us know the ball has reached the finish
- disengage the accelerometer control over the ball with set touched to true
- change levelNumber by 1 increases the integer value that's used to call the makeLevel function with the proper next level number
-
if levelNumber < length of array list conditional loop checks to see that we have additional levels left for the player. If so:
- pause half a second, then call the makeLevel function with the next level number
- If there are no levels left to play:
- game over win with smiles effect !
Now, load the game onto your PyGamer or PyBadge as shown in the following pages and have some fun! Any time you like, you can create new levels to create new challenges!
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!!
PyBadge/PyBadge LC Bootloader
If you have a PyBadge or PyBadge LC, please go to this page for instructions on updating the bootloader.
PyGamer Bootloader
If you have a PyGamer, please go to this page for instructions on updating the bootloader.
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.
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 to get to it, or download the UF2 file below and drag it onto your board's USB drive in bootloader mode.
Load a MakeCode Game on PyGamer/PyBadge
Let's load a game! For example, here's a link to Run, Blinka, Run! 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.
Then, click on the Show Code button in the upper left corner. The shows the code for the game, and by clicking the Edit 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.
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.
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.
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.
Then, press the reset button. This will initiate bootloader mode.
When the board is in bootloader mode you'll see a screen similar to this one show up.
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.
Play!
That's all there is to it! Once the file is copied over the board will restart and launch the game!
Keep an eye on Adafruit.com for additional game related content.
Troubleshooting MakeCode Arcade
If you run into trouble with MakeCode Arcade, here are some resources for getting help:
- Microsoft MakeCode Arcade Forum
- Adafruit MakeCode Forum
- Microsoft MakeCode Arcade Discord -- look for the #arcade channel
- Adafruit MakeCode Discord -- look for the #makecode channel
This guide was first published on Jul 12, 2019. It was last updated on Mar 08, 2024.