Keyboard Input
Input / Output · Arrow keys, Space, WASD controls using event listeners.
Keyboard Input
What it is
Browsers fire keydown and keyup DOM events whenever the user presses or releases a key. You register handlers with addEventListener('keydown', handler). Each event has a .key property (the human-readable key name) and .code (the physical key location).
Why it matters
Keyboard input is the primary way the player drives the game. Low-latency, smooth, simultaneous-key-aware input is what separates good controls from clunky ones.
How GateGame implements it
Player movement in Maze of Shadows uses WASD via DOM event listeners on keydown and keyup. The handler sets boolean flags (keys.w = true), and the game’s update() reads those flags each frame — this is what allows holding two keys at once (e.g. move right while jumping) instead of one-input-per-frame.
Code Example
// Listener pattern: keydown sets a flag, update() reads it
const keys = {};
document.addEventListener('keydown', (e) => { keys[e.key.toLowerCase()] = true; });
document.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; });
// In Player.update() each frame
if (keys['w']) { this.vy -= jumpForce; }
if (keys['a']) { this.x -= speed; }
if (keys['d']) { this.x += speed; }
Key Takeaway
Set flags in the event handler, read flags in
update(). This decouples input timing from game-loop timing and supports simultaneous keys.