c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

converting popular projects into tutorials (#534)

Browse Source
This commit is contained in:
Peli de Halleux 2017-09-11 10:49:40 -07:00 committed by GitHub
parent 036b191f29
commit 7d91f979e6
6 changed files with 179 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/projects.md
View File

@ -10,27 +10,32 @@ Fun games to build with your @boardname@.
[{ [{
"name": "Flashing Heart", "name": "Flashing Heart",
"url":"/projects/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", "name": "Smiley Buttons",
"url":"/projects/smiley-buttons", "url":"/projects/smiley-buttons",
"imageUrl": "/static/mb/projects/a2-buttons.png" "imageUrl": "/static/mb/projects/a2-buttons.png",
},{ "cardType": "tutorial"
"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"
}, { }, {
"name": "Coin Flipper", "name": "Coin Flipper",
"url":"/projects/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"
}] }]
``` ```

103
docs/projects/coin-flipper.md
View File

@ -1,4 +1,4 @@
# The amazing coin flipper # Coin Flipper
## ~avatar avatar ## ~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 ## Step 1
`B`, the coin flipper will show either `H` for heads or `T` for tails
on the LED screen.
```blocks Place a ``||input:on button pressed||`` block to run code
input.onButtonPressed(Button.B, () => { when button **A** is pressed.
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:
### ~
```blocks ```blocks
input.onButtonPressed(Button.A, () => { 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 ## Step 2
your score, and if you press `A` and `B` together, the @boardname@ will
show your score.
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 ```blocks
input.onButtonPressed(Button.B, () => {
if (Math.randomBoolean()) {
basic.showString("H");
} else {
basic.showString("T");
}
});
input.onButtonPressed(Button.A, () => { input.onButtonPressed(Button.A, () => {
game.addScore(1); if (Math.randomBoolean()) {
}); } else {
input.onButtonPressed(Button.AB, () => { }
basic.showNumber(game.score());
}); });
``` ```
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!

11
docs/projects/flashing-heart.md
View File

@ -2,9 +2,10 @@
## Step 1 ## 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(` 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. Place another ``||basic:show leds||`` block under the heart to make it blink.
```block ```blocks
basic.showLeds(` basic.showLeds(`
. # . # . . # . # .
# # # # # # # # # #
@ -39,7 +40,7 @@ basic.showLeds(`
## Step 4 ## Step 4
Place the blocks inside the ``||basic:forever||`` Move the blocks inside the ``||basic:forever||``
to repeat the animation. to repeat the animation.
```block ```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. Place more ``||basic:show leds||`` blocks to create your own animation.
```block ```blocks
basic.forever(() => { basic.forever(() => {
basic.showLeds(` basic.showLeds(`
. # . # . . # . # .

39
docs/projects/love-meter.md
View File

@ -1,52 +1,37 @@
# love meter # love meter
## ~avatar avatar
Use pins and your body to change the display!
## ~
## Step 1 ## Step 1
Use [on pin pressed](/reference/input/on-pin-pressed) to show a random number Let's build a **LOVE METER** machine. Place a ``||input:on pin pressed||`` block to run code
when pin P0 is pressed (hold the GND pin with other hand): when pin ``P0`` is pressed.
```blocks ```blocks
input.onPinPressed(TouchPin.P0, () => { input.onPinPressed(TouchPin.P0, () => {
basic.showNumber(Math.random(11));
}); });
``` ```
## Step 2 ## 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 ```blocks
input.onPinPressed(TouchPin.P0, () => { input.onPinPressed(TouchPin.P0, () => {
basic.showNumber(Math.random(11)); basic.showNumber(Math.random(101));
});
input.onPinPressed(TouchPin.P1, () => {
basic.showString("LOVE?");
}); });
``` ```
## Step 3 ## Step 3
Show a heart when pin P2 is pressed: Show ``"LOVE METER"`` on the screen when the @boardname@ starts.
```blocks ```blocks
basic.showString("LOVE METER");
input.onPinPressed(TouchPin.P0, () => { input.onPinPressed(TouchPin.P0, () => {
basic.showNumber(Math.random(11)); basic.showNumber(Math.random(101));
});
input.onPinPressed(TouchPin.P1, () => {
basic.showString("LOVE?");
});
input.onPinPressed(TouchPin.P2, () => {
basic.showLeds(`
. # # # .
# # # # #
# # # # #
. # # # .
. . # . .
`);
}); });
``` ```
## 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.

176
docs/projects/rock-paper-scissors.md
View File

@ -1,15 +1,9 @@
# rock paper scissors # Rock Paper Scissors
## ~avatar avatar ## Step 1
Build a rock paper scissors game!
## ~
## Step 1: Getting started
We want the @boardname@ to choose rock, paper, or scissors when you shake it. 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 ```blocks
input.onGesture(Gesture.Shake, () => { 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 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!) 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 ```blocks
let weapon = 0;
input.onGesture(Gesture.Shake, () => { 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. 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. 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 Place an ``if`` block under the ``||math:pick random||`` and
`weapon` is `0`. Make sure the ``if`` block has an ``else if`` part check whether ``weapon`` is equal to ``0``.
and an ``else`` part.
Next, add a ``show leds`` block that shows a
picture of a piece of paper:
```blocks ```blocks
let weapon = 0;
input.onGesture(Gesture.Shake, () => { input.onGesture(Gesture.Shake, () => {
let weapon = Math.random(3) let weapon = Math.random(3)
if (weapon == 0) { 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 In the ``if`` block, place a ``||basic:show leds||`` block that shows a
when another random number comes up. picture of a piece of paper.
Make the ``else if`` part check if the variable `weapon` is `1`.
Then add a ``show leds`` block with a picture of a rock.
```blocks ```blocks
let weapon = 0;
input.onGesture(Gesture.Shake, () => { input.onGesture(Gesture.Shake, () => {
let weapon = Math.random(3) let weapon = Math.random(3)
if (weapon == 0) { 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) { } else if (weapon == 1) {
basic.showLeds(` 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 ```blocks
let weapon = 0;
input.onGesture(Gesture.Shake, () => { input.onGesture(Gesture.Shake, () => {
let weapon = Math.random(3) let weapon = Math.random(3)
if (weapon == 0) { if (weapon == 0) {
@ -117,7 +137,6 @@ input.onGesture(Gesture.Shake, () => {
# . . . # # . . . #
# # # # # # # # # #
`) `)
} else if (weapon == 1) { } else if (weapon == 1) {
basic.showLeds(` basic.showLeds(`
. . . . . . . . . .
@ -139,63 +158,6 @@ input.onGesture(Gesture.Shake, () => {
``` ```
## ~hint ## Step 8
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)?
Your game is ready! Gather your friends and play Rock Paper Scissors!

124
docs/projects/smiley-buttons.md
View File

@ -1,29 +1,18 @@
# smiley buttons # Smiley Buttons
## ~avatar
Use buttons to show a smiley face!
## ~
## Step 1 ## 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 ```blocks
basic.showLeds(` input.onButtonPressed(Button.A, () => {
# # . # # });
# # . # #
. . . . .
# . . . #
. # # # .`
);
``` ```
## Step 2 ## Step 2
Add an input block for when [button A is pressed](/reference/input/button-is-pressed), Place a ``||basic:show leds||`` block inside ``||input:on button pressed||``
and **move** the smiley face inside it: to display a smiley on the screen.
```blocks ```blocks
input.onButtonPressed(Button.A, () => { input.onButtonPressed(Button.A, () => {
@ -37,23 +26,16 @@ input.onButtonPressed(Button.A, () => {
}); });
``` ```
Try pressing button A!
## Step 3 ## Step 3
Add blocks so that when [button B is pressed](/reference/input/on-button-pressed), Click ``|Download|`` to transfer your code in your @boardname@ and try pressing button **A**.
a frowney appears:
## Step 4
Add ``||input:on button pressed||`` and ``||basic:show leds||`` blocks to
display a frowney when button **B** is pressed.
```blocks ```blocks
input.onButtonPressed(Button.A, () => {
basic.showLeds(`
# # . # #
# # . # #
. . . . .
# . . . #
. # # # .`
);
});
input.onButtonPressed(Button.B, () => { input.onButtonPressed(Button.B, () => {
basic.showLeds(` 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... In that case, add multiple ``||basic:show leds||`` blocks to create an animation...
```blocks ```blocks
input.onButtonPressed(Button.AB, () => { input.onButtonPressed(Button.AB, () => {
basic.showLeds(`
. . . . .
. # . # .
. . . . .
# . . . #
. # # # .
`)
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 Click ``|Download|`` to transfer your code in your @boardname@
@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
```