Lesson Steps

Getting Started with Microsoft MakeCode Arcade

30 min

<h3>If you have never used Microsoft MakeCode before, it is a wonderful tool to start learning how to code. Originally developed and released as a programming platform for the BBC micro:bit several years ago, it has now expanded to include several other platforms in the hardware and software space. Let’s start with the MakeCode version called MakeCode Arcade, a game development platform for you to create your own old-school style video games! With Makey Makey, you can invent your own controllers for the games you code!</h3>

 

<h3>Supplies:</h3>

<ul>
<li>Makey Makey</li>
<li><a href="https://arcade.makecode.com/56241-12752-18215-79830" target="_blank">MakeCode Arcade</a></li>
</ul>

 

 

<table width="100%">
<tbody>
<tr>
<td>
<h1>1. Welcome to MakeCode Arcade</h1>
</td>
</tr>
<tr>
<td>
In this getting started guide, you will walk through creating a new game in MakeCode Arcade, including navigating the environment, adding the Makey Makey code extension, and creating a simple “Hello World” program to move a character around the screen with Makey Makey.

 
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

<table width="100%">
<tbody>
<tr>
<td>
<h1>2. Get Acquainted with MakeCode Arcade</h1>
</td>
</tr>
<tr>
<td>
MakeCode Arcade is a block-based programming environment similar to Scratch or Blockly where you “snap” or place different code blocks together to build a program and, in this case, a game. Navigate to <a data-mce-fragment="1" data-mce-href="https://arcade.makecode.com/" href="https://arcade.makecode.com/">arcade.makecode.com</a> click on ‘New Project’ and give your game a quick name. You should now be on a window similar to the image below. Let’s get oriented to the MakeCode programming environment where you will be programming and building your games. 

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.10.42_AM_1024x1024.png?v=1701710344" style="height: 401px; width: 700px;" />

 

(1)The main focus of the window is taken up by your programming space where you assemble your game code.

(2)You can find all  the code blocks you need to build a game in color-coded and sorted drawers . These drawers are themed around the functionality of the programming blocks they hold. Microsoft has also color-coded the blocks to make it easier to find things.

Quick Tip: If you ever have difficulty finding a block you are looking for, you can always use the search box at the top of the block drawers! 

(3)When you start to build your game, it will be previewed in the simulator window where you can test the game out by clicking on the controls or using keyboard controls. In our case, you will be using a Makey Makey rather than a keyboard and mouse.

(4)You can save your work by naming the file and clicking Save. This will download the file to your computer, but it will also save the game to the cookies on your computer in case you want to work on it later.

(5) When you get to the point of wanting to share your game for others to play, you can use the share button and choose from a number of ways to share your game with others, embed it in a website or blog, or even add it to a MakeCode Arcade Kiosk (more on that later!) 

(6) Finally, as you build your skill and understanding of coding you can switch between the drag and drop blocks and different text-based languages (javascript or Python) for some advanced programming options.

 
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

<table width="100%">
<tbody>
<tr>
<td>
<h1>3. Let's Start Programming</h1>
</td>
</tr>
<tr>
<td>
 As a first program, you will create a basic demo level of a game and a character that can move around with the controls. 

 

<img alt="" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.13.02_AM_480x480.png?v=1701710635" />

 

First, you need to create the game's setting by adding a background. When you create a new program, your programming space starts with an on start block. Any code blocks you place inside of that block will execute or run at the start of your game. So, the first thing we do will be to add a set background color to ___ block inside of the on start block. 

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.14.34_AM_480x480.png?v=1701710671" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.14.34_AM_480x480.png?v=1701710671" /> 
 
You can find the set background color block under the scene drawer. Click and drag the block into the on start block. If the volume is turned up on your computer, it should snap into place with a satisfying clicking noise. 

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.19.18_AM_480x480.png?v=1701710709" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.19.18_AM_480x480.png?v=1701710709" /> 
 
From there, you can select a color of the background you want by clicking on the color swatch inside of set background color to ___. Once you choose a color, your simulator window should change to that color. 

Now, to add a character! With the background color set, it is time to place a character for us to control on the screen. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.20.29_AM_480x480.png?v=1701710754" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.20.29_AM_480x480.png?v=1701710754" />

 

You do this by opening the Sprites drawer and dragging in a set mySprite to____ block into your programming space and inserting it into the on start just below the background block. After placing the block, select an image for your sprite. Click on the swatch just inside of the blue sprite block opening up a sprite editor.

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.21.59_AM_480x480.png?v=1701710791" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.21.59_AM_480x480.png?v=1701710791" />
 

