From 7d91f979e6eddaf1e27e948b9b3d6a00d00b638b Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Mon, 11 Sep 2017 10:49:40 -0700 Subject: [PATCH] converting popular projects into tutorials (#534) --- docs/projects.md | 37 +++--- docs/projects/coin-flipper.md | 103 ++++++++-------- docs/projects/flashing-heart.md | 11 +- docs/projects/love-meter.md | 39 ++---- docs/projects/rock-paper-scissors.md | 176 +++++++++++---------------- docs/projects/smiley-buttons.md | 124 +++---------------- 6 files changed, 179 insertions(+), 311 deletions(-) diff --git a/docs/projects.md b/docs/projects.md index 90f8e29b..0110ebe3 100644 --- a/docs/projects.md +++ b/docs/projects.md @@ -10,27 +10,32 @@ Fun games to build with your @boardname@. [{ "name": "Flashing Heart", "url":"/projects/flashing-heart", - "imageUrl": "/static/mb/projects/a1-display.png" -},{ + "imageUrl": "/static/mb/projects/a1-display.png", + "cardType": "tutorial" +}, { "name": "Smiley Buttons", "url":"/projects/smiley-buttons", - "imageUrl": "/static/mb/projects/a2-buttons.png" -},{ - "name": "Love Meter", - "url":"/projects/love-meter", - "imageUrl":"/static/mb/projects/a3-pins.png" -},{ - "name": "Rock Paper Scissors", - "url":"/projects/rock-paper-scissors", - "imageUrl":"/static/mb/projects/a4-motion.png" -},{ - "name": "Magic Button Trick", - "url":"/projects/magic-button-trick", - "imageUrl":"/static/mb/projects/magic-button-trick.png" + "imageUrl": "/static/mb/projects/a2-buttons.png", + "cardType": "tutorial" }, { "name": "Coin Flipper", "url":"/projects/coin-flipper", - "imageUrl": "/static/mb/projects/coin-flipper.png" + "imageUrl": "/static/mb/projects/coin-flipper.png", + "cardType": "tutorial" +}, { + "name": "Love Meter", + "url":"/projects/love-meter", + "imageUrl":"/static/mb/projects/a3-pins.png", + "cardType": "tutorial" +}, { + "name": "Rock Paper Scissors", + "url":"/projects/rock-paper-scissors", + "imageUrl":"/static/mb/projects/a4-motion.png", + "cardType": "tutorial" +}, { + "name": "Magic Button Trick", + "url":"/projects/magic-button-trick", + "imageUrl":"/static/mb/projects/magic-button-trick.png" }] ``` diff --git a/docs/projects/coin-flipper.md b/docs/projects/coin-flipper.md index d9b320c2..cbd60e66 100644 --- a/docs/projects/coin-flipper.md +++ b/docs/projects/coin-flipper.md @@ -1,4 +1,4 @@ -# The amazing coin flipper +# Coin Flipper ## ~avatar avatar @@ -8,67 +8,66 @@ flipping machine with the @boardname@ to choose for you! ## ~ -Here are the blocks to make your coin flipper. When you press button -`B`, the coin flipper will show either `H` for heads or `T` for tails -on the LED screen. +## Step 1 -```blocks -input.onButtonPressed(Button.B, () => { - if (Math.randomBoolean()) { - basic.showString("H"); - } else { - basic.showString("T"); - } -}); -``` -## ~hint - -The `[Math.randomBoolean()]` block randomly tells the ``if`` -block `true` or `false`. If value picked is `true`, the -``if`` block shows the letter `H`. Otherwise, it shows the letter `T`. - -That's it! - -## ~ - -## Keeping score - -### ~avatar - -To keep track out of how many guesses you've won, -add these blocks to your coin flipper: - -### ~ +Place a ``||input:on button pressed||`` block to run code +when button **A** is pressed. ```blocks input.onButtonPressed(Button.A, () => { - game.addScore(1); -}); -input.onButtonPressed(Button.AB, () => { - basic.showNumber(game.score()); -}); +}) ``` -These blocks mean that if you press button `A`, you will add `1` to -your score, and if you press `A` and `B` together, the @boardname@ will -show your score. +## Step 2 -When you're done, your coin flipping program should look like this: +Place a **if** block and check the value returned by the ``||Math:pick random true or false||`` block. + +``||Math:pick random true or false||`` returns ``true`` or ``false`` randomly. ```blocks -input.onButtonPressed(Button.B, () => { - if (Math.randomBoolean()) { - basic.showString("H"); - } else { - basic.showString("T"); - } -}); input.onButtonPressed(Button.A, () => { - game.addScore(1); -}); -input.onButtonPressed(Button.AB, () => { - basic.showNumber(game.score()); + if (Math.randomBoolean()) { + } else { + } }); ``` -Flip until your thumbs get tired! +## Step 3 + +Place a ``||basic:show icon||`` block under the **if** and pick one of the images. + +```blocks +input.onButtonPressed(Button.A, () => { + if (Math.randomBoolean()) { + basic.showIcon(IconNames.Skull) + } else { + basic.showIcon(IconNames.Square) + } +}); +``` + +## Step 4 + +Click ``|Download|`` to transfer your code in your @boardname@ and press button **A** to try it out. + +## Step 5 + +Place multiple ``||basic:show icon||`` blocks before the **if** to create a coin flipping animation. + +```blocks +input.onButtonPressed(Button.A, () => { + basic.showIcon(IconNames.Diamond) + basic.showIcon(IconNames.SmallDiamond) + basic.showIcon(IconNames.Diamond) + basic.showIcon(IconNames.SmallDiamond) + if (Math.randomBoolean()) { + basic.showIcon(IconNames.Skull) + } else { + basic.showIcon(IconNames.Square) + } +}) +``` + +## Step 6 + +Click ``|Download|`` to transfer your code in your @boardname@ and press button **A** to try it out! diff --git a/docs/projects/flashing-heart.md b/docs/projects/flashing-heart.md index c6429822..175a09b9 100644 --- a/docs/projects/flashing-heart.md +++ b/docs/projects/flashing-heart.md @@ -2,9 +2,10 @@ ## Step 1 -Place the ``||basic:show leds||`` block and paint a heart. +Place the ``||basic:show leds||`` block in the ``||basic:on start||`` block +and draw a heart. -```block +```blocks basic.showLeds(` . # . # . # # # # # @@ -22,7 +23,7 @@ Click ``|Download|`` to transfer your code in your @boardname@! Place another ``||basic:show leds||`` block under the heart to make it blink. -```block +```blocks basic.showLeds(` . # . # . # # # # # @@ -39,7 +40,7 @@ basic.showLeds(` ## Step 4 -Place the blocks inside the ``||basic:forever||`` +Move the blocks inside the ``||basic:forever||`` to repeat the animation. ```block @@ -68,7 +69,7 @@ Click ``|Download|`` to transfer your code in your @boardname@! Place more ``||basic:show leds||`` blocks to create your own animation. -```block +```blocks basic.forever(() => { basic.showLeds(` . # . # . diff --git a/docs/projects/love-meter.md b/docs/projects/love-meter.md index ef9ddd21..7d73ff6b 100644 --- a/docs/projects/love-meter.md +++ b/docs/projects/love-meter.md @@ -1,52 +1,37 @@ # love meter -## ~avatar avatar - -Use pins and your body to change the display! - -## ~ ## Step 1 -Use [on pin pressed](/reference/input/on-pin-pressed) to show a random number -when pin P0 is pressed (hold the GND pin with other hand): +Let's build a **LOVE METER** machine. Place a ``||input:on pin pressed||`` block to run code +when pin ``P0`` is pressed. ```blocks input.onPinPressed(TouchPin.P0, () => { - basic.showNumber(Math.random(11)); }); ``` ## Step 2 -Show a string when pin P1 is pressed: +Using ``||basic:show number||`` and ``||Math:pick random||`` blocks, +show a random number from 0 to 100 when pin ``P0`` is pressed. ```blocks input.onPinPressed(TouchPin.P0, () => { - basic.showNumber(Math.random(11)); -}); -input.onPinPressed(TouchPin.P1, () => { - basic.showString("LOVE?"); + basic.showNumber(Math.random(101)); }); ``` ## Step 3 -Show a heart when pin P2 is pressed: +Show ``"LOVE METER"`` on the screen when the @boardname@ starts. ```blocks +basic.showString("LOVE METER"); input.onPinPressed(TouchPin.P0, () => { - basic.showNumber(Math.random(11)); -}); -input.onPinPressed(TouchPin.P1, () => { - basic.showString("LOVE?"); -}); -input.onPinPressed(TouchPin.P2, () => { - basic.showLeds(` - . # # # . - # # # # # - # # # # # - . # # # . - . . # . . - `); + basic.showNumber(Math.random(101)); }); ``` + +## Step 4 + +Click ``|Download|`` to transfer your code in your @boardname@. Hold the ``GND`` pin with other hand and press pin ``P0`` with the other hand to trigger this code. diff --git a/docs/projects/rock-paper-scissors.md b/docs/projects/rock-paper-scissors.md index cf1d9378..79aeba3e 100644 --- a/docs/projects/rock-paper-scissors.md +++ b/docs/projects/rock-paper-scissors.md @@ -1,15 +1,9 @@ -# rock paper scissors +# Rock Paper Scissors -## ~avatar avatar - -Build a rock paper scissors game! - -## ~ - -## Step 1: Getting started +## Step 1 We want the @boardname@ to choose rock, paper, or scissors when you shake it. -Try creating an ``on shake`` block so when you shake the @boardname@, it will run part of a program. +Place a ``||input:on shake||`` block so when you shake the @boardname@, it will run part of a program. ```blocks input.onGesture(Gesture.Shake, () => { @@ -17,66 +11,47 @@ input.onGesture(Gesture.Shake, () => { }) ``` -Next, when you shake the @boardname@, it should pick a random number from `0` to `2` +## Step 2 + +Add a ``weapon`` 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 `weapon`. (This variable is named `weapon` because rock, paper, and scissors are the weapons you use to battle your friends!) -Add a ``set`` block with a variable. Then add a ``pick random`` block, -and store the random number in the variable, -like this: - ```blocks +let weapon = 0; input.onGesture(Gesture.Shake, () => { - let weapon = Math.random(3) + weapon = Math.random(3) }) ``` -## ~hint -No one can predict random numbers. That's what makes them great for Rock Paper Scissors! -## ~ - Each possible number these blocks can make (`0`, `1`, or `2`) means a different picture. We will show the right picture for that number on the LED screen. -## Step 2: Picking paper +## Step 3 -Put an ``if`` block after the ``let`` block that checks whether -`weapon` is `0`. Make sure the ``if`` block has an ``else if`` part -and an ``else`` part. - -Next, add a ``show leds`` block that shows a -picture of a piece of paper: +Place an ``if`` block under the ``||math:pick random||`` and +check whether ``weapon`` is equal to ``0``. ```blocks +let weapon = 0; input.onGesture(Gesture.Shake, () => { let weapon = Math.random(3) if (weapon == 0) { - basic.showLeds(` - # # # # # - # . . . # - # . . . # - # . . . # - # # # # # - `) - } else if (false) { - - } else { - } }) ``` -## Step 3: A random rock +## Step 4 -Now we are going to add a new picture for the @boardname@ to show -when another random number comes up. - -Make the ``else if`` part check if the variable `weapon` is `1`. -Then add a ``show leds`` block with a picture of a rock. +In the ``if`` block, place a ``||basic:show leds||`` block that shows a +picture of a piece of paper. ```blocks +let weapon = 0; input.onGesture(Gesture.Shake, () => { let weapon = Math.random(3) if (weapon == 0) { @@ -87,7 +62,50 @@ input.onGesture(Gesture.Shake, () => { # . . . # # # # # # `) + } +}) +``` +## Step 5 + +Add an ``else if`` block to the ``if`` block and check whether ``weapon`` +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 weapon = 0; +input.onGesture(Gesture.Shake, () => { + let weapon = Math.random(3) + if (weapon == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } else if (weapon == 1) { + } +}) +``` + +## Step 6 + +Place a ``||basic:show leds||`` block under the else if and draw a **rock** image on the screen. + +```blocks +let weapon = 0; +input.onGesture(Gesture.Shake, () => { + let weapon = Math.random(3) + if (weapon == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) } else if (weapon == 1) { basic.showLeds(` . . . . . @@ -96,17 +114,19 @@ input.onGesture(Gesture.Shake, () => { . # # # . . . . . . `) - } else { - } }) ``` -## Step 4: Suddenly scissors +## Step 7 -Add a ``show leds`` block with a picture of scissors to the ``else`` part: +Add a ``||basic:show leds||`` block with a picture of scissors to the ``else`` part. + +You don't need to check if `weapon` 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 weapon = 0; input.onGesture(Gesture.Shake, () => { let weapon = Math.random(3) if (weapon == 0) { @@ -117,7 +137,6 @@ input.onGesture(Gesture.Shake, () => { # . . . # # # # # # `) - } else if (weapon == 1) { basic.showLeds(` . . . . . @@ -139,63 +158,6 @@ input.onGesture(Gesture.Shake, () => { ``` -## ~hint - -You don't need to check if `weapon` 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``. - -## ~ - -Your game is ready! Have fun! - -## Step 5: Are you the greatest? - -Here is a way you can make your Rock Paper Scissors game better. -When button ``A`` is pressed, -the @boardname@ will add `1` to your score. - -Open the ``Game`` drawer, and then add the block ``change score by 1`` to your program, -like this: - -```blocks -input.onButtonPressed(Button.A, () => { - game.addScore(1) -}) - -``` - -## Step 6: Prove you're the greatest! - -After your @boardname@ can add `1` to the score, show how many wins you have. Remember to add a pause after addScore so text will display. - -```blocks -input.onButtonPressed(Button.A, () => { - game.addScore(1) - basic.pause(1) - basic.showString("WINS:") - basic.showNumber(game.score()) -}) -``` -## Step 7: Staying honest - -Success! Your @boardname@ can track wins! -But what about losses? -Use the ``Game`` drawer to subtract `1` from your score when you press button `B`. -Change `WINS` to `SCORE` in step 6. - -Here are all the blocks you will need: - -```shuffle -input.onButtonPressed(Button.B, () => { - game.addScore(-1) - basic.pause(1) - basic.showString("SCORE:") - basic.showNumber(game.score()) -}) -``` - -## Step 8: Hacking Rock Paper Scissors - -How else can you make your game better? -Ever hear of [Rock Paper Scissors Spock Lizard](http://www.samkass.com/theories/RPSSL.html)? +## Step 8 +Your game is ready! Gather your friends and play Rock Paper Scissors! \ No newline at end of file diff --git a/docs/projects/smiley-buttons.md b/docs/projects/smiley-buttons.md index fe657a77..04322989 100644 --- a/docs/projects/smiley-buttons.md +++ b/docs/projects/smiley-buttons.md @@ -1,29 +1,18 @@ -# smiley buttons - -## ~avatar - -Use buttons to show a smiley face! - -## ~ +# Smiley Buttons ## Step 1 -Use [show leds](/reference/basic/show-leds) to make a smiley face: +Place a ``||input:on button pressed||`` block to run code when button **A** is pressed. ```blocks -basic.showLeds(` - # # . # # - # # . # # - . . . . . - # . . . # - . # # # .` - ); +input.onButtonPressed(Button.A, () => { +}); ``` ## Step 2 -Add an input block for when [button A is pressed](/reference/input/button-is-pressed), -and **move** the smiley face inside it: +Place a ``||basic:show leds||`` block inside ``||input:on button pressed||`` +to display a smiley on the screen. ```blocks input.onButtonPressed(Button.A, () => { @@ -37,23 +26,16 @@ input.onButtonPressed(Button.A, () => { }); ``` -Try pressing button A! - ## Step 3 -Add blocks so that when [button B is pressed](/reference/input/on-button-pressed), -a frowney appears: +Click ``|Download|`` to transfer your code in your @boardname@ and try pressing button **A**. + +## Step 4 + +Add ``||input:on button pressed||`` and ``||basic:show leds||`` blocks to +display a frowney when button **B** is pressed. ```blocks -input.onButtonPressed(Button.A, () => { - basic.showLeds(` - # # . # # - # # . # # - . . . . . - # . . . # - . # # # .` - ); -}); input.onButtonPressed(Button.B, () => { basic.showLeds(` # # . # # @@ -65,43 +47,17 @@ input.onButtonPressed(Button.B, () => { }); ``` -Try pressing ``A`` or ``B``! +## Step 5 -## Step 4 +Click ``|Download|`` to transfer your code in your @boardname@ and try pressing button A or B. -You can also have a secret mode where ``A`` and ``B`` are pressed together. +## Step 6 + +Add a secret mode where ``A`` and ``B`` are pressed together. In that case, add multiple ``||basic:show leds||`` blocks to create an animation... ```blocks input.onButtonPressed(Button.AB, () => { - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # . . . # - . # # # . - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # # # # # - . . . . . - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - . # # # . - # . . . # - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # # # # # - . . . # # - `) basic.showLeds(` . . . . . # . # . . @@ -119,48 +75,8 @@ input.onButtonPressed(Button.AB, () => { }) ``` -## Send your smileys over radio +## Step 7 -Do you have a second @boardname@ at hand? You could use radio and send your smileys or frownies to other -@boardname@. +Click ``|Download|`` to transfer your code in your @boardname@ +and show it off to your friends! -Since radio can send numbers, we decide that ``0`` is the code for displaying a smiley -and ``1`` is the code for a frowney. - -Change your code as follows: -* [radio send number](/reference/radio/send-number) sends a number -to any other @boardname@ in range -* [radio on data packet received](/reference/radio/on-data-packet-received) runs code -when data is received over radio - -```blocks -input.onButtonPressed(Button.A, () => { - radio.sendNumber(0) -}) -input.onButtonPressed(Button.B, () => { - radio.sendNumber(1) -}) -radio.onDataPacketReceived(({receivedNumber}) => { - if (receivedNumber == 0) { - basic.showLeds(` - # # . # # - # # . # # - . . . . . - # . . . # - . # # # . - `) - } else { - basic.showLeds(` - # # . # # - # # . # # - . . . . . - . # # # . - # . . . # - `) - } -}) -``` - -```package -radio -```