pxt-calliope/docs/projects/coin-flipper.md
Juri Wolf a93febb5b7
Map and clean deprecated functions (#175)
* add image and deprecated arrow functions

* update locales

* map basic.showArrow

* map arrow blocks

* map & remove arrow images

* remove arrow blocks

* update locales

* remove & patch:
rgbw -> rgb
button/pin pressed -> button/pin event
loudness -> soundLevel

* update ts mappings for arrows

* add wip ts patch rules

* update .blocks files

* use Click instead of Down as default in Documentation and tests

* patch test.blocks

* fix lowercase name tag

* update test.blocks

* update blocks test files

* update blocks test files

* format block files

* pass blocks file tests

* fix ts mapping

* fix color.defl value

closes https://github.com/microsoft/pxt-calliope/issues/136

* fix ts mappings

- add optional spacing at the end of rgbw()
- map up to v4.0.19

* add suggested changes

* replace innerText by textContent

Co-authored-by: JW <gitkraken@juriwolf.de>
Co-authored-by: Juri <info@juriwolf.de>
2022-04-26 10:28:42 -07:00

75 lines
2.1 KiB
Markdown

# 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](/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.onButtonEvent(Button.A, ButtonEvent.Click, () => {
})
```
## 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.onButtonEvent(Button.A, ButtonEvent.Click, () => {
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.onButtonEvent(Button.A, ButtonEvent.Click, () => {
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.onButtonEvent(Button.A, ButtonEvent.Click, () => {
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!