Input Systems

Keyboard state that the loop can read every frame

Chapter goal

Capture keydown/keyup into a keys map, then move the player from the game loop — never only inside event handlers.

keydown / keyup

keys map

preventDefault

focus & canvas

How to do it

1
Track pressed keys
const keys = {}; on keydown set keys[e.code]=true; on keyup set false. The loop reads keys['ArrowLeft'] etc. each frame.
2
Move from the loop
If left is held, player.x -= speed. Holding a key generates one keydown then repeats — the map approach makes continuous motion reliable.
3
Clamp to the world
After moving, clamp x/y so the entity stays on the canvas. Later collision replaces simple clamps.

Live lab

Solution code updates with sliders. Tinker is your sandbox. Play runs whichever document you launch.

Live settings

Every slider injects into the engine constants for this chapter.

Move speed4.00

110

Player size30

1648

Slide ease0.18

0.050.4

Edge bounce0.35

Type-along practice

Photo layout

Input Systems

1 / 78 lines

The chapter engine script is prewritten below. Type it line by line — each line explains why it belongs there. Matching a line advances automatically; Enter re-checks if you are stuck.

Prewritten engine scriptmistakes 0

1(function () {
2  "use strict";
3  // Single boot — if this document is re-parsed, abandon prior work.
4  if (window.__engineBooted) return;
5  window.__engineBooted = true;
6  let alive = true;
7  window.addEventListener("pagehide", function () { alive = false; }, { once: true });
8  const raf = window.requestAnimationFrame.bind(window);
9  window.requestAnimationFrame = function (cb) {
10    return raf(function (ts) {
11      if (!alive) return;
12      try { cb(ts); } catch (err) { console.error(err); alive = false; }
13    });
14  };
15 
16const canvas = document.getElementById('c');
17const ctx = canvas.getContext('2d');
18const W = canvas.width, H = canvas.height;
19const hud = document.getElementById('hud');
20 
21const SPEED = 4;
22const PLAYER_SIZE = 30;
23const FRICTION = 0.18;
24const BOUNCE = 0.35;
25 
26const keys = Object.create(null);
27window.addEventListener('keydown', e => {
28  keys[e.code] = true;
29  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.code)) e.preventDefault();
30});
31window.addEventListener('keyup', e => { keys[e.code] = false; });
32 
33const player = {
34  x: W/2 - PLAYER_SIZE/2,
35  y: H/2 - PLAYER_SIZE/2,
36  w: PLAYER_SIZE, h: PLAYER_SIZE,
37  vx: 0, vy: 0,
38};
39 
40function loop() {
41  let ax = 0, ay = 0;
42  if (keys['ArrowLeft'] || keys['KeyA']) ax -= 1;
43  if (keys['ArrowRight'] || keys['KeyD']) ax += 1;
44  if (keys['ArrowUp'] || keys['KeyW']) ay -= 1;
45  if (keys['ArrowDown'] || keys['KeyS']) ay += 1;
46 
47  // normalize diagonal
48  if (ax && ay) { ax *= 0.7071; ay *= 0.7071; }
49 
50  player.vx += ax * SPEED * 0.55;
51  player.vy += ay * SPEED * 0.55;
52  player.vx *= (1 - FRICTION);
53  player.vy *= (1 - FRICTION);
54  player.x += player.vx;
55  player.y += player.vy;
56 
57  if (player.x < 0) { player.x = 0; player.vx = Math.abs(player.vx) * BOUNCE; }
58  if (player.y < 0) { player.y = 0; player.vy = Math.abs(player.vy) * BOUNCE; }
59  if (player.x + player.w > W) { player.x = W - player.w; player.vx = -Math.abs(player.vx) * BOUNCE; }
60  if (player.y + player.h > H) { player.y = H - player.h; player.vy = -Math.abs(player.vy) * BOUNCE; }
61 
62  ctx.fillStyle = '#0b1018';
63  ctx.fillRect(0, 0, W, H);
64 
65  // crosshair grid
66  ctx.strokeStyle = 'rgba(125,211,252,0.06)';
67  ctx.beginPath();
68  ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H);
69  ctx.moveTo(0, H/2); ctx.lineTo(W, H/2);
70  ctx.stroke();
71 
72  ctx.fillStyle = '#5eead4';
73  ctx.beginPath();
74  roundRect(ctx, player.x, player.y, player.w, player.h, 8);
75  ctx.fill();
76 
77  const pressed = Object.keys(keys).filter(k => keys[k]).join(' ') || '—';
78  hud.textContent = 'Chapter 4 · keys: ' + pressed;
79 
80  requestAnimationFrame(loop);
81}
82 
83function roundRect(ctx, x, y, w, h, r) {
84  ctx.moveTo(x+r, y);
85  ctx.arcTo(x+w, y, x+w, y+h, r);
86  ctx.arcTo(x+w, y+h, x, y+h, r);
87  ctx.arcTo(x, y+h, x, y, r);
88  ctx.arcTo(x, y, x+w, y, r);
89  ctx.closePath();
90}
91 
92requestAnimationFrame(loop);
93 
94})();