In MakeCode you can draw your own characters, but for this example, you will select an existing image from the gallery by selecting the “Gallery” tab at the top; feel free to choose any sprite you want from the list!

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.23.56_AM_480x480.png?v=1701710838" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.23.56_AM_480x480.png?v=1701710838" />

 

When you return to your programming window, you should see an updated simulator with your character in the center of the window. Now you have a character but no way of controlling it! This is because you haven’t programmed the character to move yet. A computer is only as smart as its programmer. Let’s make this game a little smarter! 

To enable controlling a sprite with your computer's keyboard keys (or the simulator buttons), you need to add the move mySprite with Buttons block from the Controller drawer. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.27.19_AM_480x480.png?v=1701710903" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.27.19_AM_480x480.png?v=1701710903" />

 

This block will enable you to move the selected sprite with the controller buttons and keyboard arrow keys, or even better… a Makey Makey! You should now be able to go over to the simulator with your mouse and hover over the window to bring it to focus. Press the arrow keys on your computer keyboard to see if your character moves around. 

Your final MakeCode Arcade program should look something like the above screenshot!

 
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
</tbody>
</table>

<table width="100%">
<tbody>
<tr>
<td>
<h1>4. Plug and Play with Makey Makey</h1>
</td>
</tr>
<tr>
<td>
Using your USB cable, plug the Makey Makey into your computer's USB Port. It is ready to use once the Makey Makey has gone through its blinky cycle. Since Makey Makey works by completing a circuit, touch EARTH with one finger and then touch the right arrow key with another finger. Make sure to press them at the same time.   

 

<img data-mce-fragment="1" data-mce-src="https://makeymakey.com/cdn/shop/articles/makey_hands_1400x.jpg?v=1585086729" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://makeymakey.com/cdn/shop/articles/makey_hands_1400x.jpg?v=1585086729" />

 

Touching EARTH and an arrow key input  should complete the circuit between the two pads, and your character should move in the direction of the arrow key you pressed!

If your character doesn’t move for some reason, here are some troubleshooting tips:

<ol>
<li data-mce-style="font-weight: 400;">Check your connections from the Makey Makey to the computer. Make sure your USB cable is plugged into both!</li>
<li data-mce-style="font-weight: 400;">Does the LED by the Arrow Key input on the Makey Makey light up when you press the input? If not, ensure you complete a firm connection between the Arrow Key input and EARTH</li>
<li data-mce-style="font-weight: 400;">Is your simulator in focus? Make sure you mouse over the simulator and make sure it is in focus. You can tell it is in focus if the dpad is active. When the simulator is inactive, the controls are blued out. </li>
</ol>

 

<img alt="" data-mce-style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-04_at_9.32.38_AM_480x480.png?v=1701711178" />

Inactive controller

 
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>5. Adding the Makey Makey MakeCode Extension</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
Many games are simple enough to use Makey Makey with just the move with buttons block. However, you will quickly find that you want to use other buttons in MakeCode, like the A and B buttons. These buttons are not mapped to the Makey Makey natively, there is a MakeCode extension to make the Makey Makey fully functional with MakeCode arcade for both single-player games and more elaborate two-player games. 

Adding the Makey Makey extension to your MakeCode Arcade games is pretty straightforward. Once you have created a game, it is just a few clicks away!

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.10.49_PM_480x480.png?v=1701711242" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.10.49_PM_480x480.png?v=1701711242" />

 
 

To add the extension, click on the Extensions drawer, which will open up a selection of community extensions that enable you to add different packages of blocks to your program. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.11.21_PM_480x480.png?v=1701711287" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.11.21_PM_480x480.png?v=1701711287" />

 

In the search bar, type “Makey Makey” and it will bring up our extension. Click on it to load it into your project. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.11.53_PM_480x480.png?v=1701711329" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.11.53_PM_480x480.png?v=1701711329" /> 
 

Once the extension loads, you will have a Makey Makey drawer with coding blocks specific to Makey Makey. Click on the Makey Makey drawer to see the Makey Makey coding  blocks! 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.12.08_PM_480x480.png?v=1701711363" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_12.12.08_PM_480x480.png?v=1701711363" /> 
 

The first block maps the Makey Makey keys to the MakeCode Arcade keys (mapping A and B buttons to SPACE and CLICK on your Makey Makey). This will be one of your new favorite coding blocks! All you have to do is to add this block to the top of your on start event block in any program. This block will make  Makey Makey work for all the MakeCode Arcade buttons right out of the box.

