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

2.1.28, initiation update to PXT v5.28.24 (#54)

Browse Source
This commit is contained in:
Amerlander
2019-12-02 05:58:26 +01:00
committed by Peli de Halleux
parent 38a964516e
commit 5c114a0c57
1261 changed files with 50692 additions and 21604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/projects/SUMMARY.md Normal file
View File

@ -0,0 +1,29 @@
# Projects
* [First Steps](/calliope/firststeps)
* [Get Ready](/calliope/firststeps/firstSteps)
* [The 5x5 LED matrix](/calliope/firststeps/5x5LED)
* [Radio](/calliope/firststeps/Radio)
* [Loops](/calliope/firststeps/Loops)
* [Mathematics](/calliope/firststeps/Mathematics)
* [Inputs](/calliope/firststeps/Inputs)
* [Sensors](/calliope/firststeps/Sensors)
* [Output](/calliope/firststeps/Output)
* [Decisions](/calliope/firststeps/Decisions)
* [Variables](/calliope/firststeps/Variables)
* [Turorials](/calliope/tutorials)
* [Flashing Heart](/projects/flashing-heart)
* [Name Tag](/projects/name-tag)
* [Smiley Buttons](/projects/smiley-buttons)
* [Dice](/projects/dice)
* [Love Meter](/projects/love-meter)
* [Mini Chat](/projects/mini-chat)
* [Rock Paper Scissors](/projects/rock-paper-scissors)
* [Coin Flipper](/projects/coin-flipper)
* [Snap the dot](/projects/snap-the-dot)
* [Multi Dice](/projects/multi-dice)
* [Calliope Links](/calliope/links)
* [Shop](https://shop.calliope.cc)
* [Projects](https://calliope.cc/en/projekte)
* [Teaching materials](https://calliope.cc/schulen/schulmaterial)
* [Forum](https://forum.calliope.cc)

74
docs/projects/coin-flipper.md Normal file
View File

@ -0,0 +1,74 @@
# Coin Flipper
## Introduction @unplugged
Let's create a coin flipping program to simulate a real coin toss. We'll use icon images to represent a ``heads`` or ``tails`` result.
![Simulating coin toss](/docs/calliope/tutorials/08_coin_flipper_animation.gif)
## Step 1
Get an ``||input:on button A pressed||`` block from the ``||input:Input||`` drawer in the toolbox. We'll put our coin flipping code in here.
```blocks
input.onButtonPressed(Button.A, () => {
})
```
## Step 2
Grab an ``||logic:if else||`` block and set it inside ``||input:on button A pressed||``. Put a ``||Math:pick random true or false||`` into the ``||logic:if||`` as its condition.
The ``||Math:pick random true or false||`` returns a random ``true`` or ``false`` value which we use to determine a ``heads`` or ``tails`` result for a coin toss.
```blocks
input.onButtonPressed(Button.A, () => {
if (Math.randomBoolean()) {
} else {
}
})
```
## Step 3
Now, put a ``||basic:show icon||`` block inside both the ``||logic:if||`` and the ``||logic:else||``. Pick images to mean ``heads`` and ``tails``.
```blocks
input.onButtonPressed(Button.A, () => {
if (Math.randomBoolean()) {
basic.showIcon(IconNames.Skull)
} else {
basic.showIcon(IconNames.Square)
}
})
```
## Step 4
Press button **A** in the simulator to try the coin toss code.
## Step 5
You can animate the coin toss to add the feeling of suspense. Place different ``||basic:show icon||`` blocks before the ``||logic:if||`` to show that the coin is flipping.
```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
If you have a @boardname@, connect it to USB and click ``|Download|`` to transfer your code.
## Step 7
Press button **A** for a flip. Test your luck and guess ``heads`` or ``tails`` before the toss is over!

58
docs/projects/dice.md Normal file
View File

@ -0,0 +1,58 @@
# Dice
## Introduction @unplugged
Let's turn the @boardname@ into a dice!
(Want to learn how the accelerometer works? [Watch this video](https://youtu.be/byngcwjO51U)).
![A mini dice](/docs/calliope/tutorials/04_dice_animation.gif)
## Step 1 @fullscreen
We need 3 pieces of code: one to detect a throw (shake), another to pick a random number, and then one to show the number.
Place the ``||input:on shake||`` block onto the editor workspace. It runs code when you shake the @boardname@.
```blocks
input.onGesture(Gesture.Shake, () => {
})
```
## Step 2 @fullscreen
Get a ``||basic:show number||`` block and place it inside the ``||input:on shake||`` block to display a number.
```blocks
input.onGesture(Gesture.Shake, () => {
basic.showNumber(0)
})
```
## Step 3 @fullscreen
Put a ``||Math:pick random||`` block in the ``||basic:show number||`` block to pick a random number.
```blocks
input.onGesture(Gesture.Shake, () => {
basic.showNumber(Math.randomRange(0, 10))
})
```
## Step 4 @fullscreen
A typical dice shows values from `1` to `6`. So, in ``||Math:pick random||``, don't forget to choose the right minimum and maximum values!
```blocks
input.onGesture(Gesture.Shake, () => {
basic.showNumber(Math.randomRange(1, 6))
})
```
## Step 5
Use the simulator to try out your code. Does it show the number you expected?
## Step 6
If you have a @boardname@ connected, click ``|Download|`` and transfer your code to the @boardname@!

46
docs/projects/flashing-heart.md Normal file
View File

@ -0,0 +1,46 @@
# Flashing Heart
## Introduction @unplugged
Learn how to use the LEDs and make a flashing heart!
(Want to learn how lights work? [Watch this video](https://youtu.be/qqBmvHD5bCw)).
![Heart shape in the LEDs](/docs/calliope/tutorials/01_flashing_heart_animation.gif)
## Step 1 @fullscreen
Place the ``||basic:show leds||`` block in the ``||basic:forever||`` block and draw a heart.
![An animation that shows how to drag a block and paint a heart](/docs/calliope/tutorials/add_show_led.gif)
## Step 2 @fullscreen
Place another ``||basic:show leds||`` block. You can leave it blank and draw what you want.
```blocks
basic.forever(function() {
basic.showLeds(`
. # . # .
# # # # #
# # # # #
. # # # .
. . # . .`);
basic.showLeds(`
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .`);
})
```
## Step 3 @fullscreen
Look at the virtual @boardname@, you should see the heart and your drawing blink on the screen.
![Heart shape in the LEDs](/docs/calliope/tutorials/01_flashing_heart_animation.gif)
## Step 4 @fullscreen
If you have a @boardname@ connected, click ``|Download|`` to transfer your code and watch the hearts flash!

45
docs/projects/love-meter.md Normal file
View File

@ -0,0 +1,45 @@
# Love Meter
## Introduction @unplugged
Make a love meter, how sweet! The @boardname@ is feeling the love, then sometimes not so much!
Tell everyone who you are. Show you name on the LEDs.
![Love meter banner message](/docs/calliope/tutorials/05_love_meter_animation.gif)
## Step 1
Let's build a **LOVE METER** machine. Place an ``||input:on pin pressed||`` block to run code when pin **0** is pressed. Use ``P0`` from the list of pin inputs.
```blocks
input.onPinPressed(TouchPin.P0, () => {
});
```
## Step 2
Using ``||basic:show number||`` and ``||Math:pick random||`` blocks, show a random number from `0` to `100` when pin **0** is pressed.
```blocks
input.onPinPressed(TouchPin.P0, () => {
basic.showNumber(Math.randomRange(0, 100));
});
```
## Step 3
Click on pin **0** in the simulator and see which number is chosen.
## Step 4
Show ``"LOVE METER"`` on the screen when the @boardname@ starts.
```blocks
basic.showString("LOVE METER");
input.onPinPressed(TouchPin.P0, () => {
basic.showNumber(Math.randomRange(0, 100));
});
```
## Step 5
Click ``|Download|`` to transfer your code in your @boardname@. Hold the **GND** pin with one hand and press pin **0** with the other hand to trigger this code.

67
docs/projects/mini-chat.md Normal file
View File

@ -0,0 +1,67 @@
# Mini Chat
## Introduction @unplugged
![Two @boardname@ connected via radio](/docs/calliope/tutorials/06_mini_chat_animation.gif)
Use the **radio** to send and receive messages with other @boardname@.
## Sending a message @fullscreen
Use ``||input:on button pressed||`` to send a text message over radio with ``||radio:send string||``.
Every @boardname@ nearby will receive this message.
```blocks
input.onButtonPressed(Button.A, () => {
radio.sendString("Yo");
});
```
## Receiving a message @fullscreen
Add a ``||radio:on received string||`` block to run when a message is received.
```blocks
radio.onReceivedString(function (receivedString) {
})
```
## Displaying text @fullscreen
Add a ``||basic:show string||`` to display the string on the screen. Pull the ``||variables:receivedString||`` out of ``||radio:on received string||`` and put it into ``||basic:show string||``.
```blocks
radio.onReceivedString(function (receivedString) {
basic.showString(receivedString);
})
```
## Testing in the simulator @fullscreen
Press button **A** on the simulator, you will notice that a second @boardname@ appears (if your screen is too small, the simulator might decide not to show it). Try pressing **A** again and notice that the "Yo" message gets displayed on the other @boardname@.
```blocks
input.onButtonPressed(Button.A, () => {
radio.sendString("Yo");
});
radio.onReceivedString(function (receivedString) {
basic.showString(receivedString);
})
```
## Try it for real @fullscreen
If you two @boardname@s, download the program to each one. Press button **A** on one and see if the other gets a message.
## Groups @fullscreen
Use the ``||radio:set group||`` block to assign a **group** number to your program. You will only receive messages from @boardname@s within the same group. Use this to avoid receiving messages from every @boardname@ that is transmitting.
```blocks
radio.setGroup(123)
```
```package
radio
```

95
docs/projects/multi-dice.md Normal file
View File

@ -0,0 +1,95 @@
# Multi Dice
## Introduction @unplugged
![Multiple @boardname@ throwing a dice](/docs/calliope/tutorials/10_multi_dice_animation.gif)
Build a multi-player dice game using the **radio**. The **radio** blocks let you send wireless messages between a @boardname@ and another @boardname@.
In this game, you shake to "throw the dice" and send the result to the other @boardname@. If you receive a result of a dice throw equal or greater than yours, you lose.
## Dice game @fullscreen
Let's start by rebuilding the **dice** game. If you are unsure about the details, try the **dice** tutorial again.
```blocks
input.onGesture(Gesture.Shake, function () {
basic.showNumber(Math.randomRange(1, 6))
})
```
## Dice variable @fullscreen
We need to store the result of the dice cast in a variable. A **variable** is like a place in the memory of the @boardname@ where you save information, like numbers.
* Go to the **Variables** toolbox and click ``||Make a Variable||`` to create a new variable. We will call it **dice**.
* Add a ``||set dice to||`` block and drag the ``||pick random||`` into it.
* Drag a ``||dice||`` from the **Variables** toolbox into the ``||basic:show number||`` block.
```blocks
let dice = 0
input.onGesture(Gesture.Shake, function () {
dice = Math.randomRange(1, 6)
basic.showNumber(dice)
})
```
## Send the dice @fullscreen
Put in a ``||radio:send number||`` and a ``||dice||`` to send the value stored in the ``dice`` variable via radio.
```blocks
let dice = 0
input.onGesture(Gesture.Shake, function () {
dice = Math.randomRange(1, 6)
basic.showNumber(dice)
radio.sendNumber(dice)
})
```
## Receive the dice @fullscreen
Go get an ``||radio:on received number||`` event block. This event runs when a radio message from another @boardname@ arrives. The ``receivedNumber`` value is the value of the dice in this game.
```blocks
radio.onReceivedNumber(function (receivedNumber) {
})
```
## Check your cast @fullscreen
Add a ``||logic:if||`` block to test if ``receivedNumber`` is greater or equal to ``dice``.
If is, you lost so display a sad face on the screen.
```blocks
let dice = 0;
radio.onReceivedNumber(function (receivedNumber) {
if (receivedNumber >= dice) {
basic.showIcon(IconNames.Sad)
}
})
```
## Test it! @fullscreen
Try pressing **SHAKE** in the simulator and see that a second @boardname@ appears. You can play the game on both virtual boards.
If you have more than one @boardname@, download your code onto each one and try playing the game with your friends!
```blocks
let dice = 0
input.onGesture(Gesture.Shake, function () {
dice = Math.randomRange(1, 6)
basic.showNumber(dice)
radio.sendNumber(dice)
})
radio.onReceivedNumber(function (receivedNumber) {
if (receivedNumber >= dice) {
basic.showIcon(IconNames.Sad)
}
})
```
```package
radio
```

38
docs/projects/name-tag.md Normal file
View File

@ -0,0 +1,38 @@
# Name Tag
## Introduction @unplugged
Tell everyone who you are. Show you name on the LEDs.
![Name scrolling on the LEDs](/docs/calliope/tutorials/02_nametag_animation.gif)
## Step 1 @fullscreen
Place the ``||basic:show string||`` block in the ``||basic:forever||`` block to repeat it. Change the text to your name.
```blocks
basic.forever(() => {
basic.showString("Emma");
});
```
## Step 2 @fullscreen
Look at the simulator and make sure it shows your name on the screen.
![Name scrolling on the LEDs](/docs/calliope/tutorials/02_nametag_animation.gif)
## Step 3 @fullscreen
Place more ``||basic:show string||`` blocks to create your own story.
```blocks
basic.forever(() => {
basic.showString("Emma");
basic.showString("<3<3<3");
})
```
## Step 4 @unplugged
If you have a @boardname@ connected, click ``|Download|`` to transfer your code and watch your name scroll!

171
docs/projects/rock-paper-scissors.md Normal file
View File

@ -0,0 +1,171 @@
# Rock Paper Scissors
## Introduction @unplugged
![Animation of the Rock Paper Scissors game](/docs/calliope/tutorials/07_stone_paper_scissors_animation.gif)
Use the accelerometer and the screen to build a **Rock Paper Scissors** game that you can play with your friends!
## Step 1 @fullscreen
Add a ``||input:on shake||`` block to run code when you shake the @boardname@.
```blocks
input.onGesture(Gesture.Shake, () => {
})
```
## Step 2 @fullscreen
Add a ``hand`` variable and place the ``||variables:set hand to||`` block in the shake event.
<!-- ![A animation that shows how to create a variable](/static/mb/projects/rock-paper-scissors/newvar.gif) -->
## Step 3 @fullscreen
Add a ``||math:pick random||`` block to pick a random number from `1` to `3` and store it in the variable named ``hand``.
```blocks
let hand = 0;
input.onGesture(Gesture.Shake, () => {
hand = Math.randomRange(1, 3)
})
```
In a later step, each of the possible numbers (`1`, `2`, or `3`) is matched to its own picture. The picture is shown on the LEDs when its matching number is picked.
## Step 4 @fullscreen
Place an ``||logic:if||`` block under the ``||math:pick random||`` and check whether ``hand`` is equal to ``1``. Add a ``||basic:show leds||`` block that shows a picture of a piece of paper. The number `1` will mean paper.
<!-- ![How to drag an if statement](/static/mb/projects/rock-paper-scissors/if.gif) -->
```blocks
let hand = 0;
input.onGesture(Gesture.Shake, () => {
hand = Math.randomRange(1, 3)
if (hand == 1) {
basic.showLeds(`
# # # # #
# . . . #
# . . . #
# . . . #
# # # # #
`)
}
})
```
## Step 5 @fullscreen
Click on the **SHAKE** button in the simulator. If you try enough times, you should see a picture of paper on the screen.
![Shaking a @boardname@ simulator](/static/mb/projects/rock-paper-scissors/rpsshake.gif)
## Step 6 @fullscreen
Click the **(+)** button to add an ``||logic:else||`` section.
<!-- ![Adding an else clause](/static/mb/projects/rock-paper-scissors/ifelse.gif) -->
```blocks
let hand = 0;
input.onGesture(Gesture.Shake, () => {
hand = Math.randomRange(1, 3)
if (hand == 1) {
basic.showLeds(`
# # # # #
# . . . #
# . . . #
# . . . #
# # # # #
`)
} else {
}
})
```
## Step 7 @fullscreen
Add a ``||basic:show leds||`` block inside the ``||logic:else||``. Make a picture of a scissors in the LEDs.
```blocks
let hand = 0;
input.onGesture(Gesture.Shake, () => {
hand = Math.randomRange(1, 3)
if (hand == 1) {
basic.showLeds(`
# # # # #
# . . . #
# . . . #
# . . . #
# # # # #
`)
} else {
basic.showLeds(`
# # . . #
# # . # .
. . # . .
# # . # .
# # . . #
`)
}
})
```
## Step 8 @fullscreen
Click the ``+`` button again to add an ``||logic:else if||`` section. Now, add a conditional block for ``||logic:hand = 2||`` to the condition in ``||logic:else if||``. Since ``hand`` can only be `1`, `2`, or `3`, your code is covering all possible cases!
![Adding an else if clause](/static/mb/projects/rock-paper-scissors/ifelseif.gif)
## Step 9 @fullscreen
Get one more ``||basic:show leds||`` block and put it in the ``||logic:else if||``. Make a picture of a rock in the LEDs.
```blocks
let hand = 0;
input.onGesture(Gesture.Shake, () => {
hand = Math.randomRange(1, 3)
if (hand == 1) {
basic.showLeds(`
# # # # #
# . . . #
# . . . #
# . . . #
# # # # #
`)
} else if (hand == 2) {
basic.showLeds(`
. . . . .
. # # # .
. # # # .
. # # # .
. . . . .
`)
} else {
basic.showLeds(`
# # . . #
# # . # .
. . # . .
# # . # .
# # . . #
`)
}
})
```
## Step 10 @fullscreen
Click on the **SHAKE** button in the simulator and check to see that each image is showing up.
![Shaking a @boardname@ simulator](/static/mb/projects/rock-paper-scissors/rpssim3.gif)
## Step 11 @fullscreen
If you have a @boardname@, click on ``|Download|`` and follow the instructions 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) -->

81
docs/projects/smiley-buttons.md Normal file
View File

@ -0,0 +1,81 @@
# Smiley Buttons
## Introduction @unplugged
Code the buttons on the @boardname@ to show that it's happy or sad.
(Want to learn how the buttons works? [Watch this video](https://youtu.be/t_Qujjd_38o)).
![Pressing the A and B buttons](/docs/calliope/tutorials/03_smiley_button_animation.gif)
## Step 1 @fullscreen
Place a ``||input:on button pressed||`` block to run code when button **A** is pressed.
```blocks
input.onButtonPressed(Button.A, () => {
});
```
## Step 2 @fullscreen
Place a ``||basic:show leds||`` block inside ``||input:on button pressed||`` to display a smiley on the screen. Press the **A** button in the simulator to see the smiley.
```blocks
input.onButtonPressed(Button.A, () => {
basic.showLeds(`
# # . # #
# # . # #
. . . . .
# . . . #
. # # # .`
);
});
```
## Step 3 @fullscreen
Add ``||input:on button pressed||`` and ``||basic:show leds||`` blocks to display a frowny when button **B** is pressed.
```blocks
input.onButtonPressed(Button.B, () => {
basic.showLeds(`
# # . # #
# # . # #
. . . . .
. # # # .
# . . . #`
);
});
```
## Step 4 @fullscreen
Add a secret mode that happens when **A** and **B** are pressed together. For this case, add multiple ``||basic:show leds||`` blocks to create an animation.
```blocks
input.onButtonPressed(Button.AB, () => {
basic.showLeds(`
. . . . .
# . # . .
. . . . .
# . . . #
. # # # .
`)
basic.showLeds(`
. . . . .
. . # . #
. . . . .
# . . . #
. # # # .
`)
})
```
## Step 5
If you have a @boardname@, connect it to USB and click ``|Download|`` to transfer your code. Press button **A** on your @boardname@. Try button **B** and then **A** and **B** together.
## Step 6
Nice! Now go and show it off to your friends!

94
docs/projects/snap-the-dot.md Normal file
View File

@ -0,0 +1,94 @@
# Snap the Dot
## Introduction @unplugged
![Animation of the snap the dot game](/docs/calliope/tutorials/09_snap_the_dot_animation.gif)
Snap the dot is a game of skill where the player has to press **A** exactly when the dot reaches the center of the screen.
This tutorial shows how to use the game engine.
## Create a sprite @fullscreen
Drag a ``||game:create sprite||`` block onto the workspace. A sprite is a single pixel that can move on the screen. It has an ``x`` and ``y`` position along with a direction of motion.
```blocks
let sprite: game.LedSprite = null
sprite = game.createSprite(2, 2)
```
## Move the dot @fullscreen
The sprite starts in the center facing right. Put a ``||game:move||`` block into the ``||basic:forever||`` to make it move. Notice how it moves to the right but does not bounce back.
```blocks
let sprite: game.LedSprite = null
sprite = game.createSprite(2, 2)
basic.forever(function () {
sprite.move(1)
})
```
## Bounce @fullscreen
Grab a ``||game:if on edge, bounce||`` block to make the sprite bounce on the side of the screen. Also, add a ``||basic:pause||`` block to slow down the sprite.
```blocks
let sprite: game.LedSprite = null
sprite = game.createSprite(2, 2)
basic.forever(function () {
sprite.move(1)
sprite.ifOnEdgeBounce()
basic.pause(100)
})
```
## Test and download
Use the simulator to find the best speed. If you have a @boardname@, press ``|Download|`` to try it out on the device.
## Button handling @fullscreen
When **A** is pressed, we test if the sprite is in the center or not.
Use a ``||input:on button pressed||`` block to handle the **A** button. Put in a ``||logic:if||`` block and test if ``||game:x||`` is equal to `2`.
```blocks
let sprite: game.LedSprite = null
input.onButtonPressed(Button.A, function () {
if (sprite.get(LedSpriteProperty.X) == 2) {
} else {
}
})
sprite = game.createSprite(2, 2)
basic.forever(function () {
sprite.move(1)
basic.pause(100)
sprite.ifOnEdgeBounce()
})
```
## Score and game over
Finally, pull out an ``||game:add score||`` and a ``||game:game over||`` block to handle both success (sprite in the center) and failure (sprite not in the center).
```blocks
let sprite: game.LedSprite = null
input.onButtonPressed(Button.A, function () {
if (sprite.get(LedSpriteProperty.X) == 2) {
game.addScore(1)
} else {
game.gameOver()
}
})
sprite = game.createSprite(2, 2)
basic.forever(function () {
sprite.move(1)
basic.pause(100)
sprite.ifOnEdgeBounce()
})
```
## Test and download
Your game is ready! If you have a @boardname@, press ``|Download|`` to try it out on the device.