In this guide, we'll Re-MakeCode the thrilling car-chase arcade game classic, Spy Hunter! But since its on a PyBadge or PyGamer we'll rename it (and tweak the design a bit) to create Py Hunter

We'll learn how to create an endless road level, high speed enemies, car bumping mechanics, smoke screens, freeze rays, a custom health meter, and more!

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

Parts

You can play your game in the browser, with no added parts, or get one of these great handhelds to play with real hardware on the go!

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.

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

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.

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!

On Start

Here's the first block set which will run when the game loads, the on start loop.

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

Trees

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.

Cars

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.

Freeze Rays and Smoke Screens

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.

Most of the events in the game come down to one thing -- collisions. When a freeze ray hits and enemy, the play bumps into a bystander car, or runs into a tree, all of these things are collisions.

MakeCode Arcade determines when collisions occur by using the sprite overlap blocks. We can set them to activate when all the different types of collisions happen, and then run other blocks depending on the pairings. For example, here's a simple one: when a player car sprite overlaps an innocent bystander car sprite, we'll create a bump effect by moving the player over six pixels in one direction and the bystander 10 pixels in the other direction.

Hitting Hazards

Another type of collision to account for are the trees and oil slicks. These are similar to the car-on-car sprite overlaps.

Projectile Hits

When the freeze rays or smoke screens hit an enemy car or bystander car, we'll have them run off to the side of the screen.

If it's an enemy car, the player will gain 300 points; if it's an innocent bystander car, they'll loose 300 points.

Here's how this works:

• check for sprite of kind Projectile overlaps otherSprite of kind Enemy (the Bystander loop is similar, but we'll just go over the details of Enemy)
• Play a tone
• if sprite = freezeray then destroy the freezeray sprite, and start a cool radial effect on the otherSprite
• change CarHealth by 2 to give the player some health back

Run off the road

Next, we check if the Enemy sprite is on the left or right half of the screen by using if otherSprite x > screen width / 2

The enemy is then launch off to the appropriate side at the speed of the scene with set otherSprite velocity to vx 60 vy sceneSpeed

Since the enemyA car already has a regularly updating loop using vx to steer it toward the player car, we need to flip the enemyAShot variable to 1, which prevents the steering from activating, allowing it to careen off the road.

This same process happens with the smoke sprite type, but using the warm radial effect instead.

Custom Health Meter

We'll get pretty fancy with the user interface (UI) here and create our own custom health meter. The player starts with 100 points of health, each bump with an enemy car or tree removes a few points, and each successful hit of an enemy adds back a few points.

In order to display this visually, we'll use the custom meter graphic and a number of if...if else logic tests -- as the health reaches each 10 point threshold we'll display an associated version of the graphic.

Game Over

When the CarHealth value reaches 0 it's game over!

Now, you can play the game in your browser, upload it to the PyGamer or PyBadge, or even start making your own modifications to the game!