Your lineline 1

(function () {

Click play, then use Arrow keys or WASD to move. · Sliders update the play window after a short pause.

Chapter solution

Reference

Live-bound HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Engine Lab</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100%;
    background: #07090d;
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, sans-serif;
    color: #e8edf5;
  }
  #wrap {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(94,234,212,0.08), transparent 50%),
      #07090d;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0;
    background: #0b1018;
    touch-action: none;
  }
  #hud {
    position: fixed;
    left: 12px; top: 12px;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #8b97ab;
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
    z-index: 2;
  }
  
</style>
</head>
<body>
<div id="wrap"><canvas id="c" width="640" height="360"></canvas></div>
<div id="hud"></div>
<script>
(function () {
  "use strict";
  // Single boot — if this document is re-parsed, abandon prior work.
  if (window.__engineBooted) return;
  window.__engineBooted = true;
  let alive = true;
  window.addEventListener("pagehide", function () { alive = false; }, { once: true });
  const raf = window.requestAnimationFrame.bind(window);
  window.requestAnimationFrame = function (cb) {
    return raf(function (ts) {
      if (!alive) return;
      try { cb(ts); } catch (err) { console.error(err); alive = false; }
    });
  };

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const hud = document.getElementById('hud');

const SPEED = 4;
const PLAYER_SIZE = 30;
const FRICTION = 0.18;
const BOUNCE = 0.35;

const keys = Object.create(null);
window.addEventListener('keydown', e => {
  keys[e.code] = true;
  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.code)) e.preventDefault();
});
window.addEventListener('keyup', e => { keys[e.code] = false; });

const player = {
  x: W/2 - PLAYER_SIZE/2,
  y: H/2 - PLAYER_SIZE/2,
  w: PLAYER_SIZE, h: PLAYER_SIZE,
  vx: 0, vy: 0,
};

function loop() {
  let ax = 0, ay = 0;
  if (keys['ArrowLeft'] || keys['KeyA']) ax -= 1;
  if (keys['ArrowRight'] || keys['KeyD']) ax += 1;
  if (keys['ArrowUp'] || keys['KeyW']) ay -= 1;
  if (keys['ArrowDown'] || keys['KeyS']) ay += 1;

  // normalize diagonal
  if (ax && ay) { ax *= 0.7071; ay *= 0.7071; }

  player.vx += ax * SPEED * 0.55;
  player.vy += ay * SPEED * 0.55;
  player.vx *= (1 - FRICTION);
  player.vy *= (1 - FRICTION);
  player.x += player.vx;
  player.y += player.vy;

  if (player.x < 0) { player.x = 0; player.vx = Math.abs(player.vx) * BOUNCE; }
  if (player.y < 0) { player.y = 0; player.vy = Math.abs(player.vy) * BOUNCE; }
  if (player.x + player.w > W) { player.x = W - player.w; player.vx = -Math.abs(player.vx) * BOUNCE; }
  if (player.y + player.h > H) { player.y = H - player.h; player.vy = -Math.abs(player.vy) * BOUNCE; }

  ctx.fillStyle = '#0b1018';
  ctx.fillRect(0, 0, W, H);

  // crosshair grid
  ctx.strokeStyle = 'rgba(125,211,252,0.06)';
  ctx.beginPath();
  ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H);
  ctx.moveTo(0, H/2); ctx.lineTo(W, H/2);
  ctx.stroke();

  ctx.fillStyle = '#5eead4';
  ctx.beginPath();
  roundRect(ctx, player.x, player.y, player.w, player.h, 8);
  ctx.fill();

  const pressed = Object.keys(keys).filter(k => keys[k]).join(' ') || '—';
  hud.textContent = 'Chapter 4 · keys: ' + pressed;

  requestAnimationFrame(loop);
}