The second block is a more in-depth block to map the different inputs on the Makey Makey to other controls for different players. You will use this in the case of a multiplayer game or if you want to use different inputs for player 1 in a single-player game. If you would prefer to control your sprite with WASD rather than the arrow keys, this block is what you would use to do that. We will incorporate this block into more advanced games in our How-to series!

 

<h3>Where to go now? </h3>

Now that you have the basics of building and playing games in Microsoft MakeCode Arcade, it is recommended you check out the series of project How-To guides! They will walk you through how to program different games and recommend controllers to explore with Makey Makey to control those games! To get started, check out the <a href="https://makeymakey.com/blogs/how-to-instructions/makecode-arcade-lesson-one-coding-sprite-movement-with-classic-tag-game" rel="noopener noreferrer" target="_blank">first game in the series - Tag</a>!

 

 <a href="https://makeymakey.com/blogs/how-to-instructions/makecode-arcade-lesson-one-coding-sprite-movement-with-classic-tag-game" rel="noopener noreferrer" target="_blank"><img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/tag_600x600.gif?v=1701720453" src="https://cdn.shopify.com/s/files/1/0162/8612/files/tag_600x600.gif?v=1701720453" /></a>
</td>
</tr>
</tbody>
</table>

<h3>In this project, you will build a basic tag game for the first real game with Microsoft MakeCode Arcade. In the introduction, you created a character or ‘sprite’, and were able to move it around the screen using the arrow keys on the keyboard or with our Makey Makey. You will build on that concept and add another sprite that will follow/chase our player sprite. The game's goal will be to go as long as you can without getting tagged.</h3>

<h3> </h3>

<h3>Supplies:</h3>

<ul data-mce-fragment="1">
<li data-mce-fragment="1">Makey Makey</li>
<li data-mce-fragment="1">Create your own Controller!</li>
</ul>

 

 

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>1. Setting the Scene for Your First Game</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
If this is your first time using Microsoft MakeCode be sure to start with the <a href="https://makeymakey.com/blogs/how-to-instructions/getting-started-with-microsoft-makecode-arcade" rel="noopener noreferrer" target="_blank">Introduction to MakeCode Arcade with Makey Makey</a> for a brief introduction to the environment and using Makey Makey with MakeCode Arcade. 

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/tag_480x480.gif?v=1701720453" />

 

First, create a new game in <a href="http://arcade.makecode/">MakeCode</a> and name it whatever you like, but for the example the game will be named ‘Tag.’ 

 

 <img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.39.33_AM_480x480.png?v=1701712435" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.39.33_AM_480x480.png?v=1701712435" />

 

The best games tell a story, and the best stories have a great setting. So, you need to set the stage for the game and that is done through setting the background. In the introduction, you used background color; this time use a background image instead. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.40.31_AM_480x480.png?v=1701712475" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.40.31_AM_480x480.png?v=1701712475" />

 

From the Scene drawer, select the set background image to___ block. This block is similar to the background color block but enables you to use an image rather than just a color. Place the block at the top of your on start block and click on the swatch, then find a thumbnail image in the Gallery tab to choose your setting. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.41.17_AM_480x480.png?v=1701712504" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.41.17_AM_480x480.png?v=1701712504" /> 
 

Remember, you are telling a story here, and the background sets the mood and theme of that story. So choose wisely!

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.43.05_AM_480x480.png?v=1701712581" />

 

Once you select the background image of your choice, click Select, and you can edit it further if you want. Once finished, click done in the lower right corner. 

 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>2. Create a Player Sprite</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
With the background selected, you now have to add the character you will control: the sprite. 

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.44.20_AM_480x480.png?v=1701712648" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.44.20_AM_480x480.png?v=1701712648" />

 

You can add a sprite by opening the Sprite drawer and adding the set mySprite to___ block, placing it just below the background block in the on start block as the image shows. 

The set mySprite to__ block is a valuable and powerful block; you will use it a lot in creating games in MakeCode, so take a moment to review it in more detail here. It has three components, each of which will help you as your games get more complex. Let’s dive in and see what these components are.

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.45.17_AM_480x480.png?v=1701712690" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.45.17_AM_480x480.png?v=1701712690" />

 

First off, your sprite has a name! When you create a new sprite, MakeCode gives it a generic name of mySprite. If you were to create a new sprite, MakeCode would name it  mySprite2 and so on. This is just fine for simple games, but as you add more and more sprites, you may want to name them something more descriptive. You can create a custom sprite name by clicking on the drop-down next to the mySprite name and select rename variable and type in whatever name you would like!

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.21.59_AM_fd59fe0f-d8c4-4131-90fa-b70dcd3c7e07_480x480.png?v=1701712757" />

 

