Rock Paper Scissors

Introduction

Animation of the Rock Paper Scissors game

Use the accelerometer and the screen to build a Rock Paper Scissors game that you can play with your friends!

Step 1

Add a ||input:on shake|| block to run code when you shake the Calliope mini.

input.onGesture(Gesture.Shake, () => {

})

Step 2

Add a hand variable and place the ||variables:set hand to|| block in the shake event.

Step 3

Add a ||math:pick random|| block to pick a random number from 1 to 3 and store it in the variable named hand.

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

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.

let hand = 0;
input.onGesture(Gesture.Shake, () => {
    hand = Math.randomRange(1, 3)
    if (hand == 1) {
        basic.showLeds(`
            # # # # #
            # . . . #
            # . . . #
            # . . . #
            # # # # #
            `)
    }
})

Step 5

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 Calliope mini simulator

Step 6

Click the (+) button to add an ||logic:else|| section.

let hand = 0;
input.onGesture(Gesture.Shake, () => {
    hand = Math.randomRange(1, 3)
    if (hand == 1) {
        basic.showLeds(`
            # # # # #
            # . . . #
            # . . . #
            # . . . #
            # # # # #
            `)
    } else {

    }
})

Step 7

Add a ||basic:show leds|| block inside the ||logic:else||. Make a picture of a scissors in the LEDs.

let hand = 0;
input.onGesture(Gesture.Shake, () => {
    hand = Math.randomRange(1, 3)
    if (hand == 1) {
        basic.showLeds(`
            # # # # #
            # . . . #
            # . . . #
            # . . . #
            # # # # #
            `)
    } else {
        basic.showLeds(`
            # # . . #
            # # . # .
            . . # . .
            # # . # .
            # # . . #
            `)
    }
})

Step 8

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

Step 9

Get one more ||basic:show leds|| block and put it in the ||logic:else if||. Make a picture of a rock in the LEDs.

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

Click on the SHAKE button in the simulator and check to see that each image is showing up.

Shaking a Calliope mini simulator

Step 11

If you have a Calliope mini, click on |Download| and follow the instructions to get the code onto your Calliope mini. Your game is ready! Gather your friends and play Rock Paper Scissors!