Updated rock paper scissors (#1444)
* converting RPS into tutorial * updated tutorial * need to deal with github throttling
@ -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)
|
@ -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"
|
||||
}]
|
||||
```
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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
|
||||
})
|
||||
```
|
||||
|
||||
* @boardname@, battery holder and 2 AAA batteries
|
||||
* Roll of duct tape (maybe 2 rolls if you want another color)
|
||||
* Velcro
|
||||
## Step 2 @fullscreen
|
||||
|
||||
## Activities
|
||||
Add a ``tool`` variable to store a random number computed with ``||math:pick random||``.
|
||||
|
||||
* [Make](/projects/rock-paper-scissors/make)
|
||||
* [Code](/projects/rock-paper-scissors/code)
|
||||
When you shake the @boardname@, it should pick a random number from `0` to `2`
|
||||
and store it in the variable `tool`.
|
||||
|
||||
## ~button /projects/rock-paper-scissors/make
|
||||
Let's get started!
|
||||
## ~
|
||||
```blocks
|
||||
let tool = 0;
|
||||
input.onGesture(Gesture.Shake, () => {
|
||||
tool = Math.randomRange(0, 2)
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
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)
|
@ -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!
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
BIN
docs/static/mb/projects/duct-tape-watch/rpsshake.gif
vendored
Normal file
After Width: | Height: | Size: 230 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
BIN
docs/static/mb/projects/rock-paper-scissors/hand.jpg
vendored
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
docs/static/mb/projects/rock-paper-scissors/ifelse.gif
vendored
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
docs/static/mb/projects/rock-paper-scissors/ifelseif.gif
vendored
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
docs/static/mb/projects/rock-paper-scissors/rpsshake.gif
vendored
Normal file
After Width: | Height: | Size: 230 KiB |
BIN
docs/static/mb/projects/rock-paper-scissors/rpssim3.gif
vendored
Normal file
After Width: | Height: | Size: 224 KiB |
@ -268,6 +268,7 @@
|
||||
"extendEditor": true,
|
||||
"extendFieldEditors": true,
|
||||
"enableTrace": true,
|
||||
"ignoreDocsErrors": true,
|
||||
"experiments": [
|
||||
"greenScreen",
|
||||
"print",
|
||||
|