From 727490668c1d8393fd2bdfe9b7c993f368375686 Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Thu, 23 Jun 2016 23:52:24 -0700 Subject: [PATCH] splitting the getting started page --- docs/getting-started.md | 469 +------------------- docs/getting-started/buttons.md | 79 ++++ docs/getting-started/coin-flipper.md | 76 ++++ docs/getting-started/rock-paper-scissors.md | 206 +++++++++ docs/getting-started/screen.md | 96 ++++ docs/getting-started/shake.md | 22 + 6 files changed, 483 insertions(+), 465 deletions(-) create mode 100644 docs/getting-started/buttons.md create mode 100644 docs/getting-started/coin-flipper.md create mode 100644 docs/getting-started/rock-paper-scissors.md create mode 100644 docs/getting-started/screen.md create mode 100644 docs/getting-started/shake.md diff --git a/docs/getting-started.md b/docs/getting-started.md index c7438317..78556e4e 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -9,8 +9,6 @@ to make real programs that work! ## ~ -### Happy face - Use the **Basic** drawer in the editor (to the left) to drag out and arrange three blocks (two `show leds` and one `forever` block) to create this program: @@ -34,470 +32,11 @@ basic.forever(() => { }); ``` -When you run this program (click the **Play** button) you will see a smiley face, then a blank +When this program runs, you will see a smiley face, then a blank screen, then a smiley again -- it never stops! (That's because of the ``forever`` block.) -Click **Compile** to move your program to the BBC micro:bit! +Click **Compile** to move your program to the BBC micro:bit! +Make sure to follow the instructions. -### Happy unhappy face - -Draw an unhappy face instead of the blank screen. Click on the dots -in the second ``show leds`` block until it matches the blocks below. -Now you have an **animation** (cartoon) that shows a happy face, -then an unhappy one, then a happy one again, forever (or until -you turn off your micro:bit)! - -```blocks -basic.forever(() => { - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # . . . # - . # # # . - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - . # # # . - # . . . # - `) -}); -``` -Click **Compile** to move your program to the BBC micro:bit! - -### Your turn! - -Pile up more ``show leds`` blocks to create an animation! Create an -animation with at least 5 pictures. What does this animation show? - -```blocks -basic.forever(() => { - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # . . . # - . # # # . - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # # # # # - . . . . . - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - . # # # . - # . . . # - `) - basic.showLeds(` - . . . . . - . # . # . - . . . . . - # # # # # - . . . # # - `) - basic.showLeds(` - . . . . . - # . # . . - . . . . . - # . . . # - . # # # . - `) - basic.showLeds(` - . . . . . - . . # . # - . . . . . - # . . . # - . # # # . - `) -}); -``` -Click **Compile** to move your program to the BBC micro:bit! - -#### ~hint - -You can find the ``show leds`` block in the **Basic** part of the editor. - -#### ~ - -### Button A and button B - -This program will show the word **ANTEATER** on the LED -screen when you press button `A`. - -```blocks -input.onButtonPressed(Button.A, () => { - basic.showString("ANTEATER"); -}); -``` - -#### ~hint - -The ``showString`` block can show letters, numbers, and punctuation -on the micro:bit screen. - -#### ~ - -Now try to unscramble these blocks in the editor so that the micro:bit -shows **BANANA** when you press button `B`. - -```shuffle -input.onButtonPressed(Button.B, () => { - basic.showString("BANANA"); -}); -``` -#### ~hint - -You can find the letter `B` by clicking the letter `A` on the -``onButtonPressed`` block. - -#### ~ - -Click **Compile** to move your program to the BBC micro:bit! - -#### Your turn! - -Can you combine these blocks so your program shows your real name -instead of **ANTEATER** when you press `A`, but _your secret agent -name_ instead of **BANANA** when you press `B`? - -### Shake - -You can find when someone is shaking the BBC micro:bit by checking its -**accelerometer** (it finds whether the micro:bit is speeding up or -slowing down). - -Unscramble these blocks in the editor to show a frownie when someone -shakes the micro:bit. (Ouch!) - -```shuffle -input.onGesture(Gesture.Shake, () => { - basic.showLeds(` -. . . . . -. # . # . -. . . . . -. # # # . -# . . . #`); -}); -``` -Click **Compile** to move your program to the BBC micro:bit! - -### Pins - -You can also use the pins as buttons. (The pins are the holes in the -metal stripe at the bottom of the micro:bit board.) For example, hold -the ``GND`` button with one hand and touch the ``0`` pin (called -``P0``) with your other hand to tell the micro:bit you're pressing it. - -Unscramble the blocks in the editor to show a heart when you touch -pin ``P0``. - -```shuffle -input.onPinPressed(TouchPin.P0, () => { - basic.showLeds(` -. # . # . -# . # . # -# . . . # -. # . # . -. . # . .`); -}); -``` -Click **Compile** to move your program to the BBC micro:bit! - -## ~hint - -Try this experiment: find a friend and hold hands. Touch the ``GND`` -pin while your friend presses the ``P0`` pin. You should see the -heart! The electric current is going through your bodies and across -your handshake to make it happen! - -## ~ - -## The amazing coin flipper - -### ~avatar avatar - -Are you trying to choose whether to play soccer or go to the movies -instead, or which toppings to have on your pizza? Build a coin -flipping machine with the BBC micro:bit to choose for you! - -### ~ - -Here are the blocks to make your coin flipper. When you press button -`B`, the coin flipper will show either `H` for heads or `T` for tails -on the LED screen. - -```blocks -input.onButtonPressed(Button.B, () => { - if (Math.randomBoolean()) { - basic.showString("H"); - } else { - basic.showString("T"); - } -}); -``` -### ~hint - -The ``pick random true or false`` block randomly tells the ``if`` -block `true` or `false`. If the ``pick`` block picked `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 -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 -your score, and if you press `A` and `B` together, the micro:bit will -show your score. - -When you're done, your coin flipping program should look like this: - -```blocks -input.onButtonPressed(Button.B, () => { - if (Math.randomBoolean()) { - basic.showString("H"); - } else { - basic.showString("T"); - } -}); -input.onButtonPressed(Button.A, () => { - game.addScore(1); -}); -input.onButtonPressed(Button.AB, () => { - basic.showNumber(game.score()); -}); -``` - -Flip until your thumbs get tired! - -## Let's play Rock Paper Scissors! - -### ~avatar avatar - -Build a Rock Paper Scissors game with the BBC micro:bit! You can play -the game with a friend who has it on a micro:bit. You can also play -it with friends who are just using their hands. (The game is built -like a coin flipper, but with three choices instead of two.) - -### ~ - -## Step 1: Getting started - -We want the micro:bit to choose rock, paper, or scissors when you -shake it. Try creating an ``on shake`` block so when you shake the -micro:bit, it will run part of a program. - -Clear up the blocks and add the blocks below. - -```blocks -input.onGesture(Gesture.Shake, () => { - -}) -``` - -Next, when you shake the micro:bit, it should pick a random number from `0` to `2` -and store it in the variable `item`. - -Add a ``set`` block with a variable. Then add a ``pick random`` block, -and store the random number in the variable, -like this: - -```blocks -input.onGesture(Gesture.Shake, () => { - let item = 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. -We will show the right picture for that number on the LED screen. - - -## Step 2: Picking paper - -Put an ``if`` block after the ``let`` block that checks whether -`item` is `0`. Make sure the ``if`` block has an ``else if`` part -and an ``else`` part. - -Next, add a ``show leds`` block that shows a -picture of a piece of paper: - -```blocks -input.onGesture(Gesture.Shake, () => { - let item = Math.random(3) - if (item == 0) { - basic.showLeds(` - # # # # # - # . . . # - # . . . # - # . . . # - # # # # # - `) - } else if (false) { - - } else { - - } -}) -``` - -## Step 3: A random rock - -Now we are going to add a new picture for the micro:bit to show -when another random number comes up. - -Make the ``else if`` part check if the variable `item` is `1`. -Then add a ``show leds`` block with a picture of a rock. - -```blocks -input.onGesture(Gesture.Shake, () => { - let item = Math.random(3) - if (item == 0) { - basic.showLeds(` - # # # # # - # . . . # - # . . . # - # . . . # - # # # # # - `) - } else if (item == 1) { - basic.showLeds(` - . . . . . - . # # # . - . # # # . - . # # # . - . . . . . - `) - } else { - - } -}) -``` - -## Step 4: Suddenly scissors - -Add a ``show leds`` block with a picture of scissors to the ``else`` part: - -```blocks -input.onGesture(Gesture.Shake, () => { - let item = Math.random(3) - if (item == 0) { - basic.showLeds(` - # # # # # - # . . . # - # . . . # - # . . . # - # # # # # - `) - - } else if (item == 1) { - basic.showLeds(` - . . . . . - . # # # . - . # # # . - . # # # . - . . . . . - `) - } else { - basic.showLeds(` - # # . . # - # # . # . - . . # . . - # # . # . - # # . . # - `) - } -}) - -``` - -### ~hint - -You don't need to check if `item` 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! - -Click **Compile** to move your program to the BBC micro:bit! - -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 micro:bit 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 micro:bit can add `1` to the score, show how many wins you have. - -```blocks -input.onButtonPressed(Button.A, () => { - game.addScore(1) - basic.showString("WINS:") - basic.showNumber(game.score()) -}) -``` -## Step 7: Staying honest - -Success! Your micro:bit can track wins! -But what about losses? -Use the ``Game`` drawer to subtract `1` from your score when you press button `B`. - -Here are all the blocks you will need: - -```shuffle -input.onButtonPressed(Button.B, () => { - game.addScore(-1) - basic.showString("LOSSES:") - basic.showNumber(game.score()) -}) -``` -Click **Compile** to move your program to the BBC micro:bit! - - -# Want to do more? - -There are [10 great projects](/projects) waiting for you. +## [NEXT: THE SCREEN](/getting-started/screen) \ No newline at end of file diff --git a/docs/getting-started/buttons.md b/docs/getting-started/buttons.md new file mode 100644 index 00000000..492cfd45 --- /dev/null +++ b/docs/getting-started/buttons.md @@ -0,0 +1,79 @@ +# Button A and button B + +### ~avatar avatar + +Buttons are great to build games! + +### ~ + +This program will show the word **ANTEATER** on the LED +screen when you press button `A`. + +```blocks +input.onButtonPressed(Button.A, () => { + basic.showString("ANTEATER"); +}); +``` + +#### ~hint + +The ``showString`` block can show letters, numbers, and punctuation +on the micro:bit screen. + +#### ~ + +Now try to unscramble these blocks in the editor so that the micro:bit +shows **BANANA** when you press button `B`. + +```shuffle +input.onButtonPressed(Button.B, () => { + basic.showString("BANANA"); +}); +``` +#### ~hint + +You can find the letter `B` by clicking the letter `A` on the +``onButtonPressed`` block. + +#### ~ + +Click **Compile** to move your program to the BBC micro:bit! + +#### Your turn! + +Can you combine these blocks so your program shows your real name +instead of **ANTEATER** when you press `A`, but _your secret agent +name_ instead of **BANANA** when you press `B`? + +### Pins + +You can also use the pins as buttons. (The pins are the holes in the +metal stripe at the bottom of the micro:bit board.) For example, hold +the ``GND`` button with one hand and touch the ``0`` pin (called +``P0``) with your other hand to tell the micro:bit you're pressing it. + +Unscramble the blocks in the editor to show a heart when you touch +pin ``P0``. + +```shuffle +input.onPinPressed(TouchPin.P0, () => { + basic.showLeds(` +. # . # . +# . # . # +# . . . # +. # . # . +. . # . .`); +}); +``` +Click **Compile** to move your program to the BBC micro:bit! + +## ~hint + +Try this experiment: find a friend and hold hands. Touch the ``GND`` +pin while your friend presses the ``P0`` pin. You should see the +heart! The electric current is going through your bodies and across +your handshake to make it happen! + +## ~ + +## [NEXT: SHAKE](/getting-started/shake) \ No newline at end of file diff --git a/docs/getting-started/coin-flipper.md b/docs/getting-started/coin-flipper.md new file mode 100644 index 00000000..32bea0ba --- /dev/null +++ b/docs/getting-started/coin-flipper.md @@ -0,0 +1,76 @@ +# The amazing coin flipper + +### ~avatar avatar + +Are you trying to choose whether to play soccer or go to the movies +instead, or which toppings to have on your pizza? Build a coin +flipping machine with the BBC micro:bit to choose for you! + +### ~ + +Here are the blocks to make your coin flipper. When you press button +`B`, the coin flipper will show either `H` for heads or `T` for tails +on the LED screen. + +```blocks +input.onButtonPressed(Button.B, () => { + if (Math.randomBoolean()) { + basic.showString("H"); + } else { + basic.showString("T"); + } +}); +``` +### ~hint + +The ``pick random true or false`` block randomly tells the ``if`` +block `true` or `false`. If the ``pick`` block picked `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 +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 +your score, and if you press `A` and `B` together, the micro:bit will +show your score. + +When you're done, your coin flipping program should look like this: + +```blocks +input.onButtonPressed(Button.B, () => { + if (Math.randomBoolean()) { + basic.showString("H"); + } else { + basic.showString("T"); + } +}); +input.onButtonPressed(Button.A, () => { + game.addScore(1); +}); +input.onButtonPressed(Button.AB, () => { + basic.showNumber(game.score()); +}); +``` + +Flip until your thumbs get tired! + +## [NEXT: ROCK PAPER SCISSORS](/getting-started/rock-paper-scissors) diff --git a/docs/getting-started/rock-paper-scissors.md b/docs/getting-started/rock-paper-scissors.md new file mode 100644 index 00000000..1f7fdcec --- /dev/null +++ b/docs/getting-started/rock-paper-scissors.md @@ -0,0 +1,206 @@ +# Rock Paper Scissors + +### ~avatar avatar + +Build a Rock Paper Scissors game with the BBC micro:bit! You can play +the game with a friend who has it on a micro:bit. You can also play +it with friends who are just using their hands. (The game is built +like a coin flipper, but with three choices instead of two.) + +### ~ + +## Step 1: Getting started + +We want the micro:bit to choose rock, paper, or scissors when you +shake it. Try creating an ``on shake`` block so when you shake the +micro:bit, it will run part of a program. + +Clear up the blocks and add the blocks below. + +```blocks +input.onGesture(Gesture.Shake, () => { + +}) +``` + +Next, when you shake the micro:bit, it should pick a random number from `0` to `2` +and store it in the variable `item`. + +Add a ``set`` block with a variable. Then add a ``pick random`` block, +and store the random number in the variable, +like this: + +```blocks +input.onGesture(Gesture.Shake, () => { + let item = 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. +We will show the right picture for that number on the LED screen. + + +## Step 2: Picking paper + +Put an ``if`` block after the ``let`` block that checks whether +`item` is `0`. Make sure the ``if`` block has an ``else if`` part +and an ``else`` part. + +Next, add a ``show leds`` block that shows a +picture of a piece of paper: + +```blocks +input.onGesture(Gesture.Shake, () => { + let item = Math.random(3) + if (item == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } else if (false) { + + } else { + + } +}) +``` + +## Step 3: A random rock + +Now we are going to add a new picture for the micro:bit to show +when another random number comes up. + +Make the ``else if`` part check if the variable `item` is `1`. +Then add a ``show leds`` block with a picture of a rock. + +```blocks +input.onGesture(Gesture.Shake, () => { + let item = Math.random(3) + if (item == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } else if (item == 1) { + basic.showLeds(` + . . . . . + . # # # . + . # # # . + . # # # . + . . . . . + `) + } else { + + } +}) +``` + +## Step 4: Suddenly scissors + +Add a ``show leds`` block with a picture of scissors to the ``else`` part: + +```blocks +input.onGesture(Gesture.Shake, () => { + let item = Math.random(3) + if (item == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + + } else if (item == 1) { + basic.showLeds(` + . . . . . + . # # # . + . # # # . + . # # # . + . . . . . + `) + } else { + basic.showLeds(` + # # . . # + # # . # . + . . # . . + # # . # . + # # . . # + `) + } +}) + +``` + +### ~hint + +You don't need to check if `item` 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! + +Click **Compile** to move your program to the BBC micro:bit! + +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 micro:bit 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 micro:bit can add `1` to the score, show how many wins you have. + +```blocks +input.onButtonPressed(Button.A, () => { + game.addScore(1) + basic.showString("WINS:") + basic.showNumber(game.score()) +}) +``` +## Step 7: Staying honest + +Success! Your micro:bit can track wins! +But what about losses? +Use the ``Game`` drawer to subtract `1` from your score when you press button `B`. + +Here are all the blocks you will need: + +```shuffle +input.onButtonPressed(Button.B, () => { + game.addScore(-1) + basic.showString("LOSSES:") + basic.showNumber(game.score()) +}) +``` +Click **Compile** to move your program to the BBC micro:bit! + + +# Want to do more? + +There are [10 great projects](/projects) waiting for you. diff --git a/docs/getting-started/screen.md b/docs/getting-started/screen.md new file mode 100644 index 00000000..64e7c64a --- /dev/null +++ b/docs/getting-started/screen.md @@ -0,0 +1,96 @@ +# Screen + +### ~avatar avatar + +There are 25 bright LEDs on the micro:bit screen. Let's use them to create some cool animations! + +### ~ + +### Happy unhappy face + +Draw an unhappy face instead of the blank screen. Click on the dots +in the second ``show leds`` block until it matches the blocks below. +Now you have an **animation** (cartoon) that shows a happy face, +then an unhappy one, then a happy one again, forever (or until +you turn off your micro:bit)! + +```blocks +basic.forever(() => { + basic.showLeds(` + . . . . . + . # . # . + . . . . . + # . . . # + . # # # . + `) + basic.showLeds(` + . . . . . + . # . # . + . . . . . + . # # # . + # . . . # + `) +}); +``` +Click **Compile** to move your program to the BBC micro:bit! + +### Your turn! + +Pile up more ``show leds`` blocks to create an animation! Create an +animation with at least 5 pictures. What does this animation show? + +```blocks +basic.forever(() => { + basic.showLeds(` + . . . . . + . # . # . + . . . . . + # . . . # + . # # # . + `) + basic.showLeds(` + . . . . . + . # . # . + . . . . . + # # # # # + . . . . . + `) + basic.showLeds(` + . . . . . + . # . # . + . . . . . + . # # # . + # . . . # + `) + basic.showLeds(` + . . . . . + . # . # . + . . . . . + # # # # # + . . . # # + `) + basic.showLeds(` + . . . . . + # . # . . + . . . . . + # . . . # + . # # # . + `) + basic.showLeds(` + . . . . . + . . # . # + . . . . . + # . . . # + . # # # . + `) +}); +``` +Click **Compile** to move your program to the BBC micro:bit! + +#### ~hint + +You can find the ``show leds`` block in the **Basic** part of the editor. + +#### ~ + +## [NEXT: BUTTONS](/getting-started/buttons) \ No newline at end of file diff --git a/docs/getting-started/shake.md b/docs/getting-started/shake.md new file mode 100644 index 00000000..5856cbc9 --- /dev/null +++ b/docs/getting-started/shake.md @@ -0,0 +1,22 @@ +# Shake + +You can find when someone is shaking the BBC micro:bit by checking its +**accelerometer** (it finds whether the micro:bit is speeding up or +slowing down). + +Unscramble these blocks in the editor to show a frownie when someone +shakes the micro:bit. (Ouch!) + +```shuffle +input.onGesture(Gesture.Shake, () => { + basic.showLeds(` +. . . . . +. # . # . +. . . . . +. # # # . +# . . . #`); +}); +``` +Click **Compile** to move your program to the BBC micro:bit! + +## [NEXT: COIN FLIPPER GAME](/getting-started/coin-flipper)