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

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

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)

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

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!

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.

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
```

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!

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

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!

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.