Three keys, three colours

Challenge 11 of 16

Line up as many else ifs as you like and the first true one wins, so three keys can pick between three colours. This is a colour picker with a keyboard instead of buttons.

Set the three colours.

Your code JavaScript

Set the three colours.

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 Keys

The keyboard sends events too, and the block for them is whenKeyPressed:

function whenKeyPressed(){
x = x + 70;
}

That runs when any key at all goes down. Which is fine until you want the arrows to do different things, and then you need to know which key it was.

keyCode holds a number for the key that went down, and the keys without letters have names you can compare against:

LEFT RIGHT UP DOWN SPACE ENTER

So:

function whenKeyPressed(){
if (keyCode == RIGHT) {
x = x + 80;
}
}

Now only the right arrow moves anything. The readout at the bottom of the picture shows the number keyCode is holding, so you can see for yourself that RIGHT is 39 and SPACE is 32. The name is just a friendlier way of writing the number.

Line the questions up with else if and only the first true one wins, which is what you want here because a key cannot be two keys at once:

if (keyCode == RIGHT) {
x = x + 60;
} else if (keyCode == LEFT) {
x = x - 60;
} else if (keyCode == UP) {
y = y - 80;
} else if (keyCode == DOWN) {
y = y + 80;
}

Remember that up the screen is a smaller number, so UP takes away.

Letter keys are different. They have a character, and key holds it:

if (key == "r") {
lampColour = RED;
}

Note the quote marks. key holds a word one letter long, not a number, so it is compared against a word.

One thing worth doing early. A shape that moves 100 for every press will walk off the canvas after four of them, and limit is how you stop that:

x = limit(x + 100, 40, 340);

Keep it between 40 and 340 whatever happens.

The keys can drive anything, not only positions — a size, a colour, a speed. A key that sets a speed is worth a look: one press, and the shape keeps going until another press changes its mind, because everyFrame is doing the moving.

The last challenge has a second handler in it. A keystroke has two ends like a click does, and whenKeyReleased runs at the far one. That is the next topic.