Bouncing inside a box

Challenge 12 of 16

A wall does not have to be the edge of the window — it is only a number you chose. This ball is trapped in the drawn box: it is 40 across and the box runs 60 to 340, so it turns 20 short of each side.

Set the two walls.

Your code JavaScript

Set the two walls.

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 Bouncing

The whole trick is a minus sign.

speed = -speed; takes whatever the speed is and makes it the opposite: 12 becomes -12, and -12 becomes 12. Nothing moves the ball backwards. The ball keeps doing exactly what it always did, adding its speed, and the speed is what changed.

What if does.

if (x > 360) { speed = -speed; } means: only do the thing in the curly brackets when the test in the round brackets is true. Every if in this topic is written for you, with a comment above it saying what it is watching for, so you never have to write one yourself. You choose the numbers.

One wall is never enough.

A ball that only checks the right-hand side turns around once and then leaves on the left, forever. Each edge you want it to come back from needs its own if — which is why the later challenges have four of them, one per side.

Use the arrows.

The turn happens in a single frame, and at normal speed you cannot see it. Step one frame at a time with the arrows either side of the playbar and watch the readout: the position stops climbing and starts falling, and nothing else on the line changed.