Keyboard Controls

Now the player takes over. Listen for arrow keys, move a square, and you have the core of every arcade game ever made.

window.addEventListener('keydown', e => …)

1. 1Set up

   Add a canvas and store the player's x and y.

   let px = 180
   let py = 90

2. 2Listen for keys

   Handle the four arrow keys with e.key.

3. 3Draw every frame

   Use a loop to redraw the player at its new spot.

4. 4Play

   Press Run, click inside the preview, then use the arrow keys.