Steering in two directions

Challenge 13 of 16

All four arrows in one handler, two of them on across and two on down, and the shape can be steered anywhere on the canvas. Read the target for where the four presses take it.

Set the two missing steps.

Your code JavaScript

Set the two missing steps.

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.