Updated rock paper scissors (#1444)

* converting RPS into tutorial

* updated tutorial

* need to deal with github throttling
This commit is contained in:
Peli de Halleux 2018-10-16 15:58:27 -07:00 committed by GitHub
parent 086d0a9f9b
commit 5a03f09a5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 161 additions and 188 deletions

View File

@ -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)

View File

@ -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"
}]
```

View File

@ -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",

View File

@ -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)

View File

@ -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!

View File

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

View File

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

View File

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

View File

@ -268,6 +268,7 @@
"extendEditor": true,
"extendFieldEditors": true,
"enableTrace": true,
"ignoreDocsErrors": true,
"experiments": [
"greenScreen",
"print",