T2W7: Game Projects Part 3

One or two more weeks for game programming before we will switch to soldering and building our electronic clock kits. So I'd like everyone to be working on their game project. If you still don't know what you want to do, I have a game that I made a couple years ago and I can write up step-by-step instructions for coding it - follow the instructions while adding your own customizations and you will have a game! I am continuing the step-by-step instructions this week.

I'm also learning that there are lots of extensions people have written that can help with games but aren't in the basic menu set. Here is a list of MakeCode Arcade programming resources, including extensions that add features to the Arcade programming environment. There are also links to some amazingly complex games people have done - they are not guaranteed to run well on the Chromebooks!

Tutorial Videos

I found some video tutorials on making different types of games that might be helpful for your games. They are YouTube videos instead of going step-by-step in the MakeCode editor. Maybe you can find one that is close to your game type and watch it for tips if you get stuck while you are waiting for help.

MakeCode Arcade Trick-or-Treat Game Part 2

Last week we started a MakeCode Arcade (MCA) game for Halloween and got as far as collecting treats on the screen. This week we will create some obstacles to collecting the treats by adding cars driving in all directions on the screen. We will use the collision detection features of MCA to tell when a car hits the player or the treat.

To start, go to the MCA website: https://arcade.makecode.com/. If you are on the same computer you can load your program from last week, otherwise download the program at the bottom of the page to your "Downloads" folder and then click "Import" to upload it to MakeCode Arcade. You can also follow the steps from last week and create the first part of the game in MCA.

Adding cars

We will add cars crossing the screen using MCA's projectile sprites. We will pick a random direction and position for the cars and have them gradually speed up as more treats are gathered.

First, make a new variable called CarDelay, which will be the time delay between new cars being generated (in milliseconds or 1/1000th of a second). From the VARIABLES menu insert a "set CarDelay" block into the "on start" structure and set the value to 5000. This gives us a five second delay between cars at the beginning of the game but lets us change the delay as the game goes on.

Now to generate the cars, add a "forever" loop structure. Add a "pause" block from LOOPS with value CarDelay. This gives the player a little time to get settled before the first car comes.

We will pick a random direction for the car to go (left, right, down, up) by adding another variable CarDirection and setting it to a "pick random (1) to (4)" function. We then need to insert a big if/then/else if/else structure to handle the different directions. From LOGIC insert <(CarDirection)=(1)> into the if/then structure. If CarDirection=1 the car is going to the left.

Inside the if/then case, from SPRITES->Projectiles add a "set projectile to projectile from side" block. Click on the gray square to design the sprite image, or click on the Gallery tab to pick one of the car icons that comes with MCA - pick one that is travelling to the left! The vx and vy fields control how fast and which direction the car moves. To go left to right we want a positive x-velocity (50 is fine) and a zero y-velocity (up and down).

We will have the car drive at a random y (vertical) location on the screen. From SPRITES insert "set mySprite [x] to ()", change the sprite name to "projectile", the coordinate to [y], and the location to "pick random (10) to (110)". This leaves some margin at the edges of the 120-pixel high screen. Here is how the first if/then case should look:

Now add two more "else if/then" clauses and an "else" at the end. Check for CarDirection=2 (right to left) and CarDirection=3 (top to bottom), otherwise it must be CarDirection=4 (bottom to top). You can duplicate the code blocks from the first one to save time but you will need to update the car icon, velocity, and random location depending on what direction the car is going.

Adding collisions - car vs. player

We now have cars driving around, but nothing happens when they run into something. When the car hits the player, we should play a sound and decrease the number of lives by one, and if no lives are left the game is over. We can use built-in MCA functions to make this easy to code.

From the SPRITES->Overlaps menu, add an "on sprite of kind Player overlaps otherSprite of kind Projectile" block. The code in this block will run when a car hits our player. We then want to:

change life by -1 (INFO menu)

destroy otherSprite with spray effect for 500 ms (SPRITES menu - pick the effects you like)

camera shake (SCENE menu - experiment with values for # of pixels and time)

if <(life) > (0)> play a sound (try wawawa or siren)

If we run out of lives the "change life by -1" will run the end of game animation for us - GAME OVER.

Adding collisions - car vs. treat

For fun we will have the treats disappear when a car hits them. Add an "on sprite of kind Projectile overlaps otherSprite of kind Food" structure. Inside add a "destroy otherSprite" block and click on the (+) to pick the effect you like - I picked "ashes" for 500 ms. Add a pause of 500 ms to wait for the animation effect to finish and then add "call NewTreat" to pick a new treat location.

Speeding up the cars

The starting delay between cars of 5000 ms (= 5 seconds) is not very challenging, so let's make the game speed up as treats are collected. Since we have a variable for the time delay, we can add a block to the code that runs when the player collides with the food to decrease the delay slightly. From VARIABLES, add "set CarDelay to ( (CarDelay) x (0.95) )", this gives an exponential decrease in the delay. Experiment with the coefficient, making it smaller with make the game speed up faster, but small changes will decrease the delay very quickly.

Testing the Game

We now have the complete game. Experiment with the game constants, music, images, and animations to get the look you want.

Saving Your Projects

You can save your projects on your Chromebook drive for use in the future. At the bottom of the MakeCode window, and click on the floppy disk icon to the right of the box with your project's name. The file should be saved as "arcade-YOURNAME.png". This image file has the program code embedded in it. On the first page of the MakeCode website there is an "Import" button that will allow you to read this .PNG file and edit the code.