Next up is the sprite image. You have experience with this already, so let’s select the image for your player sprite now! Remember to think about the story you are telling and to choose a sprite that would make sense for your game. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.47.20_AM_480x480.png?v=1701712792" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.47.20_AM_480x480.png?v=1701712792" /> 
 
Finally, your sprite has a kind! Think of the sprite kind as a way of sorting groups or categories of sprites. Think of your favorite video game. That game probably has enemies, something you collect to score, things to avoid, etc. Each of those things is a category or ‘type.’ MakeCode gives you some standard types, but you can also create your own, similar to naming your sprite. For this game, let’s leave your character as a Player type. 

 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>3. Create an Enemy Sprite</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">Now, create a sprite for the character who is ‘it’! From the Sprite drawer bring in another set mySprite to ____ block and place it just below your first sprite. 
 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.50.48_AM_480x480.png?v=1701712870" />

 
You can name your sprite if you would like, hopefully, something descriptive. Now, elect an image for your sprite and make sure to change change the kind type. The important thing is the difference in sprite type. You, you can create a custom type if you would prefer, but for this simple game, the kind type of ‘enemy’ works.
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 

 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>4. Set Location</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
Once you create your 2nd sprite, you will notice that both sprites start one on top of the other.

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.52.32_AM_480x480.png?v=1701712915" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.52.32_AM_480x480.png?v=1701712915" />

 

You need to change the starting location of the characters. First, the one who is it, by using the set Sprite position to x __ y __block. This block sets the x and y-coordinates' location of the sprite. Place the block as shown, select your ‘it’ sprite, and click on one of the numbers in the block. 

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.52.55_AM_480x480.png?v=1701712973" />

 

This will bring up a tool to let you choose the spot on the screen without having to guess the x and y-coordinates. 

 

<img alt="" height="401" src="https://cdn.shopify.com/s/files/1/0162/8612/files/3-location-on-screen_1024x1024.jpg?v=1690412077" width="713" />

 

Select the very top of the window. This tool then populates the correct X and Y coordinates for you. You should see your sprite move up to that position once the simulator runs.

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.56.15_AM_480x480.png?v=1701713021" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.56.15_AM_480x480.png?v=1701713021" />

 

If you want to start your player somewhere else on the screen, you would repeat the process: adding another location block, assigning it to that sprite, and selecting a spot. 

<ul data-mce-fragment="1">
</ul>

 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>5. Controlling the Sprite</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
Now, to get things moving! You need to code movement for our player character that we want to control with the arrow keys, but you also want to code the  “it” sprite to chase your player. 

 

 <img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.05.53_AM_480x480.png?v=1701713149" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.05.53_AM_480x480.png?v=1701713149" />

 

As in the getting started guide, you need to add the move mySprite with buttons block from the controls drawer to your program just below the set position blocks. You do not need to add anything other than this block to get your player sprite to move with basic controls. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.14.01_AM_480x480.png?v=1701713189" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.14.01_AM_480x480.png?v=1701713189" />

 

There is a handy block for getting the bad guy or the “it” sprite to chase you. It is called the set ____ to follow ____ block. This block tells one sprite to follow another sprite. That is perfect for a game of tag! The one issue is that the sprite doing the following will be really fast. To change the speed of the following sprite, click on the block's plus sign (+) and change the value to something lower; it is recommend starting at 50. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.16.43_AM_480x480.png?v=1701713235" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.16.43_AM_480x480.png?v=1701713235" />

 

Now, test your game! You should be able to move your player sprite around the window while the “it” sprite chases you. There is a problem, though. Nothing happens yet when the “it” sprite touches you because you need to write the program to tell the game what to do. 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1"> </td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>6. When Sprites Collide</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
You can now program the tag functionality and tell MakeCode what to do when the two sprites touch each other.

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.20.09_AM_480x480.png?v=1701713292" />

Enter the on sprite of kind Player overlaps otherSprite of kind player block! This is an event block, meaning it will only run the code inside it when the given event trigger is true. In this case, when two different sprites overlap one another, it will trigger the event. For this first game, use this in its most simple form and add complexity to it in future games. Open the Sprites drawer, and you can find this block towards the bottom of the list under the Overlaps category. Drag it into your program. It should be on its own and shouldn’t fit into the on start block. The functionality of an event block is that it is its own little program inside of a program.

