Mouse and keyboard together

Challenge 20 of 20

The last one: a click puts the ball where you clicked and the arrows nudge it from there, so two kinds of input drive the same two variables. Four lines are missing and every one has a comment.

Write them all.

Your code JavaScript

Write them all.

Console print() output

0 / 48 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Make It Interactive Yourself

The scaffolding comes away here. From now on the missing part is a whole line, and the comment directly above the gap says what that line has to do:

// set x to mouseX

You write the line. Everything you need has been in the last seven topics.

A few reminders, because they are the things people get wrong when nothing is filled in for them.

A handler changes a variable. It never draws. Whatever a handler draws is thrown away before anyone sees it, so put the change in a variable and let everyFrame draw from it.

Every line ends with a semicolon and every name is spelled exactly as it is elsewhere in the sketch. mouseX has a capital X. lampColour is spelled the way it is declared at the top.

A question about a round thing measures distance to its middle and compares against half its width:

distance(mouseX, mouseY, 200, 180) < 70

A question about a box is four comparisons joined with &&, using the same numbers the rectangle is drawn with:

mouseX > 120 && mouseX < 280 && mouseY > 140 && mouseY < 240

A stretch — the button being held, a key being held — is asked about in everyFrame with mouseIsPressed or keyIsPressed. A moment — the button going down, a key coming up — gets a handler.

There is one handler here you have not used yet. whenKeyTyped runs when a character key is typed, and key holds the character. It works exactly like whenKeyPressed and is in the reference drawer with the rest of them.

If a line does not work, read the message in the results panel. It gives the line number for a misspelled name, and the picture beside yours is what you are aiming at — step through it a frame at a time and find the frame where the two stop agreeing.