Make some projects for 'hour of code' (#575)
* Make some projects for * remove HOC
This commit is contained in:
		
				
					committed by
					
						
						Sam El-Husseini
					
				
			
			
				
	
			
			
			
						parent
						
							350a98b429
						
					
				
				
					commit
					34a4b42d28
				
			
							
								
								
									
										149
									
								
								docs/tutorials/hour-of-code/hey-microbit.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										149
									
								
								docs/tutorials/hour-of-code/hey-microbit.md
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,149 @@
 | 
			
		||||
# Hey, @boardname@!
 | 
			
		||||
 | 
			
		||||
## Step 1
 | 
			
		||||
 | 
			
		||||
Welcome, let's code the @boardname@! Place the ``||basic:show string||`` block in the ``||basic:on start||`` slot. Change the ``"Hello"`` text to be your name instead. Did you see it scroll in the simulator?.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
basic.showString("My Name")
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 2
 | 
			
		||||
 | 
			
		||||
Well, you noticed that the text stopped. Place the ``||basic:show string||`` block in an ``||input:on button pressed||`` block to scroll your name whenever button **A** is pressed.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onButtonPressed(Button.A, () => {
 | 
			
		||||
    basic.showString("My Name")
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 3
 | 
			
		||||
 | 
			
		||||
Ok, let's try to talk to the @boardname@ using a button. Change the text in ``||basic:show string||`` to ask the question "How are you?". Add another ``||basic:show string||`` with "....." to show that the @boardname@ is thinking.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onButtonPressed(Button.A, () => {
 | 
			
		||||
    basic.showString("How are you?")
 | 
			
		||||
    basic.showString(".....");
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 4
 | 
			
		||||
 | 
			
		||||
Now, make the @boardname@ give an answer with a smiley face! Find the ``||basic:show leds||`` and draw a smiley face on the block by clicking on the LEDs. Press button **A** in the simulator and see the @boardname@ respond to your question.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onButtonPressed(Button.A, () => {
 | 
			
		||||
    basic.showString("How are you?")
 | 
			
		||||
    basic.showString(".....");
 | 
			
		||||
    basic.showLeds(`
 | 
			
		||||
    # # . # #
 | 
			
		||||
    # # . # #
 | 
			
		||||
    . . . . .
 | 
			
		||||
    # . . . #
 | 
			
		||||
    . # # # .
 | 
			
		||||
    `)
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 5
 | 
			
		||||
 | 
			
		||||
OK, let's ask @boardname@ how it's feeling just now, but by a different method. We can use the shake gesture to ask the question. Go get an ``||input:on shake||`` block. Go grab your ``||basic:show leds||`` block from before and and put it in the ``||input:on shake||``.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    basic.showLeds(`
 | 
			
		||||
    # # . # #
 | 
			
		||||
    # # . # #
 | 
			
		||||
    . . . . .
 | 
			
		||||
    # . . . #
 | 
			
		||||
    . # # # .
 | 
			
		||||
    `)
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 
 | 
			
		||||
## Step 6
 | 
			
		||||
 | 
			
		||||
We want the @boardname@ to change how it feels at different times. It will have two moods, happy and sad. Go to **Logic** and get an ``||logic:if then else||``. Put it in the ``||input:on shake||`` and move the ``||basic:show leds||`` into the ``||logic:if then||`` slot.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    if (true) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # . # #
 | 
			
		||||
            # # . # #
 | 
			
		||||
            . . . . .
 | 
			
		||||
            # . . . #
 | 
			
		||||
            . # # # .
 | 
			
		||||
            `)
 | 
			
		||||
    } else {
 | 
			
		||||
    	
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 7
 | 
			
		||||
 | 
			
		||||
Duplicate the ``||basic:show leds||`` block (right-click, then choose Duplicate). Put the new one into the ``||logic:else||`` part of the ``||logic:if then else||``. This time, turn that one into a frowny face.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    if (true) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # . # #
 | 
			
		||||
            # # . # #
 | 
			
		||||
            . . . . .
 | 
			
		||||
            # . . . #
 | 
			
		||||
            . # # # .
 | 
			
		||||
            `)
 | 
			
		||||
    } else {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # . # #
 | 
			
		||||
            # # . # #
 | 
			
		||||
            . . . . .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            # . . . #
 | 
			
		||||
            `)
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 8
 | 
			
		||||
 | 
			
		||||
Test it's mood by changing the condition in the ``||logic:if||`` from `true` to `false` and then click the **SHAKE** spot in the simulator.
 | 
			
		||||
 | 
			
		||||
## Step 9
 | 
			
		||||
 | 
			
		||||
So, to make the @boardname@ more fickle, let's give it a random mood. Find the ``||math:pick random true or false||`` block in **Math**. Pull it out and use it in the ``||logic:if||`` condition instead of the `true` value.
 | 
			
		||||
 | 
			
		||||
```block
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    if (Math.randomBoolean()) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # . # #
 | 
			
		||||
            # # . # #
 | 
			
		||||
            . . . . .
 | 
			
		||||
            # . . . #
 | 
			
		||||
            . # # # .
 | 
			
		||||
            `)
 | 
			
		||||
    } else {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # . # #
 | 
			
		||||
            # # . # #
 | 
			
		||||
            . . . . .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            # . . . #
 | 
			
		||||
            `)
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 10
 | 
			
		||||
 | 
			
		||||
Now, click the **SHAKE** spot a few times to see how the @boardname@ is feeling. Hmm, it's mood is different sometimes!
 | 
			
		||||
 | 
			
		||||
## Step 11
 | 
			
		||||
 | 
			
		||||
Awesome job! You've completed your Microsoft MakeCode activity. If you have a @boardname@ to use, click the `|Download|` button and try your code on the board.
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										160
									
								
								docs/tutorials/hour-of-code/rock-paper-scissors.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										160
									
								
								docs/tutorials/hour-of-code/rock-paper-scissors.md
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,160 @@
 | 
			
		||||
# Rock Paper Scissors
 | 
			
		||||
 | 
			
		||||
## Step 1
 | 
			
		||||
 | 
			
		||||
We want the @boardname@ to choose rock, paper, or scissors when you shake it.
 | 
			
		||||
Place a ``||input:on shake||`` block so when you shake the @boardname@, it will run part of a program.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 2
 | 
			
		||||
 | 
			
		||||
Add a ``tool`` variable to store a random number computed with ``||math:pick random||``.
 | 
			
		||||
 | 
			
		||||
When you shake the @boardname@, it should pick a random number from `0` to `2`
 | 
			
		||||
and store it in the variable `tool`. (This variable is named `tool` because 
 | 
			
		||||
rock, paper, and scissors are the tools you use to challenge your friends!)
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
let tool = 0;
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    tool = Math.random(3)
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
In a later step, each of the possible numbers (`0`, `1`, or `2`) is matched to its own picture. The picture is shown on the LEDs when its number is picked.
 | 
			
		||||
 | 
			
		||||
## Step 3
 | 
			
		||||
 | 
			
		||||
Place an ``if`` block under the ``||math:pick random||`` and
 | 
			
		||||
check whether ``tool`` is equal to ``0``.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
let tool = 0;
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    let tool = Math.random(3)
 | 
			
		||||
    if (tool == 0) {
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 4
 | 
			
		||||
 | 
			
		||||
In the ``if`` block, place a ``||basic:show leds||`` block that shows a
 | 
			
		||||
picture of a piece of paper.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
let tool = 0;
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    let tool = Math.random(3)
 | 
			
		||||
    if (tool == 0) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # # # #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # # # # #
 | 
			
		||||
            `)
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 5
 | 
			
		||||
 | 
			
		||||
Add an ``else if`` block to the ``if`` block and check whether ``tool``
 | 
			
		||||
is equal to ``1``.
 | 
			
		||||
 | 
			
		||||
Click on the gearwheel icon to open up the ``if`` editor; then drag and drop an ``else if`` block in the ``if`` editor.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
let tool = 0;
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    let tool = Math.random(3)
 | 
			
		||||
    if (tool == 0) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # # # #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # # # # #
 | 
			
		||||
            `)
 | 
			
		||||
    } else if (tool == 1) {
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 6
 | 
			
		||||
 | 
			
		||||
Place a ``||basic:show leds||`` block under the else if and draw a **rock** image on the screen.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
let tool = 0;
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    let tool = Math.random(3)
 | 
			
		||||
    if (tool == 0) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # # # #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # # # # #
 | 
			
		||||
            `)
 | 
			
		||||
    } else if (tool == 1) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            . . . . .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            . . . . .
 | 
			
		||||
            `)
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 7
 | 
			
		||||
 | 
			
		||||
Add a ``||basic:show leds||`` block with a picture of scissors to the ``else`` part.
 | 
			
		||||
 | 
			
		||||
You don't need to check if `tool` is `2` because `2` is the only number left out of `0`, `1`, and `2`.
 | 
			
		||||
That's why you can use an ``else`` instead of an ``else if``.
 | 
			
		||||
 | 
			
		||||
```blocks
 | 
			
		||||
let tool = 0;
 | 
			
		||||
input.onGesture(Gesture.Shake, () => {
 | 
			
		||||
    let tool = Math.random(3)
 | 
			
		||||
    if (tool == 0) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # # # #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # . . . #
 | 
			
		||||
            # # # # #
 | 
			
		||||
            `)
 | 
			
		||||
    } else if (tool == 1) {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            . . . . .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            . # # # .
 | 
			
		||||
            . . . . .
 | 
			
		||||
            `)
 | 
			
		||||
    } else {
 | 
			
		||||
        basic.showLeds(`
 | 
			
		||||
            # # . . #
 | 
			
		||||
            # # . # .
 | 
			
		||||
            . . # . .
 | 
			
		||||
            # # . # .
 | 
			
		||||
            # # . . #
 | 
			
		||||
            `)
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Step 8
 | 
			
		||||
 | 
			
		||||
Your game is ready! Gather your friends and play Rock Paper Scissors!
 | 
			
		||||
		Reference in New Issue
	
	Block a user