Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more.


In this add-on, you'll learn how to make the dancing sprite move around the stage, using the arrow keys on the keyboard.

First, click Events and add a when space key pressed block.

This block, like the when green flag clicked block is an event block.

Event blocks allow the user to perform a specific action to make something happen in the program.

For example, in your program, the when green flag clicked block allows the user to start the animation by clicking the green flag.

In this add-on, you'll allow the user to press the left arrow to move left, the right arrow to move right, and so on.

Now, program the right arrow.

Change the space option to right arrow by using the drop-down menu.

Next, click on motion, and add a change x by 10 block to the stack.

Test your code by pressing the right arrow.

Great, the sprite moves ten steps to the right when the right arrow is pressed.

The change x by 10 block moves the sprite along the imaginary coordinate plane on the stage.

As shown here, positive x coordinates move the sprite right, and negative x coordinates move it left.

The positive y direction is the same as moving up.

The negative y direction is the same as moving down.

To build the code that makes the sprite move left when the left arrow key is pressed, add another when space key pressed block and change it to say when left arrow key pressed.

Then, add a change x by ten block to the stack.

Remember, negative numbers move the sprite left, so change the ten in the white bubble to a negative number, like negative ten.

Now, test your code by pressing the left arrow.

The sprite should move left.

Remember, you can always experiment with the values in the white bubbles to make your sprite move a small distance, like ten steps, or a big distance, like 20, 50 or 100 steps.

You have learned everything you need to know to build this code for the up and down arrow keys.

Just keep in mind that you need the change y by blocks instead of the change x by blocks to make the sprite move up and down.

Now it's your turn.

Choose an Add-On

Where's the party?

Add a background and a music track for your dancer.

Bounce Around

Make the sprite bounce around the stage while it dances.

Dance Team

Create a party with dancing clones!

Controlled movement

Make the sprite move using the arrow keys.

Add More Dancers (Part 1 of 2)

Add another sprite to your dance, and learn how to draw your own panda sprite.

Add More Dancers (Part 2 of 2)

Add another sprite to your dance, and learn how to draw your own panda sprite.

Interpretive Dance

Create your own dance that tells a story.

  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!