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:

Only use the Google Chrome browser with MakeCode!

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.

If you're ever unsure where a MakeCode block comes from, you can often find it by matching the block's color to a category on the left side of the editor. You can also use the handy search function!

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!

This guide was first published on Jul 12, 2019. It was last updated on Jul 12, 2019. This page (Code Marble Labyrinth in MakeCode Arcade) was last updated on Dec 02, 2019.