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!

Microsoft MakeCode Arcade is a web-based beginner-friendly code editor to create retro arcade games for the web and for microcontrollers.

Parts

MakeCode Arcade

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 beta.

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

• Pixel Art
• Animation
• Level Design
• Sparky Invaders
• Next Level Game Techniques

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 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.

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.

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"

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.

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  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 variable is set to 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.

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.

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 (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!

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.

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!

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