MakeCode Arcade Holiday e-Card and Game!

Materials Needed:

• Computer with internet access

Getting Started

• Open a browser to https://arcade.makecode.com

• Click on the New Project button and name your Project “Xmas Card” or whatever you’d like

Backgrounds and Music

• Click on the Scene Toolbox drawer to open it up

• Find the Set Background Image block and drag that into the On Start block on the Workspace

• Click on the grey box to open up the Image Editor

• Spend some time drawing the cover for your Christmas card – you can use the color palette and drawing tools on the left side of the screen

Now let’s create another background image for the inside of the card where we’re going to play our game.

• From the Scene Toolbox drawer, drag another Set Background Image block and drop after the first Set Background Image block

• Click on the grey box to open up the Image Editor and this time, draw a background scene for your game. In my case, I drew a forest landscape at night since my game is about Santa flying around on his sleigh.

Now that we have our background images, let’s add some music to our card. We’re going to put our music blocks in a separate function so they don’t clutter up the rest of our code.

• Click on the Advanced tab in the Toolbox to show more categories, click on the Functions Toolbox drawer, and then click the Make a Function button

• Instead of “doSomething”, name your function “PlayMusic” or the name of whatever song you want to play. Then click Done.

• The Function block will appear on your Workspace. Now look up the notes of your favorite Holiday song, so you can code it!

• From the Music Toolbox drawer, use the Play Tone block to create a sequence of note tones and durations that match whatever song you want to play. Feel free to use Repeat loops for repeating notes. This is Jingle Bells:

• From the Functions Toolbox drawer, drag a Call PlayMusic block out and drop it in between our two Set Background Image blocks

Create our Game Character

Now let’s create the main character for our game.

• From the Sprites Toolbox drawer, drag a Set mySprite to Sprite of kind Player block into the On Start block

• Click on the grey box to open the Image Editor and draw the main character for your game. This could be Santa, Rudolph, Frosty, whatever you want!

• From the Controller Toolbox drawer, drag a Move mySprite with buttons block after the Set Sprite block

• Now in the Game Simulator, try moving your character around the screen with the joystick or arrow buttons on the keyboard.

• Notice that you can move your character off the screen! To prevent that, from the Sprites Toolbox drawer, drag a Set mySprite stay in screen block after the Move block, and click the toggle to On.

• The last thing we need to do is set the initial score of our game. From the Info Toolbox drawer, drag a Set Score block and drop into the On Start block.

Your code should look a little like this so far:

Collectibles and Enemies

Now let’s make collectibles and enemies rain from the sky! For the theme of my game, I made presents as the things for my main character to collect, and a grinch for the enemy that my main character needs to avoid.

• From the Game Toolbox drawer, drag an On Game Update Every 500 ms block and drop it anywhere on the Workspace

• Change the time interval from 500 to 2 seconds (2000 ms)

• From the Sprites Toolbox drawer, scroll down to the Projectiles category, and drag a Set Projectile to Projectile from Side block and drop into the On Game Update Every block

• Click on the grey box to open up the Image Editor and draw a collectible object – it could be a present, a coin, or a ham

• Right now this projectile is travelling diagonally across the screen. We want it to fall from the top to the bottom. To do this we need to set the velocity values appropriately. Velocity determines the speed and the direction along the X (horizontal) and Y (vertical) axis.

• In the Set Projectile to Projectile from Side block, set the vx value to be 0 (we don’t want it to move horizontally) and the vy value to be 50

Notice that while now the objects are falling from top to bottom, it’s all along the left side of the screen. We want them to fall at random locations across the screen.

• From the Sprites Toolbox drawer, drag a Set mySprite Position block and drop after the Set Projectile block

• In the Set mySprite Position block, use the drop-down menu to select projectile (or whatever you named your projectile variable)

• From the Math Toolbox drawer, drag a Pick Random block and drop into the X value of the Set mySprite Position block

• In the Pick Random block, set the maximum value to 160 since the width of the screen is 160 pixels

Now we want to do the same thing for our Enemies. Let’s just copy and tweak this code.

• Right-click on the On Game Update Every block, and select Duplicate to make a copy

• Change the interval from 2 seconds to 3 seconds (3000 ms)

• In the Set Projectile to Projectile from Side block, click on the drop-down menu and select New variable…

• Give your enemy a name, like “grinch” or whatever you plan use as an enemy

• Click to open the Image Editor, erase the existing image and draw a picture of your enemy sprite

• In the Set Sprite Position block, use the drop-down menu to select the name of your enemy variable

We also need to set the kind for our enemy sprite – we’ll use this later in the Overlap events

• From the Sprites Toolbox drawer, scroll down to the Overlaps category, drag the Set mySprite kind block out and drop after the Set Sprite Position block

• Click on the Player drop-down menu and change this to Enemy

Your code should look like this:

You can add a few more collectibles and enemies if you’d like – just duplicate and tweak this code.

Overlap Events

Now let’s code what happens when our main character overlaps with a collectible or enemy.

• From the Sprites Toolbox drawer, scroll down to the Overlaps category, drag an On Sprite of Kind Overlaps otherSprite block and drop anywhere on the Workspace

• Click on the second Player drop-down menu and change to Projectile

• From the Music Toolbox drawer, drag a Play Sound block into the On Sprite Overlaps block

• From the Sprites Toolbox drawer, in the Effects category, drag a Destroy mySprite block and drop into the On Sprite Overlaps block

• This part is a bit tricky – you’re going to drag the otherSprite block from the On Sprite Overlaps block into the Destroy block replacing mySprite

• Click the plus + icon on the Destroy block to expand and select an effect to show

• From the Info Toolbox drawer, drag a Change Score block and drop into the On Sprite Overlaps block

• Right-click on this On Sprite Overlaps block and select Duplicate to make a copy

• In the On Sprite Overlaps block, click on the Projectile drop-down menu, and this time change to Enemy

• In the Play Sound block select a different (sad) sound to play when we crash into an enemy

• In the Change Score block, type -1 to lose a point

Win or Lose Game

Now we just need to code how we’re going to win or lose the game!

• From the Game Toolbox drawer, drag an On Game Update block and drop anywhere on the Workspace. This block runs on every frame of the game (so, constantly!) We’re going to add some checks for the Score and determine if you’ve won or lost the game.

• From the Logic Toolbox drawer, drag an If Then block into the On Game Update block

• From the Logic Toolbox drawer, drag a 0 < 0 Comparison block and drop into the If Then block replacing true

• From the Info Toolbox drawer, drag a Score block and drop into the first slot of the 0 < 0 Comparison block

• From the Game Toolbox drawer, scroll all the way to the bottom and drag a Show Long Text block and drop into the If Then block

• In the Show Long Text block, type a message for your Christmas card (including who it’s from) and then set it to show in full screen

• From the Game Toolbox drawer, drag a Game Over block and drop after the Show Long Text block

Now let’s set the win condition – let’s say that if they score more than 10 points they win the game!

• Right-click on the If Then block, and select Duplicate

• Move this copied code right under the first If Then block

• In the Comparison block, click on the less than < symbol and select greater than > symbol

• Type 10 in the second slot of the Comparison block replacing 0

• In the Show Long Text block, type a different message for people who win your Christmas card game

• In the Game Over block, click on the toggle to change to WIN

Finish and Share!

That’s it! Your full code should look something like this:

Try playing your game and make tweaks or finishing polish to get it where you really like it!

Here’s a version of my game where I flip Santa’s Sleigh depending on which direction he’s going and also add some bling to my ending dialog boxes: https://makecode.com/_dARDAFTkCg1b