From 34a4b42d2879d190dfd7913871ce50fffcd02a3b Mon Sep 17 00:00:00 2001 From: Galen Nickel Date: Wed, 29 Nov 2017 15:26:23 -0800 Subject: [PATCH] Make some projects for 'hour of code' (#575) * Make some projects for * remove HOC --- docs/tutorials/hour-of-code/hey-microbit.md | 149 ++++++++++++++++ .../hour-of-code/rock-paper-scissors.md | 160 ++++++++++++++++++ 2 files changed, 309 insertions(+) create mode 100644 docs/tutorials/hour-of-code/hey-microbit.md create mode 100644 docs/tutorials/hour-of-code/rock-paper-scissors.md diff --git a/docs/tutorials/hour-of-code/hey-microbit.md b/docs/tutorials/hour-of-code/hey-microbit.md new file mode 100644 index 00000000..f8057e71 --- /dev/null +++ b/docs/tutorials/hour-of-code/hey-microbit.md @@ -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. + diff --git a/docs/tutorials/hour-of-code/rock-paper-scissors.md b/docs/tutorials/hour-of-code/rock-paper-scissors.md new file mode 100644 index 00000000..2c188289 --- /dev/null +++ b/docs/tutorials/hour-of-code/rock-paper-scissors.md @@ -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! \ No newline at end of file