A bouncing ball

Challenge 10 of 20

The turning-around lines are written for you, because they are the fiddly part. What is missing is the ordinary pair: the step that moves it and the shape that shows it.

Write both.

Your code JavaScript

Write both.

Console print() output

0 / 60 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Animate It Yourself

You already know all of this.

Every line this topic asks for is one you have read many times: a step (x = x + speed;), a limit (x = limit(x, 40, 360);), a shape (circle(x, y, 80);) or a colour (shapeColour(CYAN);). The comment above each empty line says what it needs to do. Nothing new arrives.

Order is not decoration.

Inside everyFrame the lines run top to bottom, every frame. The background has to come first or it paints over everything else. A colour has to be chosen before the shape that uses it. A limit has to come after the step that made the number too big, not before it.

The background is what wipes the last frame.

Leave it out and the frame you drew before is still there, so a moving shape smears across the window instead of moving. Challenge 7 shows you exactly that — run it before you fix it.

Read the error panel.

A typed line can be wrong in ways a number never was: a missing bracket, a misspelled name, a capital letter in the wrong place. The panel under the canvases names the line and says what went wrong. It is quicker than staring at the code.