function roundRect(ctx, x, y, w, h, r) {
  ctx.moveTo(x+r, y);
  ctx.arcTo(x+w, y, x+w, y+h, r);
  ctx.arcTo(x+w, y+h, x, y+h, r);
  ctx.arcTo(x, y+h, x, y, r);
  ctx.arcTo(x, y, x+w, y, r);
  ctx.closePath();
}

requestAnimationFrame(loop);

})();
</script>
</body>
</html>

Tinker sandbox

Editable

Your HTML / JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Engine Lab</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100%;
    background: #07090d;
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, sans-serif;
    color: #e8edf5;
  }
  #wrap {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(94,234,212,0.08), transparent 50%),
      #07090d;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0;
    background: #0b1018;
    touch-action: none;
  }
  #hud {
    position: fixed;
    left: 12px; top: 12px;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #8b97ab;
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
    z-index: 2;
  }
  
</style>
</head>
<body>
<div id="wrap"><canvas id="c" width="640" height="360"></canvas></div>
<div id="hud"></div>
<script>
(function () {
  "use strict";
  // Single boot — if this document is re-parsed, abandon prior work.
  if (window.__engineBooted) return;
  window.__engineBooted = true;
  let alive = true;
  window.addEventListener("pagehide", function () { alive = false; }, { once: true });
  const raf = window.requestAnimationFrame.bind(window);
  window.requestAnimationFrame = function (cb) {
    return raf(function (ts) {
      if (!alive) return;
      try { cb(ts); } catch (err) { console.error(err); alive = false; }
    });
  };

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const hud = document.getElementById('hud');

const SPEED = 4;
const PLAYER_SIZE = 30;
const FRICTION = 0.18;
const BOUNCE = 0.35;

const keys = Object.create(null);
window.addEventListener('keydown', e => {
  keys[e.code] = true;
  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.code)) e.preventDefault();
});
window.addEventListener('keyup', e => { keys[e.code] = false; });

const player = {
  x: W/2 - PLAYER_SIZE/2,
  y: H/2 - PLAYER_SIZE/2,
  w: PLAYER_SIZE, h: PLAYER_SIZE,
  vx: 0, vy: 0,
};

function loop() {
  let ax = 0, ay = 0;
  if (keys['ArrowLeft'] || keys['KeyA']) ax -= 1;
  if (keys['ArrowRight'] || keys['KeyD']) ax += 1;
  if (keys['ArrowUp'] || keys['KeyW']) ay -= 1;
  if (keys['ArrowDown'] || keys['KeyS']) ay += 1;

  // normalize diagonal
  if (ax && ay) { ax *= 0.7071; ay *= 0.7071; }

  player.vx += ax * SPEED * 0.55;
  player.vy += ay * SPEED * 0.55;
  player.vx *= (1 - FRICTION);
  player.vy *= (1 - FRICTION);
  player.x += player.vx;
  player.y += player.vy;

  if (player.x < 0) { player.x = 0; player.vx = Math.abs(player.vx) * BOUNCE; }
  if (player.y < 0) { player.y = 0; player.vy = Math.abs(player.vy) * BOUNCE; }
  if (player.x + player.w > W) { player.x = W - player.w; player.vx = -Math.abs(player.vx) * BOUNCE; }
  if (player.y + player.h > H) { player.y = H - player.h; player.vy = -Math.abs(player.vy) * BOUNCE; }

  ctx.fillStyle = '#0b1018';
  ctx.fillRect(0, 0, W, H);

  // crosshair grid
  ctx.strokeStyle = 'rgba(125,211,252,0.06)';
  ctx.beginPath();
  ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H);
  ctx.moveTo(0, H/2); ctx.lineTo(W, H/2);
  ctx.stroke();

  ctx.fillStyle = '#5eead4';
  ctx.beginPath();
  roundRect(ctx, player.x, player.y, player.w, player.h, 8);
  ctx.fill();

  const pressed = Object.keys(keys).filter(k => keys[k]).join(' ') || '—';
  hud.textContent = 'Chapter 4 · keys: ' + pressed;

  requestAnimationFrame(loop);
}

function roundRect(ctx, x, y, w, h, r) {
  ctx.moveTo(x+r, y);
  ctx.arcTo(x+w, y, x+w, y+h, r);
  ctx.arcTo(x+w, y+h, x, y+h, r);
  ctx.arcTo(x, y+h, x, y, r);
  ctx.arcTo(x, y, x+w, y, r);
  ctx.closePath();
}

requestAnimationFrame(loop);

})();
</script>
</body>
</html>

Play window

Live

Chapter goal

How to do it

Track pressed keys

Move from the loop

Clamp to the world

Live lab

Live settings