Position & Arrow Keys

Every shape knows its own position, and can move itself:

• self.getX() — how far from the left edge
• self.getY() — how far from the top edge
• self.setX(number) — move to a new X position
• self.setY(number) — move to a new Y position

To move a shape a little bit every frame, set its position to "wherever it already is, plus a bit":

export function update(self) {
    self.setX(self.getX() + 2);
}

Since update() runs about 60 times a second, this shape drifts steadily to the right.

Moving with arrow keys

keys tells you which arrow keys are currently held down: keys.left, keys.right, keys.up, keys.down, and keys.space. Each one is true while it's held, false otherwise.

export function update(self, keys) {
    if (keys.left) self.setX(self.getX() - 5);
    if (keys.right) self.setX(self.getX() + 5);
    if (keys.up) self.setY(self.getY() - 5);
    if (keys.down) self.setY(self.getY() + 5);
}

This moves 5 pixels every frame while a key is held down — so holding it makes the shape slide smoothly. That's what keys.left/right/up/down/space are for: continuous, held-down movement.