diff --git a/docs/projects/rock-paper-scissors/make.md b/docs/projects/duct-tape-watch.md similarity index 68% rename from docs/projects/rock-paper-scissors/make.md rename to docs/projects/duct-tape-watch.md index 277370da..4181e0f1 100644 --- a/docs/projects/rock-paper-scissors/make.md +++ b/docs/projects/duct-tape-watch.md @@ -1,4 +1,6 @@ -# Make +# Duct Tape Watch + +![Rock Paper Scissors game on wrist](/static/mb/projects/duct-tape-watch.jpg) ## Materials @@ -12,13 +14,13 @@ Cut 2 Pieces of Duct Tape about 9-10 inches long. Press the sticky sides together to form one piece of tape (this is tricky!). This makes the band of your wrist cuff. -![Cut and roll the tape](/static/mb/projects/rock-paper-scissors/cut-roll-tape.jpg) +![Cut and roll the tape](/static/mb/projects/duct-tape-watch/cut-roll-tape.jpg) ### Step 2 - Attach the micro:bit and battery pack Mount the micro:bit in the center of your wrist cuff band by looping a piece of duct tape around in a circle. -![Attach a micro:bit](/static/mb/projects/rock-paper-scissors/attach-mb.jpg) +![Attach a micro:bit](/static/mb/projects/duct-tape-watch/attach-mb.jpg) Attach the battery pack to the micro:bit and tape it on the wrist cuff band on the opposite side from the micro:bit. @@ -26,14 +28,10 @@ Attach the battery pack to the micro:bit and tape it on the wrist cuff band on t Attach Velcro tabs at the ends of the wrist cuff as fasteners. You may need to try it on your wrist to adjust the size. -![Add wrist fasteners](/static/mb/projects/rock-paper-scissors/wrist-fastener.jpg) +![Add wrist fasteners](/static/mb/projects/duct-tape-watch/wrist-fastener.jpg) ### Step 4 - Decorate it! Decorate the wrist cuff with stickers, glitter, markers, etc. -![Rock Paper Scissors game on wrist](/static/mb/projects/rock-paper-scissors.jpg) - -## ~button /projects/rock-paper-scissors/code -NEXT: Code the game! -## ~ +![Rock Paper Scissors game on wrist](/static/mb/projects/duct-tape-watch.jpg) diff --git a/docs/projects/fashion.md b/docs/projects/fashion.md index d6622ab5..1cebb38f 100644 --- a/docs/projects/fashion.md +++ b/docs/projects/fashion.md @@ -25,6 +25,11 @@ "url": "/projects/step-counter", "imageUrl":"/static/mb/projects/step-counter.png", "cardType": "side" +}, { + "name": "Duct Tape Watch", + "description": "Build a watch from duct tape", + "url": "/projects/duct-tape-watch", + "imageUrl": "/static/mb/projects/rock-paper-scissors.jpg" }] ``` diff --git a/docs/projects/games.md b/docs/projects/games.md index ca59286c..d98f7faf 100644 --- a/docs/projects/games.md +++ b/docs/projects/games.md @@ -11,7 +11,8 @@ Fun games to build with your @boardname@. "name": "Rock Paper Scissors", "url":"/projects/rock-paper-scissors", "description": "Make the Rock-Paper-Scissors game on your micro:bit and challenge your friends.", - "imageUrl":"/static/mb/projects/a4-motion.png" + "imageUrl":"/static/mb/projects/a4-motion.png", + "cardType": "tutorial" }, { "name": "Coin Flipper", "url":"/projects/coin-flipper", diff --git a/docs/projects/rock-paper-scissors.md b/docs/projects/rock-paper-scissors.md index c2834d5a..60d87ba4 100644 --- a/docs/projects/rock-paper-scissors.md +++ b/docs/projects/rock-paper-scissors.md @@ -1,28 +1,157 @@ -# Rock - Paper - Scissors +# Rock Paper Scissors -## @description A beginner maker activity, creating the Rock-Paper-Scissors game. +## Introduction @unplugged -## ~avatar +![Cartoon of the Rock Paper Scissors game](/static/mb/projects/a4-motion.png) -Make the Rock-Paper-Scissors game on your @boardname@ and challenge your friends. +Use the accelerometer and the screen to build a **Play Rock Paper Scissors** +that you can play with your friends! -## ~ +## Step 1 @fullscreen -![Rock Paper Scissors game on wrist](/static/mb/projects/rock-paper-scissors.jpg) +Add a ``||input:on shake||`` block to run code when when you shake the @boardname@. -## Duration: ~20 minutes. +```blocks +input.onGesture(Gesture.Shake, () => { + +}) +``` -## Materials +## Step 2 @fullscreen -* @boardname@, battery holder and 2 AAA batteries -* Roll of duct tape (maybe 2 rolls if you want another color) -* Velcro +Add a ``tool`` variable to store a random number computed with ``||math:pick random||``. -## Activities +When you shake the @boardname@, it should pick a random number from `0` to `2` +and store it in the variable `tool`. -* [Make](/projects/rock-paper-scissors/make) -* [Code](/projects/rock-paper-scissors/code) +```blocks +let tool = 0; +input.onGesture(Gesture.Shake, () => { + tool = Math.randomRange(0, 2) +}) -## ~button /projects/rock-paper-scissors/make -Let's get started! -## ~ +``` + +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 @fullscreen + +Place an ``if`` block under the ``||math:pick random||`` and +check whether ``tool`` is equal to ``0``. + +Add a ``||basic:show leds||`` block that shows a +picture of a piece of paper. + +```blocks +let tool = 0; +input.onGesture(Gesture.Shake, () => { + tool = Math.randomRange(0, 3) + if (tool == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } +}) +``` + +## Step 4 @fullscreen + +Click on the **SHAKE** button in the simulator. If you try enough times, you should see +the paper drawing. + +![Shaking a @boardname@ simulator](/static/mb/projects/rock-paper-scissors/rpsshake.gif) + +## Step 5 @fullscreen + +Click the ``+`` button to add an ``else`` section. + +![Adding an else clause](/static/mb/projects/rock-paper-scissors/ifelse.gif) + +## Step 6 @fullscreen + +Add a ``||basic:show leds||`` block that shows a scissor. + +```blocks +let tool = 0; +input.onGesture(Gesture.Shake, () => { + tool = Math.randomRange(0, 3) + if (tool == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } else { + basic.showLeds(` + # # . . # + # # . # . + . . # . . + # # . # . + # # . . # + `) + } +}) +``` + +## Step 7 @fullscreen + +Click the ``+`` button to add an ``else if`` section. +Since ``tool`` can only be ``0``, ``1`` or ``2``, your code is covering all possible cases! + +![Adding an else if clause](/static/mb/projects/rock-paper-scissors/ifelseif.gif) + +## Step 8 @fullscreen + +Add a ``||basic:show leds||`` block with a picture of scissors to the ``else`` part. + +```blocks +let tool = 0; +input.onGesture(Gesture.Shake, () => { + tool = Math.randomRange(0, 3) + if (tool == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } else if (tool == 1) { + basic.showLeds(` + . . . . . + . # # # . + . # # # . + . # # # . + . . . . . + `) + } else { + basic.showLeds(` + # # . . # + # # . # . + . . # . . + # # . # . + # # . . # + `) + } +}) + +``` + +## Step 9 @fullscreen + +Click on the **SHAKE** button in the simulator and check each image is showing up. + +![Shaking a @boardname@ simulator](/static/mb/projects/rock-paper-scissors/rpssim3.gif) + +## Step 10 @fullscreen + +If you have a @boardname@, click on ``|Download|`` and follow the instruction to get the code +onto your @boardname@. Your game is ready! Gather your friends and play Rock Paper Scissors! + +![A @boardname@ in a hand](/static/mb/projects/rock-paper-scissors/hand.jpg) \ No newline at end of file diff --git a/docs/projects/rock-paper-scissors/code.md b/docs/projects/rock-paper-scissors/code.md deleted file mode 100644 index dbeeb292..00000000 --- a/docs/projects/rock-paper-scissors/code.md +++ /dev/null @@ -1,161 +0,0 @@ -# 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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 diff --git a/docs/static/mb/projects/rock-paper-scissors.jpg b/docs/static/mb/projects/duct-tape-watch.jpg similarity index 100% rename from docs/static/mb/projects/rock-paper-scissors.jpg rename to docs/static/mb/projects/duct-tape-watch.jpg diff --git a/docs/static/mb/projects/rock-paper-scissors/attach-mb.jpg b/docs/static/mb/projects/duct-tape-watch/attach-mb.jpg similarity index 100% rename from docs/static/mb/projects/rock-paper-scissors/attach-mb.jpg rename to docs/static/mb/projects/duct-tape-watch/attach-mb.jpg diff --git a/docs/static/mb/projects/rock-paper-scissors/cut-roll-tape.jpg b/docs/static/mb/projects/duct-tape-watch/cut-roll-tape.jpg similarity index 100% rename from docs/static/mb/projects/rock-paper-scissors/cut-roll-tape.jpg rename to docs/static/mb/projects/duct-tape-watch/cut-roll-tape.jpg diff --git a/docs/static/mb/projects/duct-tape-watch/rpsshake.gif b/docs/static/mb/projects/duct-tape-watch/rpsshake.gif new file mode 100644 index 00000000..d7328ac4 Binary files /dev/null and b/docs/static/mb/projects/duct-tape-watch/rpsshake.gif differ diff --git a/docs/static/mb/projects/rock-paper-scissors/wrist-fastener.jpg b/docs/static/mb/projects/duct-tape-watch/wrist-fastener.jpg similarity index 100% rename from docs/static/mb/projects/rock-paper-scissors/wrist-fastener.jpg rename to docs/static/mb/projects/duct-tape-watch/wrist-fastener.jpg diff --git a/docs/static/mb/projects/rock-paper-scissors/hand.jpg b/docs/static/mb/projects/rock-paper-scissors/hand.jpg new file mode 100644 index 00000000..09457370 Binary files /dev/null and b/docs/static/mb/projects/rock-paper-scissors/hand.jpg differ diff --git a/docs/static/mb/projects/rock-paper-scissors/ifelse.gif b/docs/static/mb/projects/rock-paper-scissors/ifelse.gif new file mode 100644 index 00000000..3654d16d Binary files /dev/null and b/docs/static/mb/projects/rock-paper-scissors/ifelse.gif differ diff --git a/docs/static/mb/projects/rock-paper-scissors/ifelseif.gif b/docs/static/mb/projects/rock-paper-scissors/ifelseif.gif new file mode 100644 index 00000000..bc4d8ce8 Binary files /dev/null and b/docs/static/mb/projects/rock-paper-scissors/ifelseif.gif differ diff --git a/docs/static/mb/projects/rock-paper-scissors/rpsshake.gif b/docs/static/mb/projects/rock-paper-scissors/rpsshake.gif new file mode 100644 index 00000000..d7328ac4 Binary files /dev/null and b/docs/static/mb/projects/rock-paper-scissors/rpsshake.gif differ diff --git a/docs/static/mb/projects/rock-paper-scissors/rpssim3.gif b/docs/static/mb/projects/rock-paper-scissors/rpssim3.gif new file mode 100644 index 00000000..8c83c5c1 Binary files /dev/null and b/docs/static/mb/projects/rock-paper-scissors/rpssim3.gif differ diff --git a/pxtarget.json b/pxtarget.json index eba5ffd1..e32d27db 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -268,6 +268,7 @@ "extendEditor": true, "extendFieldEditors": true, "enableTrace": true, + "ignoreDocsErrors": true, "experiments": [ "greenScreen", "print",