Lesson 5

Panda’s Race

Subject: Computer Science

Level of Difficulty: Beginner

Efforts: 45 minutes

Objectives
By the end of class, students will be able to…
● create a program in mBlock that contains multiple sprites.
● use the Motion blocks in mBlock to control a sprites movement and position.
● position sprites on the stage using X and Y coordinates.
● explain the importance of setting the position of a sprite at the start of a program.

Overview
Students create an mBlock project with multiple sprites running separate programs. Students utilize
mBlock’s coordinate plane to position and move sprites by setting specific X and Y coordinates. By
combining costume changes with motion blocks, students animate a sprite to walk across the stage.
Different values are explored to slow down and speed up a sprite’s motion.

Key Focus
● Move and position sprites on the stage in mBlock.

Pre-lesson Checklist
For Teacher:
● A computer with mBlock software installed or access to the mBlock software website
● Slides Presentation: Lesson 5 – Panda’s Race - Visual
For Student:
● A computer with mBlock software installed or access to the mBlock software website

© education.makeblock.com
1
 Standards
● CSTA 2-AP-13: Decompose problems and subproblems into parts to facilitate the design,
implementation, and review of programs.
● CSTA 2-AP-15: Seek and incorporate feedback from team members and users to refine a
solution that meets user needs.
● ISTE-1D: Students understand the fundamental concepts of technology operations, demonstrate
the ability to choose, use and troubleshoot current technologies and are able to transfer their
knowledge to explore emerging technologies.
● ISTE-5C: Students break problems into component parts, extract key information, and develop
descriptive models to understand complex systems or facilitate problem-solving.
● ISTE-6A: Students choose the appropriate platforms and tools for meeting the desired objectives
of their creation or communication.
● ISTE-6B: Students create original works or responsibly repurpose or remix digital resources into
new creations.
● ISTE-6D: Students publish or present content that customizes the message and medium for their
intended audiences.

© education.makeblock.com
2
 Lesson Plan

Warm-Up [3 min]

In the previous lesson, we created a program for Panda to walk in place using the following blocks:

Block Function
Continuously repeat the blocks nested
inside.

When a sprite has multiple costumes,

switch the sprite costume to the next
costume.
Pause the program and wait the
specified amount of time.

With our help, Panda has been able to walk in place, but Panda does not know how to run. Panda has
entered an upcoming race and needs to learn how to move forward. Let’s help Panda compete!

Hands-On [20 min]

In order to help Panda to take part in the upcoming race, we need to learn the following programming
knowledge.

Review the following concepts and blocks that will be used to help Panda run.

Moving a Sprite
© education.makeblock.com
3
 In the block area, there is a block , which can make the sprite move.

Block Area Block Function Example

Move the sprite by
10 steps to the
right. The distance
can be changed.

Have students predict how a sprite will move when the value is increased or decreased in the

block. (Students may say that the smaller the number, the slower or shorter the
distance the sprite will move. Or, the larger the number, the faster or further the sprite will move.)

Instruct the students to write their program according to the steps below:
1. Open the mBlock software. Create a new file and click the Sprites tab in the Stage Area to
ensure that we are programming the Panda sprite.
2. Find and select the appropriate blocks from the Block Area to create the following program.

3. Find and select from the Block Area. Click and drag the block to the

Script Area and attach it inside the block. Change the number of steps to “1”.

© education.makeblock.com
4
 4. Find and select from the Block Area. Click and drag the block to the Script Area

and attach it beneath the block.

5. Click the in the Stage Area to run the program and observe Panda walking.
6. Have students describe where on the stage Panda is located after the program runs for a little
while.

7. Click the in the Stage Area to stop the program. Click the to run the program again.
8. Have students describe the problem with the current program. (Note, students should observe
that Panda appears to be stuck on the right edge of the screen.)

Positioning a Sprite
When running this program, we find that when Panda runs to the right edge of the screen, but appears
to be stuck there. When you press the green flag again, Panda will remain in the same location.
Essentially “stuck”.

© education.makeblock.com
5
 To resolve this problem, we want Panda to start from the left side of the screen at the start of the

program. We can use the block to program the starting position of Panda. Then,
when we run the program, Panda will start from the starting point we specified.

Quick Tip: In the Block Area, the X and Y coordinates of the are automatically
populated based on the current position of the sprite. Therefore, you may see alternative values in this
block while viewing the programming block library.