There is one change you need to make to this block, and that is to change the second sprite kind to an enemy kind of player, so the event will be triggered when one player sprite overlaps another sprite of the enemy kind. 

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.26.08_AM_480x480.png?v=1701713341" />

 

Now, what happens when you are tagged? In this game we want the game to be over! Find the game over ___ block from the Game drawer and drag it into the overlap event block. Now, change the state of the game over ___ block to lose.   

When you test your game, you should be able to run around and avoid the it sprite, but when it finally catches you, the game should end in a losing state!

<ul data-mce-fragment="1">
</ul>

  
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1"> </td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>7. Winning Scoring</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
But how do you win? That is a great question, and to be honest, the biggest issue with tag in general is that there isn’t really a winner!  

<ol>
</ol>

To be fair, you can add a game component of keeping score so you can compete against your friends. You will track how many seconds you can go without getting tagged and be rewarded with a score by incorporating another event block that will trigger scoring!

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.42.32_AM_480x480.png?v=1701713650" />

 

The event block you will use is called the on game update every _____ms block. This block is triggered in increments of time. You can find the block in the Game drawer. Click and drag one out into your program just below your on start event. Using the dropdown menu, change the value to 1 second (1000 milliseconds). Triggering this event every second!

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_11.42.43_AM_480x480.png?v=1701713701" />

 

Now, you want to change the score every second you aren’t tagged! From the Info drawer, find the change score by ____ block and drag that to the on game update every _____ms block. 

Now, when you test your game out, you should see a score counter in the upper right corner of your window, increasing each second that you are not tagged. When you are tagged, the Game Over window will show your final score! 

That is how you program tag in Microsoft MakeCode! For a full coding reference, you can check out the completed game below (check out the game in MakeCode<a data-mce-fragment="1" data-mce-href="https://makecode.com/_AYU3tzhm6UuF" href="https://makecode.com/_AYU3tzhm6UuF"> here</a>.)

 

<a href="https://arcade.makecode.com/28467-10503-96674-64598" target="_blank" title="Click to go to tag game on MakeCode Arcade"><img alt="Tag game simulator" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/tag_game_480x480.gif?v=1701720177" src="https://cdn.shopify.com/s/files/1/0162/8612/files/tag_game_480x480.gif?v=1701720177" /> </a>

 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>8. Recommended Controller and What's Next?</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
There are so many ways to incorporate a Makey Makey controller into this game. The one requirement is that it needs the four direction arrows for you to control your character’s movements: up, down, left, and right. A couple of controller options that are recommended are as follows. 

<ol>
<li><a href="https://makeymakey.com/blogs/how-to-instructions/make-a-sketch-hula-hoop-controller">Hula Hoop Controller</a></li>
<li><a href="https://makeymakey.com/blogs/how-to-instructions/create-a-controller-to-plug-and-play-1">Play-Doh Controller</a></li>
<li><a href="https://makeymakey.com/blogs/how-to-instructions/accessibility-guide-glove-controller">Glove Controller</a></li>
</ol>

Taking Your Game to the Next Level…

This game is rather simple and can get old quickly. It is designed to be a starting point for you to build from, not a finished product! You should try to take the game to the next level and add to it. Change it up and make it your own! A couple of ways you can explore how to do this…

 

<ol>
<li>How does the “it” sprite get faster over time? </li>
<li>Does a sprite size change over time?</li>
<li>How could you add lives as well as the score?</li>
</ol>

 Check out <a href="https://makeymakey.com/blogs/how-to-instructions/makecode-arcade-lesson-two-collision-and-scoring-with-fruit-catcher" rel="noopener noreferrer" target="_blank">MakeCode Arcade Lesson Two: Collision and Scoring</a>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<h3>This game is called Fruit Catcher, and it is a run-and-collect game. Fruit tokens fall from random points at the top of the screen, and the player controls a character to move back and forth and collects the fruit before it hits the ground. Let’s dig in and start catching fruit!</h3>

<h3> </h3>

<h3> </h3>

<h3>Supplies:</h3>

<ul data-mce-fragment="1">
<li data-mce-fragment="1">Makey Makey</li>
<li data-mce-fragment="1">Create your own Controller!</li>
</ul>

 

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>1. Setting the scene</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 If this is your first time using Microsoft MakeCode, be sure to start with <a data-mce-fragment="1" data-mce-href="https://docs.google.com/document/d/1N3Z-Al9Qjppi6VT_k1QjMw-br0GGsiZe0lINSvt2zM0/edit#" href="https://docs.google.com/document/d/1N3Z-Al9Qjppi6VT_k1QjMw-br0GGsiZe0lINSvt2zM0/edit#">Introduction to MakeCode Arcade with Makey Makey</a> for a brief introduction to the environment and using Makey Makey with MakeCode Arcade. 

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/fruit_catcher_b7516663-20e1-4343-95c1-53151f8c5bb2_480x480.gif?v=1701732573" />

 

