If you're new to MakeCode Arcade, check out this intro as well as some of these Learn Guides on making games with MakeCode Arcade.
You can also check out this great video playlist from Microsoft's MakeCode team, as well as the MakeCode Arcade Game of the Week series.
Click the button below to open the game in the MakeCode Arcade site in your web browser (it should open into a new window).
You can play the game in the browser and then continue below if you want to see how it's made and customize it.
Some extensions are used to add functionality to the program. From the Advanced category section, in the Extensions item, the following are added:
- Sprite scaling to allow re-sizing of the character sprites
- Background scroll to create multi-plane camera background layers
- Light to use NeoPixel strips
- Feather to add the Feather pins necessary to plug NeoPixel strips into the PyGamer hardware
Title Sequence Function
A function called title sequence is used to place all of the opening title blocks in a single place that can be called from the main startup block when the game begins.
The text sprite blocks create the three lines of text, "Black Panther", "WAKANDA", and "FOREVER".
The sound block creates an ascending alert tone.
BG Layers Setup Function
Using the Background Scroll extension, a set of different background layers are created -- these were extracted from the tutorial image using copy, paste, and erase!
This give the game the illusion of depth using the parallax effect.
NeoPixel Setup Function
Add the Light extension to MakeCode Arcade.
First, open the Advanced category section and click on the Extensions item.
Next, click on the light extension, which adds the blocks we need.
Click the Light category to see the available blocks. Now you can click on the "..." category under Light to get the NeoPixel strip blocks.
Create a function called NeoPixel setup and add the strip blocks shown here.
Vibranium Gauntlet Blast Function
This function will be called when the NeoPixel strand shoots a blast -- this is done by advancing the bright "photon" pixel by three, and doing so ten times. The strand has 30 LEDs, so this will blast forward through the whole strip.
Character Setup Function
In this function, the two character sprites are created and defined as "player" and "enemy", which are tags that are used for other behaviors later.
The character sprites are then scaled up in size to make them appear bigger on screen.
Shuri's position is set at the start, and the "stay on screen" flag is set on so she can't be moved off screen.
Namor is set to follow Shuri with a speed of 40.
Finally, Shuri is set to be controlled with the d-pad at a velocity of 100 on x and 220 on y.
The on start loop runs once at the beginning of the game to set up or run a number of commands and functions.
The started flag is set to false in order to prevent the a button from firing projectiles until the game has started.
The title sequence function is run, followed by the BG setup function.
Then, after a short pause, the title text sprites are removed from the screen, and then a long text is shown that says "Battle Namor! But don't get hit!!".
The character setup function is run, and Shuri's life counter is set to 10.
The started variable is set to true, and then the NeoPixel setup and Vibranium Gauntlet blast functions are called.
Namor Projectile Loop
All forever loops are run continuously once the game has started. This one is used to have Namor fire projectiles at Shuri at a randomized interval.
Namor Motion Constraint
Since the follow loop is running constantly to have Namor move toward Shuri in both x and y, we want to limit that motion to only the y axis. This is done here by setting Namor's x position to 138 constantly.
Whenever the A button is pressed, the check is made to see if the game has started (based on the state of the started variable).
Then, if that check passes, a projectile is emitted from Shuri's sprit, and sent on the x-axis at a velocity of 225 vx.
When the projectile hits a wall or sprite it is destroyed.
Each time the projectile is fired the Vibranium Gauntlet blast function is called to light up the NeoPixel strip.
If Shuri is hit by Namor's projectile, her life count decrements by one, a sound effect is played, and Namor's position is reset to a random location on the y-axis.
When Namor is hit by Shuri's projectile, the score is incremented by 1, a sound effect is played, and Namor's position is reset.
When the score reaches 10, the player wins! Namor is destroyed, a "We are safe!" text is displayed, and Shuri proclaims, "WAKANDA FOREVER".
Then, the confetti effect plays, and the game is set to over with the WIN condition.