Block Area Block Function Example

Set a specific
position for a sprite.
The X and Y
coordinates are
used to specify the
position of the
sprite in the
horizontal and
vertical plane and
can be adjusted
freely.

X & Y Coordinates
In mBlock, X and Y coordinates are used to position a sprite. The coordinate plane in mBlock has an X-
axis range of -240 to 240, from left to right. The Y-axis range is -180 to 180, from bottom to top.

© education.makeblock.com
6
 180
Y-axis
X-axis X:0, Y:0

-240 240

-180

Using the chart above, have students estimate the X and Y coordinates for placing Panda on the left
side of the stage.
Instruct the students to write their program according to the steps below:
1. In the Stage Area, click and drag the Panda sprite to the left side of the stage.
2. On the Sprites tab, we can see the specific position of the sprite.

© education.makeblock.com
7
 1 Find and select from the Block Area. Click and drag the block to the

Script Area and attach it between the block and the block. Change the

X and Y coordinates to to position Panda on the left side of the stage.

2 Click the in the Stage Area to run the program and observe Panda starting on the left side of
the stage.

3 Have students observe and explain when the runs. How many times does it run
in the program?

Add a Background and Multiple Sprites

Now that Panda knows how to walk forward, Panda is entering a race. Panda’s friends have come to
cheer for Panda along the race track.

1. Add the “Playground” background to the program.

2. Select the Sprites tab, click the button. Search “Boy” in the sprite library, select “Boy11”

© education.makeblock.com
8
 and click “OK”.

3. In the Stage Area, click and drag the “Boy11” sprite to the position shown in this example:

4. Select “Boy11” in the Sprite tab to enter the programming interface for “Boy11”.

5. Find and select the appropriate blocks from the Block Area to create the following program.

© education.makeblock.com
9
 6. Click the in the Stage Area to run the program and observe Panda’s friend cheering for the
race.

Time Out: Take a moment to review the following fundamentals for working in mBlock.
1. When adding a sprite, how do you know if a sprite has multiple costumes?
When browsing the Sprite Library, place the cursor on a sprite and watch the sprite. If a sprite
has multiple costumes, the preview will animate. Also, sprites with multiple costumes have a
small icon in the top left corner as indicated below:

After adding the sprite, the costumes can be viewed by clicking the button for
the sprite.

2. How do I change the order of sprites on the stage?

When running a program, you may find that Panda appears to be behind another sprite. The
sprites are automatically arranged in the order in which they are added. The sprites which were
added first are in the bottom layer. The sprites which were added last are in the top layer.
Click to move the sprites in the stage area and change their stacking order. The last sprite to be
moved will become the top layer.

© education.makeblock.com
10
 Panda Behind Other Sprites Panda in Front of Other Sprites

Try It [15 min]

Independent Practice
Instruct the students to complete the program, Panda’s Race. Their final project should include the
following elements:

● Include “Boy15” who cheers on Panda when the is clicked.

● Have “Boy15” change costumes while cheering on Panda.

● Panda moves across the stage when the is clicked.

● Panda is programmed to start at the left side of the stage when the is clicked.

Example Program – Panda’s Race

© education.makeblock.com
11
 Extension Activity
Challenge students with remaining time to do one or more of the following:
● Add another friend to cheer for Panda at the race.

● Have Panda say something before the start of the race.

● Trigger the start of the race using the space key.

● Change the appearance of the “Boy11” sprite using transformations from the block area.

Wrap-Up [5 min]

Assessment
1. Record a screencast of the project and ask students to submit reflection videos in Seesaw/Flipgrid
or similar platforms where students can post projects for classmates to view and comment.
2. Facilitate a “Panda Showcase” activity where students view other student’s projects. While viewing
each project, have students comment on the following:
a) Share one thing that you found interesting about the project.
b) Share one recommendation for improving the project.
3. Facilitate a class discussion on what students observed from viewing the other students’ projects.
4. Have students reflect on improvements and changes they would make based on the feedback
received.
Alternative Assessment Ideas
● Share your project with a classmate, parent or sibling and ask for feedback.

© education.makeblock.com
12
 Quiz

1. Which block category does belong to?

A. Events B. Control

C. Looks D. Motion

Answer: D
2. Which of the following blocks can position the sprite on specific coordinates in the stage area?

Answer: B
3. Which sprite runs the fastest in the following programs?

Answer: B

© education.makeblock.com
13