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.
For another Re-Make that'll get you caught up on some intermediate-level techniques, check out Re-MakeCode the Classics: Arkanoid
Py Hunter
We'll start by loading the finished version of MakeCode Arcade Py Hunter and try it out. Then, we'll have a look at some of the unique features and how they work.
Start by launching MakeCode Arcade beta using the Google Chrome web browser. Then, download the Re-MakeCode-PyHunter.png file above by right-clicking on the image above 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 Py Hunter png file.
This will open the code into the MCA editor.
Have a go at the game now so you will have a feel for how it plays before we look at the individual elements.
When it starts you'll see the splash screen title graphic and the theme song will play.
Then read the instructions and play! You'll use the d-pad to move the car and the A and B buttons to fire the freeze ray and smoke screen emitters.
Avoid bumping into innocent bystander cars (they're red) while shooting and bumping the bad guys. Don't hit the trees or oil slicks!
Game Start & Splash Screen
The first thing that happens is we set a variable called GameStart to false -- this will be used later to determine when we can allow the other cars to start moving, and takes the safety off of the player car's fire buttons!
Then, we set the background image to the game's title splash screen, wait one second, and then start playing the background music (BGM) using the call BGM_song function.
BGM
As we've done in previous MakeCode Arcade games, we'll use functions to organize different repeating sections of the music.
Tile Map
Then, we'll create a tile map and tiles to define the game screen. Note, these will be plain colors so we don't notice they aren't moving! We'll use moving trees to give the scene a sense of motion.
Create Player Car Sprite
Create the player's car sprite with these settings for control, position, z-depth, and the stay in screen parameter as shown.
The sprite graphic is a cool, white "Interceptor" sports car, just like the original!
Health Bar
The next function sets the custom health bar. Rather than use the default heart counter of MakeCode Arcade, we'll make a meter graphic as a sprite with ten divisions on it. We'll also set the z depth to 3 so that it remains above any other objects that occupy the same space, such as trees.
We'll place the position to the upper left corner. Later we'll create a function to change the health bar graphic depending on the player's health status.
Instructions
We'll put all of the starting instructions into show long text blocks. Each one requires the player to press 'A' to advance, and we can choose where on the screen to display each line.
The last thing we'll do in the setup is create and set some variables we'll use later, and use the splash block to have the player press 'A' to start the game.
These are the variables:
- sceneSpeed = 200 is used to set Y velocity of trees & oil slicks, as well as derive car speeds
- enemyAShot = 0 used to change behavior of enemy cars when shot
- freezeExists = false state of the freeze ray projectile
- smokeExists = false state of the smoke screen projectile
- CarHealth = 100 player car health
Game Start
We want to give the player a moment to orient themselves before the onslaught of cars begins! So, until they drive the car to the left or forward, the GameStart variable is still set to false and the other cars won't appear.
Once the player presses either up or left, the GameStart variable is flipped to true.
The moving trees and bushes will give the scene its sense of speed. Here's how we'll create them.
We'll make one tree and then duplicate the process four times with different parameters.
First, we'll start with a on game update every block and randomize it a bit so the trees don't appear to be moving in a set interval.
Then, we'll create a tree sprite as a projectile with all of it's motion on the vertical axis with the vy (velocity Y) set to the sceneSpeed variable.
We'll create a new sprite type named Tree, so we can later test for collisions with the cars and this type of sprite uniquely.
We'll have the start position on the x-axis be a random placement between either 0-40 for the left side of the road or 130-150 for the right side.
Then, place the trees at a z-depth of 0 so that other sprites appear on top of them.
Here's how the enemy and innocent bystander cars work.
First, we'll use a randomized time interval for on game update so they don't spawn at predictable times.
Next, we'll check the GameStart variable we set at the beginning to see if the player has moved their car left or up, signalling the beginning of game play.
Then we'll generate the car as a projectile sprite with a velocity that is a fraction of the sceneSpeed variable. This means that if you adjust the sceneSpeed the car speed will also adjust.
The horizontal x position of the enemyA type of car is a random value somewhere in the area of the road, while enemyB starts out at the same x position as the player's car at the time it is spawned.
The enemy cars are set to type Enemy, while the bystander cars are of type Bystander. Again, just like with the trees, we can test collisions more easily later if we have unique types for the different sprites.
The z-depth of the cars are set to 3 so they appear above things such as oil slicks.
The enemyAShot variable is created and set to 0 -- this will be used later to determine the moment of these cars when they're shot.
Enemy A is a Wacky Driver!
You'll notice that the enemyA cars try to drive into the player's car no matter where you steer. Here's how this is done:
Every 100ms the on game update block checks to see if there's an enemy A car in the scene with the enA_exists variable, and it also checks to see if the car has been shot. If not, then it sets the car_enA_Diff variable to the PlayerCar x position minus the enemyA x position.
If the difference is less than 0 -- meaning the player is to the left of the player car -- then the enemy's velocity on x is set to -10 to steer it toward the player car, and to 10 if it's on the other side.
Oil Slicks
Just to add one more hazard to the scene, we'll also spawn oil slicks! These are handled in nearly the same way as the trees -- they're projectiles that move at the sceneSpeed (so they appear to be stuck to the road). They're of type Oil so that we can test overlap collisions against them as a unique type later.
The player can shoot Freeze Rays and Smoke Screens in order to defeat enemy cars.
When the A button is pressed, we check to see if the GameStart variable is true (otherwise the player could shoot the splash screen!).
Next, we test to see if a freeze ray already exists to prevent the player from spamming the fire button. The freezeExists variable stores this state.
If we're in the clear, then we flip that variable, and shoot a freezray projectile "forward" with -120 velocity on the y-axis.
We'll also play a tone for a satisfying beep with each shot.
The smoke screen works the same way but with the B button and it travels slowly in the positive y direction, behind the car.
In order to know when we can allow another shot to be fired, the on destroyed sprite of kind Projectile block does a couple of checks against the name of the sprite. If it is freezeray or smoke then their respective Exists variable gets flipped back to false, allowing them to be fired again.
