pxt-calliope/docs/reference/js/lessons/bounce-image/challenges.md

91 lines
3.0 KiB
Markdown
Raw Normal View History

2016-03-26 00:47:20 +01:00
# bounce image challenges
Coding challenges for the bounce image tutorial. #docs
## Before we get started
Complete the following guided tutorial:
* [tutorial](/microbit/lessons/bounce-image/tutorial)
At the end of the tutorial, click `keep editing`. Your code should look like this:
```
basic.forever(() => {
basic.showAnimation(`
# . . . . . # . . . . . # . . . . . # . . . . . #
# . . . . . # . . . . . # . . . . . # . . . . . #
# . . . . . # . . . . . # . . . . . # . . . . . #
# . . . . . # . . . . . # . . . . . # . . . . . #
# . . . . . # . . . . . # . . . . . # . . . . . #
`, 200)
})
```
### Challenge 1
### @video td/videos/bounce-image-1
Now, let's add frames to reverse the animation so it looks like the bar is bouncing off the right edge of the display.
```
basic.forever(() => {
basic.showAnimation(`
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
`, 200) // ***
})
```
* Run the code to see if it works as expected.
### Challenge 2
Let's add a condition for on shake!
```
basic.forever(() => {
basic.showAnimation(`
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
`, 200)
})
input.onGesture(Gesture.Shake, () => {
}) // ***
```
**Challenge 3**
### @video td/videos/bounce-image-2-3
When the BBC micro:bit is shaken we want to show a new animation. Here is an example, but you can create your own. Be creative!
```
basic.forever(() => {
basic.showAnimation(`
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
`, 200)
})
input.onGesture(Gesture.Shake, () => {
basic.showAnimation(`
. . . . . . . . . . # # # # # . . . . . . . . . .
. . . . . . # # # . # # # # # . # # # . . . . . .
. . # . . . # # # . # # # # # . # # # . . . # . .
. . . . . . # # # . # # # # # . # # # . . . . . .
. . . . . . . . . . # # # # # . . . . . . . . . .
`, 200) // ***
})
```
* Run the code to see if it works as expected.