Create a new game in <a data-mce-fragment="1" data-mce-href="http://arcade.makecode" href="http://arcade.makecode/">MakeCode</a> and name it whatever you like, but in the example the game is named ‘Fruit Catcher.’ 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.39.33_AM_480x480.png?v=1701712435" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.39.33_AM_480x480.png?v=1701712435" />

 

You need to set the stage for our game, and that is done by setting the background. In the introduction, you used background color. For this game, you will use a background image instead. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_8.53.40_AM_480x480.png?v=1701727442" height="95" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_8.53.40_AM_480x480.png?v=1701727442" width="434" />

 

From the Scene drawer, select the set background image to ____ block. This block is similar to the background color block but enables you to use an image rather than just a color. Place the block at the top of your on start block and click on the swatch/thumbnail image in the block. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.41.17_AM_01b6b4c8-d999-441f-bfc2-95f49526dc85_480x480.png?v=1701727478" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.41.17_AM_01b6b4c8-d999-441f-bfc2-95f49526dc85_480x480.png?v=1701727478" />

 

This should bring up an editor window similar to the one you used to create a sprite. At the top of the window click on the Gallery tab and select the image of the tree/forest image. Remember, this game is called “Fruit Catcher,” and the fruit is falling from the trees, but if you want to change the theme from fruit, feel free!

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_8.57.19_AM_480x480.png?v=1701727523" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_8.57.19_AM_480x480.png?v=1701727523" /> 
 
Once you select the background image, click Select. If you want to edit the background you can do that in the editor. Once you are done editing and ready to code, click done in the lower right corner.
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1"> </td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>2. Set Player Sprite</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
With the background selected you can now add the character (the catcher) who will be the player character.

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.01.49_AM_480x480.png?v=1701727609" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.01.49_AM_480x480.png?v=1701727609" /> 
 

You will add a sprite by opening the Sprite drawer, adding the set mySprite to_____ block, and placing it just below the background block in the on start block as the image shows. 

The set mySprite to_____ block is a useful and powerful block, and you will use it a lot in creating games in MakeCode Arcade. You went over the details of the different parts of this block in our <a href="https://makeymakey.com/blogs/how-to-instructions/makecode-arcade-lesson-one-coding-sprite-movement-with-classic-tag-game">first game</a> (Tag). If you need a quick refresh on these components, check out the sprite section in the <a href="https://makeymakey.com/blogs/how-to-instructions/makecode-arcade-lesson-one-coding-sprite-movement-with-classic-tag-game">Tag Coding guide</a>. 

 
<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.21.59_AM_fd59fe0f-d8c4-4131-90fa-b70dcd3c7e07_480x480.png?v=1701712757" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-11-30_at_10.21.59_AM_fd59fe0f-d8c4-4131-90fa-b70dcd3c7e07_480x480.png?v=1701712757" />

 

Let’s set the sprite image. You have experience with this already, so let’s select the image for your player sprite now! Remember to think about the story you are telling and to select a sprite that would make sense for your game. 

 
Finally, your sprite has a kind! For this game, the catcher is your player.  
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>3. Set Sprite Location and Move with Buttons</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">With your player sprite created, you now need to place the sprite in the correct position on the screen as well as program it to be able to move back and forth. 
<ol>
</ol>

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.21.32_AM_480x480.png?v=1701727691" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.21.32_AM_480x480.png?v=1701727691" />

 

From the Sprites drawer, drag the set mySprite location to x ___y ___  block and place it in your on start just below the set mySprite to ____  block. Make sure you select your player sprite name, and to set the location, click on either the X or Y number to bring up the location tool. Select somewhere at the bottom middle of the screen.

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.23.24_AM_480x480.png?v=1701727737" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.23.24_AM_480x480.png?v=1701727737" />

 

Now, apply controls to your character! Select the move mySprite with buttons block from the Controller drawer and drag it just below the sprite location block. Similar to the tag game, this block does a lot for you, but the main difference is that for this game, you only want the player character to move left and right and not up or down. To change that, click on the plus (+) sign on the block to open up the block details. This shows two velocity settings (vx and vy). Change vy to 0. Now your sprite will only move left and right, which means we’ve essentially turned the up and down movement off! 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.24.19_AM_480x480.png?v=1701727776" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.24.19_AM_480x480.png?v=1701727776" />

 

