Keyboard Input

Here's What You'll Build

A spaceship that flies around the screen using arrow keys. Your first interactive character.

The Concept

Keyboard input lets the player control what happens on screen. JavaScript provides two events: keydown (a key was pressed) and keyup (a key was released). To handle smooth movement, we track which keys are currently held down using an object that maps key names to true/false.

This is different from the mouse input in Lesson 1.1. Mouse input gives positions directly. Keyboard input gives directions -- the player presses a key, and we decide how that translates to movement.

The Math Behind It

Direction vectors describe which way something is moving. Pressing the right arrow means moving in the positive x direction: (1, 0). Pressing up means negative y: (0, -1). Pressing both means diagonal: (1, -1).

Diagonal speed correction: If moving right at speed 5 and up at speed 5 simultaneously, the ship actually moves at speed 7.07 (the hypotenuse). To fix this, we normalize the direction vector -- divide both components by the vector's length so the total speed stays consistent.

Building with Claude

Step 1: Create the Ship

Create a single HTML file called spaceship.html. Dark background
(#0d0a1a), centered 800x600 canvas. Draw a small triangular spaceship
shape in neon green (#39ff14) at the center of the canvas. The triangle
should point upward. No movement yet.

Step 2: Add Keyboard Movement

Update spaceship.html so the ship moves with arrow keys. Track which keys
are currently pressed using keydown and keyup events. Move the ship 4
pixels per frame in the direction of the pressed arrow keys. The ship
should be able to move diagonally when two arrow keys are held at the
same time. Prevent the ship from leaving the canvas boundaries. Use
requestAnimationFrame for the animation loop.

Why this prompt works: We specified the exact control scheme (arrow keys), the speed (4 pixels), and the diagonal behavior. We also mentioned boundary clamping, which prevents the ship from disappearing off-screen. These details prevent Claude from making assumptions that differ from what we want.

Step 3: Polish

Improve spaceship.html: 1) Rotate the ship triangle to face the
direction it is moving. 2) Add a particle trail behind the ship -- small
fading dots that appear at the ship's position and slowly disappear.
3) Add screen wrapping so when the ship exits one side, it appears on
the opposite side. 4) Display the ship's x,y position in small text at
the top of the canvas.

Understanding What Claude Built

Key State Tracking: The code creates an object like {ArrowUp: false, ArrowDown: false, ...}. On keydown, it sets the key to true. On keyup, it sets it back to false. Each frame, the animation loop checks which keys are currently true and moves accordingly.

Screen Wrapping: Instead of clamping the ship to the canvas edges, wrapping teleports it to the opposite side. If ship.x > canvas.width, set ship.x = 0. This creates the classic arcade feel where the world loops around.

Rotation: The Math.atan2(dy, dx) function calculates the angle from the movement direction. The ship triangle is rotated using ctx.rotate() to face that angle. When no keys are pressed, the ship keeps its last facing direction.

AIArtificial Intelligence Skill: Describing Interactive Behavior

This lesson demonstrated how to describe behavior precisely. "Moves with arrow keys" is vague. "Moves 4 pixels per frame when arrow keys are held, supports diagonal movement, wraps at screen edges" is precise enough for Claude to build exactly what you want.