Course E - Functions 2 - Functions for a Digital Pet

This lesson introduces the concept of functions.

  • Computer science
  • functions
Print lesson
  • 年龄 9+
  • 65+ 分钟
  • JavaScript Blocks

介绍

If you have forgotten what functions are and need a review, please revisit the introduction in the lesson 'A SIMPLE FUNCTION FOR A SUPERHERO'. This was the first lesson in this series on functions.

Our current lesson builds upon 'A SIMPLE FUNCTION FOR A SUPERHERO' in two ways.

First, the importance of using functions to organize code is reiterated. Functions allow us to organize code in logical ways. We can arrange code so that it is easier to "see" the real life objects we want to simulate. Here that is demonstrated again with the pets actions.

Second, we build upon the previously introduced benefit of reusing code. Functions allow us to easily reuse code. In this lesson learners are challenged a bit more on this concept. They are asked to identify which part of the code would be best suitable for a function. This is in Challenge 3.

我们的micro:bit课程是根据Code.org CS 基础课程知识应用而量身定做的。 Before students begin this lesson, they are encouraged to first complete all CS Fundamentals as a prerequisite. Students should be familiar with functions from Code.org CS Fundamentals.

Background

The teacher is highly encouraged to read below and complete the following:

教学指南

打开

课堂活动

你将需要这些:

  • 1块micro:bit
  • 1根USB线
  • 1个AAA电池组(可选)
  • 2节AAA电池(可选)

编写文本


function doSomething()  {
    basic.showString("Hello!")
}

doSomething()
            

function

A function lets you create a portion of code that you can reuse in your program.


for(let i = 0; i < 5; ++i) {
  basic.showNumber(i)
}
            

for

按规定次数运行部分程序。


basic.showLeds(`
    . . . . .
    . . . . .
    . . # . .
    . . . . .
    . . . . .
    `)
            

showLeds

在LED屏幕上显示图片。


input.onButtonPressed(Button.A, () => {

})
            

当按钮被按下

Start an event handler (part of the program that will run when something happens, like when a button is pressed)

basic.showIcon(IconNames.Heart)

显示图标

在LED屏幕上显示所选的图标

basic.pause(100)

pause

Pause the program for the number of milliseconds you say. -


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

})
            

onGesture

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).

5 steps

Designing Our Pet

Draw three 5 by 5 grids and color in the boxes (representing LEDs) to show what your pet will look like awake, asleep, and drinking.

Here we have chosen the following but you can do anything you like.

  1. Smiley Face = awake
  2. Z displaying 4 times = asleep (When button A is pushed)
  3. Water Drop displays 4 times = drinking (When button B is pushed)

Our pet, Herbert, will be a happy little guy when he is awake so we display a smiley face.

Sometimes we need to sleep and Herbert should too. We will make him sleep by petting him. Pressing button A pets Herbert and ZZZZ (Z 4 times blinking) will appear to show he is sleeping.

Then he goes quiet (LEDs off) as he dreams. To wake him, we give him some water. Herbert loves water so we can give it to him whenever we like. This will wake him and also return him to a happy state again. We will give him water by pressing button B. A water drop will appear to show he is drinking and then he wakes up again and shows a smiley face again!

指导练习

我们将在网上给出micro:bit的教程或代码。接下来,去到:makecode.microbit.org

input.onButtonPressed(Button.B, () => {
    DRINKING()
})
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
input.onGesture(Gesture.Shake, () => {

})
function EXERCISE()  {

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

})
AWAKE()

Herbert has three functions he does. He is either awake, asleep, or drinking. We have a function for each of these actions.

On start, we call the function that displays a happy face. Herbert is happy and awake.

Pressing button A calls a function that displays a flashing Z. This means Herbert is sleeping.

Pressing button B calls a function that displays a flashing waterdrop. This means Herbert is drinking.

The only real difference between the ASLEEP and DRINKING functions is at the end. At the end of the DRINKING function, we call the AWAKE function again and Herbert shows his happy face. Herbert likes water.

Pauses and clearing the screen help us create a blinking effect. The for and repeat loops also contribute to make the blinking effect.

The details of how the two functions(ASLEEP, DRINKING) work is not really important to this lesson. Placing the calls to those functions and understanding how to build our own function will be our focus.

The finished base code without challenges completed is available here.

注释:代码底部未使用的积木块将会在挑战赛里面用到。

Function Challenges

挑战1

Can you program Herbert to exercise when both buttons A and B are pushed?

Hint: Use the exercise function, roller skate icon, and A+B event handler.

查看代码
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
input.onButtonPressed(Button.B, () => {
    DRINKING()
})
input.onButtonPressed(Button.AB, () => {
    EXERCISE()
})
function EXERCISE()  {
    basic.showIcon(IconNames.Rollerskate)
}
input.onGesture(Gesture.Shake, () => {

})
AWAKE()

The finished code is available here

挑战2

Can you program Herbert to do a new action on shake?

查看代码
input.onButtonPressed(Button.B, () => {
    DRINKING()
})
function Silly()  {
    basic.showIcon(IconNames.Rollerskate)
}
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
input.onButtonPressed(Button.AB, () => {
    EXERCISE()
})
input.onGesture(Gesture.Shake, () => {
    Silly()
})
function EXERCISE()  {
    basic.showIcon(IconNames.Rollerskate)
}
AWAKE()

The finished code is available here

挑战3

If you remember, one benefit of functions is writing code and then being able to reuse it easily. Look at the ASLEEP and DRINKING functions. What code is the same? Can you make a new function for this repeating code? Call your function BLINKING.

查看代码
input.onButtonPressed(Button.B, () => {
    DRINKING()
})
function BLINKING()  {
    basic.pause(500)
    basic.clearScreen()
    basic.pause(500)
}
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        BLINKING()
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
input.onButtonPressed(Button.AB, () => {
    EXERCISE()
})
input.onGesture(Gesture.Shake, () => {
    Silly()
})
function EXERCISE()  {
    basic.showIcon(IconNames.Rollerskate)
}
function Silly()  {
    basic.showIcon(IconNames.Rollerskate)
}
AWAKE()

The finished code is available here

独立练习

Create your own micro:bit pet with 3 function calls. Inserting icons or changing LEDs can create a new pet. Be prepared to tell a story about the new pet and why it does the actions you choose.

Starting code can be found here.

问答

在活动和挑战上使用这些问题。

问题 1

What is one benefit of using functions?

显示答案

Any of these is an acceptable answer

  1. Functions allow us to repeat code without retyping it so code is smaller.
  2. If we need to make changes, we only have to change our code in one place.
  3. Functions allow us to organize our code better.

问题 2

How do I make the code in a function "go" or "start"?

显示答案

Call a function and the code inside will "go"

问题 3

Think of something that could use functions and list what you could put in functions. An example might be a car.

显示答案

Car functions

  • Move
  • Stop
  • Turn