The final block to add to your program regarding character movement is to keep your character sprite in the window and not run off to infinity! You can simply add a block from the Sprites drawer called set mySprite stay in screen block. This block does what it says and allows you to apply a rule to a sprite to stay in the screen with an on/off option. You want to set it to our character sprite and set the rule to ON. 

Test your game! Your character should be able to move back and forth, but not up and down.
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>4. Create Food Sprite and Code Velocity</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
With your player character dialed in and running back and forth, it is time to make the fruit fall for it to catch!

You need to repeat the process for creating the fruit sprite but in a different way. In your game, the fruit falls at a timed interval from a random location at the top of the screen. So, create multiple sprites, one every 500 milliseconds (half a second) or so. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.31.59_AM_480x480.png?v=1701727837" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.31.59_AM_480x480.png?v=1701727837" /> 
 

Enter the on game update every ___ ms event block. This event block is a timer, and the code inside is executed in increments of whatever time you set it to in milliseconds/seconds. Open the Game drawer and drag the block into your program area. The block’s standard timing is 500 milliseconds (half a second). Click on the drop-down and change it to 1 second!

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.32.37_AM_480x480.png?v=1701727869" />

 

You can now populate the event block with the required blocks to create our fruit sprite with an image of your choice and a player kind called food. This is similar to the player sprite and will be important later on!

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.32.51_AM_480x480.png?v=1701727902" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.32.51_AM_480x480.png?v=1701727902" /> 
 

Now let's learn the magic of creating the random starting location! You will be using the set mySprite location to x___ y___ block as you did with the player sprite, but will be coding the x and y values yourself rather than using the location picker tool. The Y value is easy; it should be something just barely on the screen in the Y direction, and a value of 5 works perfectly. But the X value takes a little more effort!

Use the pick random block to set a random X location for the fruit sprite. The pick random block accepts two values: a minimum and a maximum. This block, each time it is called or used, will produce a random number between those two values. It is recommended setting 10 as your minimum and 140 as your maximum. This way, all fruit will stay on the screen, but still offer a challenge for the player.

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.33.00_AM_480x480.png?v=1701727926" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.33.00_AM_480x480.png?v=1701727926" /> 
 

Finally, you need to make the fruit fall! You can add velocity to the fruit sprite using the set mySprite velocity to vx___ vy ___ block from the Sprites drawer. Drag it in and place it at the bottom of your on game update event block.  This block accepts two values: a velocity in the X direction (vx) and the Y direction (vy). You want to add velocity in the Y direction to simulate the fruit falling! Do this by setting vx to 0 and vy to 50.

Note: You can adjust your vy value as you see fit to make your game easier or more challenging!

 

<img alt="" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.40.16_AM_480x480.png?v=1701728015" />

 

Now, test your game! Your character should be able to move around (side to side), and fruit should start falling from the top of the screen. But, when you go to catch it nothing should happen! Why is that? Well, you haven’t programmed anything to happen yet… Let’s do that now!
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
  
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>5. When Sprites Collide!</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">To collect the fruit with your player, you need to add another event block that will be a foundation for future games you create. This event block is one that is triggered when two sprites overlap or collide!
 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.41.03_AM_480x480.png?v=1701728062" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.41.03_AM_480x480.png?v=1701728062" />

 

Look for the on sprite of kind Player overlaps otherSprite of kind Player event block. This block resides inside the Sprites drawer under Overlaps. Drag it into your program. This block is an event block that executes code when two sprites of the specified kinds overlap!

This event block allows you to check the types or kinds of each sprite and trigger an event when these two types of sprites overlap or cross paths. In this game, we have two types. The first sprite is a Player kind and the second otherSprite sill be set to a Food kind. This event will only trigger when our Player sprite overlaps with a Fruit sprite and not when a Fruit sprite overlaps with another Fruit sprite. 

This event block also has what are called local variables. Local variables are the red sprite block and otherSprite blocks in the block's title. This enables you to work with just the two sprites that are actually colliding rather than all of the fruit sprites at the same time. Why would you want to do that? As an example, you want to destroy the fruit sprite that you overlap with and only that sprite, not all of the fruit in the window. 

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.42.27_AM_480x480.png?v=1701728106" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.42.27_AM_480x480.png?v=1701728106" /> 
 

