Hold to charge

Challenge 6 of 16

A value that only grows while a key is down is a charge meter, and how full it gets is up to the person holding the key. Nothing else in the sketch changes at all.

Set how fast it fills.

Your code JavaScript

Set how fast it fills.

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 Key Up, Key Down

In the last topic every key press was a tap: down and up in the same instant. Hold a key instead and there is a stretch in the middle, and that stretch is what this topic is about.

Two handlers mark the ends:

function whenKeyPressed(){
speed = 8;
}

function whenKeyReleased(){
speed = 0;
}

And one value is true the whole way through:

keyIsPressed

Ask about that in everyFrame, not in a handler. A handler runs once, at a moment; a stretch has to be asked about on every frame, because that is what "the whole time" means.

if (keyIsPressed == true) {
x = limit(x + 9, 40, 360);
}

Hold the key and the ball moves on every frame — smoothly, rather than in jumps. That is how everything you have ever steered actually works, and it is the first thing in this course that feels properly like a game.

The other half of holding is charging:

if (keyIsPressed == true) {
charge = limit(charge + 14, 0, 300);
}

The longer the hold, the bigger the number. Then the release reads it:

function whenKeyReleased(){
speed = charge / 8;
charge = 0;
}

Hold longer, shoot further. Two lines.

There is a challenge here that is worth staring at. It is the charge meter again, driven by taps instead of holds, and the meter never moves at all — because a tap presses and lets go in the same instant, so there is no stretch to measure. Nothing is broken. There is simply nothing there.

keyIsPressed says a key is down. keyCode says which one. Together they say a particular key is being held:

if (keyIsPressed == true) {
if (keyCode == RIGHT) {
x = limit(x + 10, 40, 360);
}
}

The readout at the bottom shows both, so you can watch held go true on the down marker and false on the up one.

The last challenge goes back to the mouse and asks a different kind of question: how far the pointer is from a shape. Answering that properly — did I actually hit the thing — is the next topic.