Course F - Conditionals 2 - Conditionals with Rock Paper Scissors Game

This second lesson on conditions will deal with a more complex if statement.

  • Computer-science
  • Conditionals
Print lesson
  • Edades 10+
  • 65+ minutos
  • Javascript Blocks

Introduction

The first lesson in this series about conditionals, 'CONDITIONALS WITH THE WEATHER PREDICTOR', focused on a basic 'if...then...else' logic block. If you have not covered this lesson yet or students had difficulties with it, try covering this material again.

Our second lesson will deal with a more complex if statement. This allows us to test for more than two outcomes. We will do this while playing rock-paper-scissors with the micro:bit. By the end we will have a working game that even keeps score!

Our micro:bit course lessons are tailored to apply knowledge obtained from the Code.org CS Fundamentals. Before students begin these Course Lessons, we encourage students to first complete all CS Fundamentals as a prerequisite. Students should be familiar with conditionals from Code.org CS Fundamentals.

Teacher Guide

Open

Activity

What you'll need

  • 1 - micro:bit
  • 1 - USB cable
  • 1 - AAA battery pack (optional)
  • 2 - AAA batteries (optional)

Documentation

if (true) {

} else if (false) {

} else {

}

if

Conditionally run code depending on whether a Boolean condition is true or false.


let item = 0
item = 0
            

setItem

Use an equals sign to make a variable store the number or string you say.

let item = Math.random(5)

random

Return a pseudorandom number between 0 and limit

basic.showIcon(IconNames.Heart)

showIcon

Shows the selected icon on the LED screen

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

onShake

Start an event handler (part of the program that will run when something happens). This handler works when you do a gesture (like shaking the micro:bit).

4 steps

Guided Practice

We will make instructions or code online for the micro:bit. Next, go to https://makecode.microbit.org


let RandomNumber = 0
input.onGesture(Gesture.Shake, () => {
    RandomNumber = Math.random(3)
    if (RandomNumber == 0) {
        basic.showIcon(IconNames.SmallSquare)
    } else if (RandomNumber == 1) {
        basic.showIcon(IconNames.Square)
    } else {
        basic.showIcon(IconNames.Scissors)
    }
})
input.onButtonPressed(Button.A, () => {

})
input.onButtonPressed(Button.B, () => {

})
        

The micro:bit shows the icons: rock, paper, or scissors on shake. Shake the micro:bit on the simulator vigorously or press the shake button to trigger the event. You should see an icon displayed after shaking.

Shaking tells the micro:bit to choose either 0, 1, or 2 randomly.

We will make decisions based on the value.

  • if (RandomNumber = 0) >> show rock
  • if (RandomNumber = 1) >> show paper
  • if (RandomNumber = 2) >> show scissors

NOTE: The unused blocks at the bottom and to the side of the code, are meant to be used in the challenges.

The finished code is available here.

Challenges

Challenge 1

Can you track the times you win against the micro:bit?

Hint: Place your blocks in the event handler for on button A pressed. You will need to initialize(create) a variable in the on start event handler to store your score.

View code

let Score = 0
let RandomNumber = 0
input.onGesture(Gesture.Shake, () => {
    RandomNumber = Math.random(3)
    if (RandomNumber == 0) {
        basic.showIcon(IconNames.SmallSquare)
    } else if (RandomNumber == 1) {
        basic.showIcon(IconNames.Square)
    } else {
        basic.showIcon(IconNames.Scissors)
    }
})
input.onButtonPressed(Button.A, () => {
    Score += 1
})
input.onButtonPressed(Button.B, () => {

})
Score = 0
          

The finished code is available here.

Challenge 2

What if you lose? Can you subtract from your score when you lose?

Hint: Place your blocks in the event handler for on button B pressed.

View code

let Score = 0
let RandomNumber = 0
input.onGesture(Gesture.Shake, () => {
    RandomNumber = Math.random(3)
    if (RandomNumber == 0) {
        basic.showIcon(IconNames.SmallSquare)
    } else if (RandomNumber == 1) {
        basic.showIcon(IconNames.Square)
    } else {
        basic.showIcon(IconNames.Scissors)
    }
})
input.onButtonPressed(Button.A, () => {
    Score += 1
})
input.onButtonPressed(Button.B, () => {
    Score += -1
})
Score = 0
          

The finished code is available here.

Challenge 3

How can we show our score?

Hint: Place your blocks in the event handler for on button A+B pressed.

View code

let Score = 0
let RandomNumber = 0
input.onGesture(Gesture.Shake, () => {
    RandomNumber = Math.random(3)
    if (RandomNumber == 0) {
        basic.showIcon(IconNames.SmallSquare)
    } else if (RandomNumber == 1) {
        basic.showIcon(IconNames.Square)
    } else {
        basic.showIcon(IconNames.Scissors)
    }
})
input.onButtonPressed(Button.A, () => {
    Score += 1
})
input.onButtonPressed(Button.B, () => {
    Score += -1
})
input.onButtonPressed(Button.AB, () => {
    basic.showNumber(Score)
})
Score = 0
          

The finished code is available here.

Independent Practice

Create your own six-sided die with the micro:bit and create an adventure board game. This die could be custom. If you roll a one, what happens?

Example - If you roll one, you meet find some treasure.

Hint: You will need to increase the RandomNumber and create a longer if block.

Quiz

Use these questions to reflect on the activity and challenges.

Question 1

Write the part of the code in the activity that randomly chooses a number from 0 to 2 and stores the value inside a variable called 'RandomNumber'.

Show answer

NOTE: We highlight the block of code in yellow that stores the RandomNumber value inside a variable called RandomNumber. The second part of the code randomly returns a number from 0-3.

Question 2

If the variable 'RandomNumber' is equal to 0, what icon will appear?

Show answer

The code would show Rock.

Question 3

If the variable 'RandomNumber' is NOT equal to 0, what icons could appear?

Show answer

The code would show Scissors and Rock.

Question 4

If the variable 'RandomNumber' is NOT equal to 0 or 1, what icon will appear?

Show answer

The code would show Scissors.