Keyboard Input

Here we must again ask

An animation becomes a game when the player can control it. The rendering module gives us IS_KEY_DOWN, which tells us whether a key is being held.

IS_KEY_DOWN

IS_KEY_DOWN takes the name of a key as a string. It returns true if that key is held down right now, and false if not.

IMPORT_RENDERING_MODULE()

REPEAT UNTIL false {
    CLEAR_SCREEN()
    DRAW_RECT(0, 0, 400, 400, "#e0d4f5")

    IF (IS_KEY_DOWN("a")) {
        DRAW_CIRCLE(200, 200, 40, "#453465")
    }

    CLOCK_TICK(60)
}

The circle appears while the A key is held, and disappears when it is released.

This is not the same as INPUT. INPUT stops the program and waits for a typed answer. IS_KEY_DOWN never waits. It checks the keyboard at that moment and returns right away, so the animation keeps running.

Click on the page first if nothing happens. The browser only sends key presses to the page that has focus.

Key Names

A key name is the name the browser uses for the key.

Key names are not case sensitive, so "A" and "a" mean the same key. This is one of the few places in CSP where case does not matter.

The arrow keys and the space bar will not scroll the page while a program is running, so they are safe to use in a game.

Moving a Square

To move something, we check the keys every frame and change its position. We use a velocity variable, vx, and decide what it should be each frame.

IMPORT_RENDERING_MODULE()

x ← 180
vx ← 0
speed ← 4

REPEAT UNTIL false {
    // Decide the velocity from the keys
    vx ← 0
    IF (IS_KEY_DOWN("ArrowLeft") OR IS_KEY_DOWN("a")) {
        vx ← 0 - speed
    }
    IF (IS_KEY_DOWN("ArrowRight") OR IS_KEY_DOWN("d")) {
        vx ← speed
    }

    // Move
    x ← x + vx

    // Stay on the canvas
    IF (x < 0) {
        x ← 0
    }
    IF (x > 360) {
        x ← 360
    }

    // Draw
    CLEAR_SCREEN()
    DRAW_RECT(0, 0, 400, 400, "#e0d4f5")
    DRAW_RECT(x, 180, 40, 40, "#453465")
    CLOCK_TICK(60)
}

Every frame, vx is reset to 0, so when no key is held the square stops. We use OR so that either the arrow keys or A and D work. If both left and right are held at the same moment, the second IF replaces the first value, and the square goes right.

The variables x, vx, and speed are all created before the loop, as always.

Moving in Four Directions

Nothing stops us from adding a second axis. We use a separate pair of keys for y.

IMPORT_RENDERING_MODULE()

x ← 180
y ← 180
speed ← 4

REPEAT UNTIL false {
    IF (IS_KEY_DOWN("ArrowLeft")) {
        x ← x - speed
    }
    IF (IS_KEY_DOWN("ArrowRight")) {
        x ← x + speed
    }
    IF (IS_KEY_DOWN("ArrowUp")) {
        y ← y - speed
    }
    IF (IS_KEY_DOWN("ArrowDown")) {
        y ← y + speed
    }

    CLEAR_SCREEN()
    DRAW_RECT(0, 0, 400, 400, "#e0d4f5")
    DRAW_RECT(x, y, 40, 40, "#453465")
    CLOCK_TICK(60)
}

Pressing up subtracts from y, because y gets smaller as we go up the screen.

Held Versus Pressed

IS_KEY_DOWN is true for every frame that the key is held, not just the first one. That is perfect for walking, but sometimes we want something to happen only once per press, such as firing a shot. To do that, we remember whether the key was down on the previous frame.

IMPORT_RENDERING_MODULE()

count ← 0
wasDown ← false
isDown ← false

REPEAT UNTIL false {
    isDown ← IS_KEY_DOWN("Space")

    IF (isDown AND NOT wasDown) {
        count ← count + 1
    }
    wasDown ← isDown

    CLEAR_SCREEN()
    DRAW_RECT(0, 0, 400, 400, "#e0d4f5")
    DRAW_TEXT(count, 20, 20, 32, "#453465")
    CLOCK_TICK(60)
}

The counter goes up once each time the space bar goes from up to down. Holding it does not keep counting. We check for isDown AND NOT wasDown, which means “down now, but not down last frame.”

Practice

• Make the square move faster while the Shift key is held.
• Draw a circle that follows the arrow keys, and leaves a trail by not clearing the screen. Press Space to clear it by calling CLEAR_SCREEN.
• Make a counter that goes up on Up and down on Down, once per press.

Next: A Very Simple Platformer