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 Trash Panda png file.

This will open the code into the MCA editor.

On Start

In the on start block we'll first call the function named Intro. Here, we set the background image to act as a game title/splash screen.

Then, we call another function called bgm (background music) to loop four times with the repeat 4 times loop.

The bgm function contains the play tone and rest blocks of a startup song.

Next, we pause for a second and then give the player two screens of instructions using the show long text blocks, which must be advanced by pressing the A button.

Background and Tile Map

Next, we'll set background image to a city skyline, and then set tile map.

The tile map will act the same as a scrolling platformer map, except vertically rather than horizontally as we did in the Ruby platformer game.

Each index color block is used to place a different tile and in some cases will also be the spawn point for sprite characters, enemies, and food.

We'll look at these individual tiles in a moment.

Goal Setup

The goal is for Lynn to climb to the top of the building. We'll place sprites on some of the tile map positions to represent the UBS logo at the top of the building, as well as generic looking yellow and red building sprites that will be on the actual blocks the character needs to overlap to win.

Level Setup

In the levelSetup function we'll place the rest of the tiles. Have another look at the tile map to see where each of these images is being placed.

Lynn Character Setup

Now we'll set up the main character, Lynn the Trash Panda. This one is big, so we'll look at it in a few sections.

First, we'll create the Lynn character sprite and set her lives to 7, and then place her x/y position and z depth.

We'll have her appear on top of the blue tile on the tile map.

So that there is gravity in the scene for her to fight, we'll set Lynn ay (acceleration y) to 200.

Lynn Animation

Next up are Lynn's climbing animation and idle animation cycles. We'll create one set facing left (when she's on the right of the building) and one facing left.

We'll also set a single frame animation of Lynn when she's idle. This way we can switch between idle and climbing easily when the player is or isn't pressing one of the buttons.

Camera Nulls

The next thing we'll do is a bit tricky. We will need to trick the camera into following Lynn as she climbs the building, but not keep her in the center of the frame, which is the default behavior for the camera follow sprite block.

Instead, we want to center the camera with a 35 pixel offset to the left or right, depending on if she's on the right or left side of the building.

This will keep the building from seeming like it's jumping around the scene.

To do this, we'll create a pair of sprites to follow that we'll consider as transform nulls. They will be set to move with Lynn, but with their own relative offset on the x-axis.

These will be invisible during gameplay, but to help us visualize them and understand the concept, we'll create one set of them that have marker graphics, and another set that's invisible. By flipping the false to true in the if...else logic loop, we can turn on (or off) these visualization markers.

Pizza Time

It gets pretty tiring to climb a big, tall building when you're a sweet little trash panda. Thankfully, a thoughtful human will place a giant slice of pizza out of a randomly selected window for Lynn to eat!

In this function we'll set up the food, make a pizza slice sprite with a z depth of 1, and then use the place pizza on top of random white tile block to have it appear on one of the white tiles in the tile map.

Various Variables

These are the last few on start blocks to take care of. First, we'll set the center camera position. (Later the Lynn nulls will take care of this).

Then, we set up some variables for gameplay (we'll see how these are used momentarily:

• dropBricks = true
• sendCrows = true
• goalMet = false
• GameOn = true

activate animation Idle_Right on Lynn sets her in the ready position for game start.

Then, we'll set score to 1000 -- as the game progresses, this number will be counting down, so that the player's score is based on how quickly they reach the goal.

Climbing Action

At heart, Trash Panda is a button mashing game! So let's set up some buttons to mash.

on A button pressed will be for climbing on the right side of the building and B on the left.

To prevent button presses during the splash screen from doing anything, such as playing unexpected sounds, we'll first check to see if the GameOn variable is true.

Then, we check to see if the goalMet variable is false. (This way, the buttons will stop working when Lynn reaches the top and the goalMet variable is flipped to true.)

The A button will move Lynn's horizontal (x) position to 180, and the B button to 110, which represent the two sides of the building.

Next, her velocity on y is set to -45, which is a boost in the vertical direction. Remember, we already set her acceleration on y to 200, so gravity will be constantly fighting against her. Press quickly to ascend! Her activate animation block will cause her to cycle through the climbing animation frames. Note the on game update block used to return her to Idle animation cycle when she isn't climbing in the y direction.

Now, we'll use our camera follow sprite block with the two offset nulls we created during the Lynn setup function. A button follows the Lynn_offset_Right null sprite and B the Lynn_offset_Left null sprite. Note the on game update block used to adjust the nulls to keep them in sync with Lynn's x position with offsets.

Lastly, we'll play a little two note climbing sound.

Pizza Power Up

When Lynn needs a power up, she can grab a slice! on sprite of kind Player overlaps otherSprite of kind Food will take care of noting when the collision occurs.

In this block we'll use destroy other Sprite with hearts effect for 500 ms to get rid of the pizza, change life by 1 to power up the hearts, and play sound ba ding until done.

Scoring

The faster Lynn makes it to the top, the higher the score! In order to calculate the score, we'll use on game update every 50 ms block.

It will first check that the goalMet variable is false.

Then, it will change scory by -1 point from the initial value of 1000.

Not only does this determine the score, but it's also a countdown timer! By adding the if score < 1 then ... game over lose blocks we can cause the game to end if the player takes too much time.

Bricks Keep Falling on My Head!

There are two kinds of enemies in Trash Panda -- falling bricks and flying crows. They work in nearly the same way, with a few adjustments. We'll look at the bricks first.

To begin with, on game update every pick random 600 to 1200 ms gives us a bit of variability to when bricks will fall.

Then, we check if dropBricks = true to see if the game has started and bricks are allowed to fall.

for element value of array of all pink tiles...do is a way of iterating through a list. In this case, there are three pink tiles in the tile map at the top of the level. The for element... block loops through those three tiles, one at a time.

Per element, the loop will do an if 10% chance then check, which randomizes the true/false check.

When the percent chance comes up true, we set brick to sprite of kind Enemy with a brick sprite graphic, and then on top of value place brick sets the sprite on top of the currently active element tile.

To drop the brick we set brick vy to 80, and we also set it to destroy on wall which is what happens if a brick reaches to bottom of the tile map where there is a row of tiles with the wall flag turned on.

Lastly, we'll play a descending tone glide from 1320hz to 440hz over the course of 800ms. This is a fancy looking block, because it doesn't yet exist in MakeCode Arcade's Block mode -- it was entered over in the JavaScript mode.

Crows Fly

We'll make the Crows just as we did the bricks. The main differences here are the tiles from which they spawn on either side of the board, and direction of travel, and the addition of a two frame animation cycle.

I've Been Hit!

Here's what happens when Lynn collides with a brick or a crow:

• on sprite of kind Enemy overlaps otherSprite of kind Player block senses the collision
• change otherSprite y by 22 moves Lynn down the building a bit, so she looses progress and really needs to scramble to get to the top. Go Lynn!
• change life by -1 removes one of the player's hearts
• destroy sprite with rings effect for 200 ms gets rid of the brick or crow
• camera shake by 5 pixels for 350 ms gives the player a good, jolting sense of a strong impact