{% trans 'Watch it here now.' as msg_meta_extra} Bounce Around - Animation - CS First Skip to content

Please update your browser

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

arrow_back Bounce Around

Transcript

In this add-on, you'll make the sprite bounce around the screen while it's dancing.

Right now, the sprite dances in one spot.

To make it move, click on the Motion menu, and add a move 10 steps block into the forever loop.

Great, the sprite starts moving as it's dancing.

But what happens when it reaches the edge of the screen?

The sprite gets stuck at the edge of the screen because it can't move any further.

To fix this, add an if on edge, bounce block into your forever loop.

Nice, the sprite now turns around and moves the other way when it gets to the edge.

There's a problem, though, the sprite is upside down.

To fix this, add a set rotation style left-right block to your block stack, right under the green flag.

This tells the computer to create a mirror image of the sprite, instead of flipping it upside down when it bounces.

Click the green flag again to see what happens.

The sprite now bounces around and dances without flipping upside down.

However, the sprite doesn't move smoothly.

Take a look at the block stack to see why.

Remember, the computer runs all the blocks in your stack in order.

The sprite changes costumes, then waits, then moves 10 steps, then bounces if there's a wall.

It repeats those steps over and over again.

The sprite doesn't move smoothly because it dances then moves, instead of dancing and moving at the same time.

To make the sprite do two things at the same time, add another block stack.

The second block stack will also start when the green flag is clicked, and will have all the blocks that make the sprite move, like this.

Now, there are two block stacks.

The first one only makes the sprite dance, and the second only makes the sprite move.

The two stacks run at the same time.

Test your code.

Wow, the sprite now dances and moves at the same time, but it's going really fast.

To slow it down, change the value in the move block to a smaller number.

This will make the sprite move less distance each time the loop runs.

Experiment with this value until you find one you like.

Finally, if your sprite is only bouncing side to side, click the turn blocks a few times to make it bounce at more interesting angles.

Now it's your turn.

Add another block stack to your program to make the sprite bounce around while it's dancing.

Experiment with the value in the move block, until the sprite moves at the speed you like.

And finally, click the turn block to control the angle of your sprite's bounce.

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.
arrow_backward Back
Next arrow_forward
Instructions
  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!