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.

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.

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.