A button — visuco

Challenge 10 of 12

A BLACK background and a GREY rectangle at 100 across and 140 down, 200 wide and 100 tall — so its edges run 100 to 300 across and 140 to 240 down. A click inside all four of them turns it CYAN, and a click anywhere else does nothing.

Write it.

Your code JavaScript

Write it.

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 Code it yourself

Same as the last topic, with the page left blank.

There is no starter here. The editor opens empty and a row of blocks sits above it. Click one and it drops the shape of the code in at the cursor, already indented, with the caret on the line you have to fill:

function whenMouseClicked(){

}

The When row has all eight handlers in it. The Structure row has everyFrame, if and else. Drawing and Style have the shapes and the colours. Nothing in this topic needs a word that is not on one of those buttons or in the reference drawer.

The description is the whole instruction. It tells you the background, every shape with its place and its size, and what each piece of input does. Every number you need is in it and nothing that is not — so read it as a list and work down.

Two things worth having in your head before you start.

A handler changes a variable. It never draws. Put the variable at the top with var, change it in the handler, and draw from it in everyFrame:

var lampColour = GREY;

function whenMouseClicked(){
lampColour = YELLOW;
}

function everyFrame(){
backgroundColour(BLACK);
shapeColour(lampColour);
circle(200, 180, 160);
}

And a moment is not a stretch. Something that happens once — a click, a key going down — gets a handler. Something that is true for a while — the button being held, a key being held — is asked about in everyFrame with mouseIsPressed or keyIsPressed.

There is no readout along the bottom of these pictures. Turn the grid on if you want to check where a shape has actually landed. The picture is live from the moment it loads, so try your sketch with your own mouse and keyboard before you press Run.