In this chapter you will learn how to manage blocks in the coding area and about programming basics with simple recipes. These recipes can be used to build more advanced programs later with MakeCode. As an example, the recipe displaying numbers can be used to display the results of a formula in a complex program.
3-1. Adding Blocks onto Coding Area
Problem
You want to add blocks onto the coding area from the Toolbox.
Solution
- In the Toolbox, click on any Category and from the submenu, click on the block you want to place on the coding area (Figure 3-1 ).
Figure 3-1.Placing a block on the coding area by clicking on it
- Otherwise, you can drag and drop a block onto the coding area (Figure 3-2 ).
Figure 3-2.Placing a block on the coding area by drag and drop
- After placing the block, you can further move it to any place on the coding area by dragging and dropping (Figure 3-3 ).
Figure 3-3.Moving a block on the code area
How It Works
Basic
Input
Music
Led
Radio
Loops
Logic
Variables
Math
Functions
Arrays
Text
Game
Images
Pins
Serial
Control
3-2. Deleting a Block
Problem
You want to delete a block from the coding area.
Solution
In the coding area, click on the block you want to delete and from the keyboard, press the DELETE key.
- In the coding area, right-click on the block you want to delete. Then, click Delete Block from the shortcut menu (Figure 3-4 ).
Figure 3-4.Deleting a block
How It Works
This will remove the selected block from the coding area. You can undo it by clicking on the Undo button in the bottom right of the window.
3-3. Duplicating a Block
Problem
You want to duplicate a block in the coding area.
Solution
In the coding area, right-click on the block you want to duplicate.
- Click Duplicate from the shortcut menu. You will get a duplicated block (Figure 3-6 ).
Figure 3-6.Duplicating a block
How It Works
This option allows you to quickly duplicate an existing block in the coding area without choosing it again from the Toolbox. Duplicate will create a clone of a selected block.
3-4. Adding a Comment
Problem
You want to add a comment to a block.
Solution
In the coding area, right-click on the block you want to add a comment.
Click Add Comment from the shortcut menu.
In the comment box, type in a comment for the block.
- Click on the hide icon (arrow head) in the top-left corner of the comment box to hide (Figure 3-7 ).
Figure 3-7.Adding a comment
How It Works
Comment boxes are useful to add text note to a block to provide explanatory information, usually about the function of the code. These comment blocks are generally ignored by the compiler.
Deleting a comment
3-5. Displaying Text
Problem
You want to scroll a text message across the display only once.
Solution
In the Toolbox, click on the Basic category.
- Click and drag the show string block over and place it inside of the on start block. (Figure 3-9 ).
Figure 3-9.Displaying text
The show string block contains default text, Hello!. If you want to display a different text, simply click on the text box and type in the new text.
- Your final code should look something like this (Figure 3-10 ).
Figure 3-10.Code listing for display text
How It Works
With MakeCode, you can use the show string block to display any text containing letters, numbers, and punctuation. This is known as a ‘string’ in coding terms. Usually, the text scrolls from left to right. If the string is a single character, then it will be displayed on the screen; otherwise the contents of the string will scroll from left to right (the micro:bit display only fits for single character). The micro:bit display only supports with English letters, numbers, and punctuation. All the valid letters, numbers, and punctuation that can be used to build a string can be found in the ASCII table (from DEC 32 to 126) shown in Appendix A.
Any code in the on start block will run when the micro:bit is powered on or reset after powered on.
JavaScript equivalent of the code
Incompatible Block created by JavaScript
3-6. Displaying Numbers
Problem
You want to scroll a number across the display only once.
Solution
In the Toolbox, click on the Basic category.
Click and drag the show number block over and place it inside of the on start block.
- In the show number block, simply click on the text box and type in the new number (e.g., 1234). Your code should look something like this (Figure 3-13 ).
Figure 3-13.Code listing for display a number
How It Works
The on start block is all your code that will execute at the very beginning of your program and only run once. The show number block accepts digits from 0 to 9. You can build any number with them. It only accepts numbers and digits and doesn’t let you type characters and strings. You can’t type more than one number in the show number block by separating with spaces or punctuation marks. By default, the show number block contains 0. Usually, the numbers scroll from left to right. If the number fits on the display (single digit), it doesn’t scroll.
The example in Figure 3-13 will scroll the number once and then stop if the number is greater than 9. It will not display each number one by one.
3-7. Displaying Text Repeatedly
Problem
You want to display text on micro:bit display, then loop it over and over again.
Solution
In the Toolbox, click on the Basic category.
- Click and drag the show string block over and place it inside of the forever block. Your code should look something like this (Figure 3-14 ).
Figure 3-14.Code listing for display a text
If you want to change the default text, click on the textbox of the show string block and type in the new text.
How It Works
When you want to repeat anything forever on the micro:bit display, the easiest choice is to use the forever block. Simply, it repeats everything placed inside it forever in the background.
3-8. Displaying a Number Repeatedly
Problem
You want to display a number on micro:bit display, then loop it over and over again.
Solution
In the Toolbox, click on the Basic category.
Click and drag the show number block over and place it inside of the forever block.
- In the show number block, click on the text box and type in a number with at least two digits. Your code should look something like this (Figure 3-15 ).
Figure 3-15.Code listing for display a number repeatedly
How It Works
When you want to repeat anything forever on the micro:bit display, the easiest choice is to use the forever block. Simply, it repeats everything placed inside it forever in the background.
3-9. Turning on LEDs
Problem
You want to turn on some or all LEDs on the micro:bit display.
Solution
In the Toolbox, click on the Basic category.
- Click and drag the show leds block over, and place it inside of the on start block (Figure 3-16 ).
Figure 3-16.The show leds block
- In the show leds block , click on the squares that you want to select. Your code should look something like this (Figure 3-17 ).
Figure 3-17.Choosing LEDs on the show leds block
How It Works
The show leds block represents the micro:bit display. Each square in the show leds block corresponds to a physical LED on the micro:bit display. You can click on any square to select the corresponding LED on the micro:bit display to turn on. To turn off an LED, simply click on the selected square again to deselect it.
3-10. Displaying Icons
Problem
You want to display one of the built-in icons on the micro:bit display.
Solution
In the Toolbox, click on the Basic category.
Click and drag the show icon block over and place it inside of the on start block.
- In the show icon block, choose an icon (happy) click from the drop-down list to display on the micro:bit screen (Figure 3-18 ).
Figure 3-18.Choosing an icon
- Your code should look something like this (Figure 3-19 ).
Figure 3-19.Code listing for display an icon
How It Works
Heart
Small heart
Yes
No
Happy
Sad
Confused
Angry
Asleep
Surprised
Silly
Fabulous
Meh
T-shirt
Roller skate
Duck
House
Tortoise
Butterfly
Stick figure
Ghost
Sword
Giraffe
Skull
Umbrella
Snake
Rabbit
Cow
Quarter note
Eight note
Pitchfork
target
triangle
left triangle
chess board
diamond
small diamond
square
small square
scissors
Displaying icons sequentially
3-11. Displaying Arrows
Problem
You want to draw an arrow pointing to south east on the micro:bit display.
Solution
In the Toolbox, click on the Basic category, then click the more tab.
Click and drag the show arrow block over and place it inside of the on start block.
- In the show arrow block, choose south east from the drop-down list. Your code should look something like this (Figure 3-21 ).
Figure 3-21.Code listing for display an arrow
How It Works
North
North East
East
South East
South
South West
West
North West
3-12. Pausing a Program
Problem
You want to pause the execution of a program for several milliseconds that are specified.
Solution
In the Toolbox, click on the Basic category.
Click and drag the show string block over and place it inside of the on start block.
Right-click on the show string block and from the shortcut menu, click Duplicate.
Change the text of the first show string block as Hello.
Change the text of the second show string block as World!
Again, click on the Basic category. Then click and drag the pause block over and place it between the show string blocks.
- In the pause block, click on the drop-down list and choose 2 seconds (Figure 3-22 ).
Figure 3-22.Adding delay using the pause block
How It Works
The pause block accepts the time in milliseconds where 1 second equals 1000 milliseconds. You can provide any value in milliseconds or choose some predefined values from the drop-down list.
3-13. Clearing the Screen
Problem
You want to clear the micro:bit display by turning off all the LEDs.
Solution
In the Toolbox, click on the Basic category.
Click and drag the show string block over and place it inside of the on start block.
In the show string block, click on the text box and type in the letter X.
In the Toolbox, under Basic category, click on …more.
- Click and drag the clear screen block over, and place it inside of the on start block. Your code should look something like this (Figure 3-24 ).
Figure 3-24.Code listing for clearing the screen
How It Works
The clear screen block allows you to turn off all the LEDs in the micro:bit display. You can use it to clear the screen after displaying a text, number, image, icon, or anything.