So, from the Sprites drawer, drag in the destroy otherSprite block and place it inside of your on sprite of kind Player overlaps otherSprite of kind food event block. Now from the title of the event block drag in the red otherSprite block into the Destroy block. When this code is executed, it will only destroy the fruit that overlaps with our player (locally) and not destroy all of the fruit (globally). 

Test your game! You should be able to move back and forth and when you overlap a fruit it should disappear! 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>6. Adding Timer and Scoring</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">The final step towards completing our Fruit Catcher game is to add two things… a time limit and scoring. These things are fairly simple and only require a single block to add that functionality!
 

 <img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.43.35_AM_480x480.png?v=1701728164" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.43.35_AM_480x480.png?v=1701728164" />

 

For setting a time limit for your game, open the Info drawer and drag the start countdown__(s) block into the bottom of your on start event. This will allow you to start a countdown time at the start of the game that then ends the game when it reaches 0. Setting the countdown to 30 seconds feels like a good game length. However, you can change yours to whatever you want!

 

<img alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.44.34_AM_480x480.png?v=1701728193" src="https://cdn.shopify.com/s/files/1/0162/8612/files/Screen_Shot_2023-12-01_at_9.44.34_AM_480x480.png?v=1701728193" /> 
 

Finally, for scoring, we again open the Info drawer and drag the change score by ___ block into the overlap event, under the destroy otherSprite block. This will increase your score by whatever number you insert into this block. We kept it simple and just left it as 1. 

With that, your Fruit Catcher game is complete! Feel free to catch as much fruit as possible, modify the game to make it a little harder, and challenge your friends to catch as much fruit as they can! 

 

<a href="https://makecode.com/_TXiVmWWFJg5b" target="_blank"><img alt="fruit catcher gif" src="https://cdn.shopify.com/s/files/1/0162/8612/files/fruit_catcher_b7516663-20e1-4343-95c1-53151f8c5bb2_1024x1024.gif?v=1701732573" /></a>

 

That is how you program Fruit Catcher in Microsoft MakeCode! For a full reference of what code should look like, you can check out the full game and code in MakeCode<a href="https://makecode.com/_TXiVmWWFJg5b"> here</a>. 

 
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
 
</td>
</tr>
</tbody>
</table>

<table data-mce-fragment="1" width="100%">
<tbody data-mce-fragment="1">
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
<h1>7. Create a Controller and Next Steps</h1>
</td>
</tr>
<tr data-mce-fragment="1">
<td data-mce-fragment="1">
Recommended Makey Makey Controller

There are so many ways that you can incorporate a Makey Makey controller into this game. The one requirement is that it needs the four direction arrows for you to control your character’s movement: up, down, left, and right. A couple of controller options that we recommend are as follows. 

<ol>
<li data-mce-style="font-weight: 400;"><a href="https://makeymakey.com/blogs/how-to-instructions/balance-weight-shifting-ball-controller-as-assistive-technology-by-katie-butzu-and-mark-lyons" target="_blank">Balance Ball Controller</a></li>
<li data-mce-style="font-weight: 400;"><a href="https://makeymakey.com/blogs/how-to-instructions/maker-class-lesson-four-recyclable-tilt-sensors">Tilt Controller</a></li>
<li data-mce-style="font-weight: 400;"><a href="https://makeymakey.com/blogs/how-to-instructions/interactive-drawing-challenge">Drawable Controller</a></li>
</ol>
 

Taking Your Game to the Next Level…

This game is rather simple and can get old quickly. It is designed to be a starting point for you to build from, not a finished product! Try to take the game to the next level and add to it. Change it up and make it your own! Here are some ideas to explore.
 

<ol>
<li data-mce-style="font-weight: 400;">Create different types of fruit that are worth different scores</li>
<li data-mce-style="font-weight: 400;">Create a 2nd player and see who can catch more fruit!</li>
<li data-mce-style="font-weight: 400;">Have the fruit randomly drop at different speeds</li>
</ol>
</td>
</tr>
</tbody>
</table>

Exploring Makey Makey and MakeCode Arcade

Standards Alignment

9 Standards Aligned

Lesson Steps

Getting Started with Microsoft MakeCode Arcade

MakeCode Arcade Lesson One: Coding Sprite Movement with Classic Tag Game

MakeCode Arcade Lesson Two: Collision and Scoring with Fruit Catcher

Unlock 1 more step

MakeCode Arcade Lesson Three: Variables and the Drag Race Challenge

Makey Makey STEM Pack

Ready to bring this lesson to your classroom?