How to make a 2D game with AI

const CONFIG = { maxStep: 0.05 };   // never simulate more than 50ms at once

let last = performance.now();
let raf = 0;

function frame(now) {
  raf = requestAnimationFrame(frame);

  // Elapsed seconds, clamped. Without the clamp, returning to a backgrounded
  // tab produces a single 60-second step and everything tunnels through
  // everything else.
  const dt = Math.min((now - last) / 1000, CONFIG.maxStep);
  last = now;

  update(dt);
  render();
}
raf = requestAnimationFrame(frame);

// Stop simulating when nobody is looking, and reset the clock on the way back
// in. Forgetting the reset is what produces the one enormous step.
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    cancelAnimationFrame(raf);
    raf = 0;
  } else if (!raf) {
    last = performance.now();
    raf = requestAnimationFrame(frame);
  }
});

// Frame-dependent: twice as fast on a 120Hz screen.
player.x += 3;
enemy.y += 1.5;
if (--cooldown <= 0) fire();

// Time-based: identical everywhere.
player.x += 180 * dt;        // 180 pixels per second
enemy.y += 90 * dt;          // 90 pixels per second
cooldown -= dt;
if (cooldown <= 0) { fire(); cooldown = 0.25; }   // every 250ms

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let W = 0, H = 0;   // logical size, in CSS pixels: use these everywhere

function resize() {
  // Capped at 2. A 3x phone costs nine times the fill rate for a difference
  // nobody can see, and it is the first thing to drop frames.
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const rect = canvas.getBoundingClientRect();

  W = rect.width;
  H = rect.height;
  canvas.width = Math.round(W * dpr);
  canvas.height = Math.round(H * dpr);

  // setTransform, not scale. scale() multiplies onto whatever is already
  // there, so calling resize() twice makes everything four times too big.
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}

window.addEventListener('resize', resize);
resize();

const keys = new Set();

addEventListener('keydown', (e) => {
  // Stop arrow keys and space scrolling the page under the game.
  if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' '].includes(e.key)) e.preventDefault();
  keys.add(e.key.toLowerCase());
});
addEventListener('keyup', (e) => keys.delete(e.key.toLowerCase()));

// Pointer events cover mouse, touch and stylus in one API. There is no reason
// to write separate touchstart and mousedown handlers any more.
let pointer = null;
canvas.addEventListener('pointerdown', (e) => {
  canvas.setPointerCapture(e.pointerId);
  pointer = { x: e.offsetX, y: e.offsetY, down: true };
});
canvas.addEventListener('pointermove', (e) => {
  if (pointer) { pointer.x = e.offsetX; pointer.y = e.offsetY; }
});
canvas.addEventListener('pointerup',     () => { pointer = null; });
canvas.addEventListener('pointercancel', () => { pointer = null; });

// The game asks these, and never asks which device answered.
const wantsLeft  = () => keys.has('arrowleft')  || keys.has('a');
const wantsRight = () => keys.has('arrowright') || keys.has('d');
const wantsFire  = () => keys.has(' ') || (pointer && pointer.down);

// Boxes: {x, y, w, h}, measured from the top-left corner.
const hitBox = (a, b) =>
  a.x < b.x + b.w && a.x + a.w > b.x &&
  a.y < b.y + b.h && a.y + a.h > b.y;

// Circles: {x, y, r}, measured from the centre. No Math.sqrt: comparing
// squared distances gives the same answer for a fraction of the cost.
const hitCircle = (a, b) => {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  const r  = a.r + b.r;
  return dx * dx + dy * dy < r * r;
};

function moveAndCollide(obj, dt, walls) {
  const dist  = Math.hypot(obj.vx, obj.vy) * dt;
  // Never take a step bigger than the object itself.
  const steps = Math.max(1, Math.ceil(dist / (obj.r || obj.w || 4)));
  const sub   = dt / steps;

  for (let i = 0; i < steps; i++) {
    obj.x += obj.vx * sub;
    obj.y += obj.vy * sub;
    for (const w of walls) {
      if (hitBox(obj, w)) return w;   // stop at the first thing hit
    }
  }
  return null;
}

let mode = 'title';   // 'title' | 'playing' | 'paused' | 'dead'

function update(dt) {
  if (mode !== 'playing') return;
  // ... all game logic lives behind this one guard
}

function render() {
  drawWorld();
  if (mode === 'title')  drawOverlay('Press space to start');
  if (mode === 'paused') drawOverlay('Paused');
  if (mode === 'dead')   drawOverlay('Score ' + score + ' · best ' + best, 'Press space to play again');
}

// reset() must put back every single thing start() changed. The classic bug
// is a second run that begins at the difficulty the first run ended on.
function reset() {
  score = 0;
  lives = CONFIG.startLives;
  elapsed = 0;
  spawnRate = CONFIG.baseSpawnRate;
  entities.length = 0;
  spawnPlayer();
  mode = 'playing';
}

function emojiSprite(char, size) {
  const c = document.createElement('canvas');
  c.width = c.height = size;
  const x = c.getContext('2d');
  x.font = Math.floor(size * 0.82) + 'px serif';
  x.textAlign = 'center';
  x.textBaseline = 'middle';
  x.fillText(char, size / 2, size / 2);
  return c;   // drawImage() this, it is just a canvas
}

const SPRITES = {
  ship:  emojiSprite('\u{1F680}', 48),
  rock:  emojiSprite('\u{1FAA8}', 40),
  fuel:  emojiSprite('\u26FD',    32),
};

// Acceleration and friction. The single biggest change to how a game feels
// under the hand, and it is four lines.
const ACC = 1800, FRICTION = 0.86, MAX = 320;
if (wantsLeft())  player.vx -= ACC * dt;
if (wantsRight()) player.vx += ACC * dt;
player.vx *= Math.pow(FRICTION, dt * 60);          // frame-rate independent
player.vx  = Math.max(-MAX, Math.min(MAX, player.vx));
player.x  += player.vx * dt;

// Screen shake. Decays on its own, so callers just add to it.
let shake = 0;
const addShake = (n) => { shake = Math.min(shake + n, 18); };

function render() {
  ctx.save();
  if (shake > 0.4) {
    ctx.translate((Math.random() - 0.5) * shake, (Math.random() - 0.5) * shake);
    shake *= Math.pow(0.02, dt);                   // gone in about 200ms
  }
  drawWorld();
  ctx.restore();
  drawHud();                                       // never shake the HUD
}

// Hit stop: freeze the simulation briefly on a big impact. Reads as weight.
let freeze = 0;
function update(dt) {
  if (freeze > 0) { freeze -= dt; return; }
  // ...
}
// on a heavy hit: freeze = 0.06; addShake(12);

const KEY = 'dodge.best';

function loadBest() {
  try { return Number(localStorage.getItem(KEY)) || 0; }
  catch { return 0; }          // private window, or site data blocked
}

function saveBest(n) {
  try { localStorage.setItem(KEY, String(n)); }
  catch { /* nothing to do, and nothing worth interrupting play for */ }
}

let best = loadBest();
function onGameOver() {
  if (score > best) { best = score; saveBest(best); }
  mode = 'dead';
}