2.1.28, initiation update to PXT v5.28.24 (#54)
This commit is contained in:
committed by
Peli de Halleux
parent
38a964516e
commit
5c114a0c57
29
docs/projects/SUMMARY.md
Normal file
29
docs/projects/SUMMARY.md
Normal 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
74
docs/projects/coin-flipper.md
Normal 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.
|
||||
|
||||

|
||||
|
||||
## 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
58
docs/projects/dice.md
Normal 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)).
|
||||
|
||||

|
||||
|
||||
## 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
46
docs/projects/flashing-heart.md
Normal 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)).
|
||||
|
||||
|
||||

|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
Place the ``||basic:show leds||`` block in the ``||basic:forever||`` block and draw a heart.
|
||||
|
||||

|
||||
|
||||
## 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.
|
||||
|
||||

|
||||
|
||||
## 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
45
docs/projects/love-meter.md
Normal 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.
|
||||
|
||||

|
||||
|
||||
## 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
67
docs/projects/mini-chat.md
Normal file
@ -0,0 +1,67 @@
|
||||
# Mini Chat
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||

|
||||
|
||||
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
95
docs/projects/multi-dice.md
Normal file
@ -0,0 +1,95 @@
|
||||
# Multi Dice
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||

|
||||
|
||||
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
38
docs/projects/name-tag.md
Normal file
@ -0,0 +1,38 @@
|
||||
# Name Tag
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
Tell everyone who you are. Show you name on the LEDs.
|
||||
|
||||

|
||||
|
||||
## 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.
|
||||
|
||||

|
||||
|
||||
## 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
171
docs/projects/rock-paper-scissors.md
Normal file
@ -0,0 +1,171 @@
|
||||
# Rock Paper Scissors
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||

|
||||
|
||||
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.
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 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.
|
||||
|
||||
<!--  -->
|
||||
|
||||
```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.
|
||||
|
||||

|
||||
|
||||
## Step 6 @fullscreen
|
||||
|
||||
Click the **(+)** button to add an ``||logic:else||`` section.
|
||||
|
||||
<!--  -->
|
||||
|
||||
```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!
|
||||
|
||||

|
||||
|
||||
## 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.
|
||||
|
||||

|
||||
|
||||
## 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!
|
||||
|
||||
<!--  -->
|
81
docs/projects/smiley-buttons.md
Normal file
81
docs/projects/smiley-buttons.md
Normal 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)).
|
||||
|
||||

|
||||
|
||||
## 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
94
docs/projects/snap-the-dot.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Snap the Dot
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||

|
||||
|
||||
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.
|
Reference in New Issue
Block a user