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.

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 Arkanoid style, we need to make six tiles that will be placed on each of their associated color indexed spots on the tile map. 

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.

Music, Maestro

Next, we'll play the Arkanoid theme music. This is done with a separate function, named BGM,  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!

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.

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.

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.

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.

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

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.

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!