Math for games

§Diagonal movement

4-way movement is easy. When you press → then player.x += speed * dt. When you press ← then player.x -= speed * dt. Then repeat for the y axis.

function fixedUpdate(dt: number) {
  const speed = 80;
  if (keysDown.has("ArrowUp")) {
    player.y -= speed * dt;
  } else if (keysDown.has("ArrowDown")) {
    player.y += speed * dt;
  } else if (keysDown.has("ArrowLeft")) {
    player.x -= speed * dt;
  } else if (keysDown.has("ArrowRight")) {
    player.x += speed * dt;
  }
}

To support 8-way movement (where → and ↑ at the same time move diagonally), that should be easy, too, right?

function fixedUpdate(dt: number) {
  const speed = 80;
  if (keysDown.has("ArrowUp")) player.y -= speed * dt;
  if (keysDown.has("ArrowDown")) player.y += speed * dt;
  if (keysDown.has("ArrowLeft")) player.x -= speed * dt;
  if (keysDown.has("ArrowRight")) player.x += speed * dt;
}

Now you move faster on the diagonal when → and ↑ are both held. In fact you're moving exactly √2 times faster, or about 1.41×. Why?

The answer has to do with right triangles. If you imagine that → moves you along the base of a right triangle and ↑ moves you up with the triangle's vertical leg, then pressing both at the same time moves you along the hypotenuse of that right triangle, which covers √2 times more distance than either leg over the same period of time.

One way to fix this is to divide out that extra √2 of velocity when traveling diagonally:

function fixedUpdate(dt: number) {
  const speed = 80;
  let vx = 0;
  let vy = 0;

  if (keysDown.has("ArrowUp")) vy -= speed * dt;
  if (keysDown.has("ArrowDown")) vy += speed * dt;
  if (keysDown.has("ArrowLeft")) vx -= speed * dt;
  if (keysDown.has("ArrowRight")) vx += speed * dt;

  if (vx !== 0 && vy !== 0) {
    vx /= Math.SQRT2;
    vy /= Math.SQRT2;
  }
  player.x += vx;
  player.y += vy;
}

function fixedUpdate(dt: number) {
  const speed = 80;
  let vx = 0;
  let vy = 0;

  if (keysDown.has("ArrowUp")) vy -= speed * dt;
  if (keysDown.has("ArrowDown")) vy += speed * dt;
  if (keysDown.has("ArrowLeft")) vx -= speed * dt;
  if (keysDown.has("ArrowRight")) vx += speed * dt;

  const hypot = Math.hypot(vx, vy) || 1;
  player.x += (vx / hypot) * speed * dt;
  player.y += (vy / hypot) * speed * dt;
}

§Modulo

In languages like Ruby and Python, the % symbol is a modulo operator. It gives you the remainder when dividing two numbers, and wraps negative results back into a positive range. But in JavaScript and most other C-like languages, % is the remainder operator [MDN] and it does not wrap negative numbers.

Things like clocks which are always increasing can be implemented using the % operator directly since the numbers are all positive. But games often also need a modulo operator that handles negative number wrapping, for things like world wrapping or item selection in hotbars. Since one isn't built into the language, we have to rely on our own:

function mod(a: number, b: number) {
  return ((a % b) + b) % b;
}

§Seeded random numbers

Before computers were effective at generating pseudorandom numbers, people relied on books filled with random digits [Wikipedia] in order to pull random numbers for work in fields that required actual randomness, such as cryptography, nuclear physics, or statistics.

With a book of random numbers, you could pick a page and line number, and although the digits you would find at that location would be completely random, you could return to that place any number of times in the future and get the exact same digits.

We get the same guarantee when we use a seeded random number generator. A seed is like the page and line numbers. It is a way to get back to the same set of random digits.

Why is that useful?

For procedurally generated games like Minecraft or games with deterministic randomness like Balatro, you can enter a specific seed to reproduce an exact (but still randomly-generated) game state. Sometimes this is just for fun—players can share interesting seeds with one another. But seeded randomness is also practical. You might have a bug that only occurs one in a thousand times, and in a truly random game that might be impossible to debug. If a tester shares the seed with the broken state, you can reliably test and reproduce the issue as many times as you need.

Roll the dice below to compare how the seeded random number generator repeats the same sequence after each Reset, while Math.random() does not.

Although the built-in Math.random() and crypto.getRandomValues() are also seeded random number generators, they're pre-seeded and we don't have an API to reset that seed. So we'll need to find our own seeded random algorithms that allow us to set the seed directly.

A popular PRNG is splitmix32, which is short enough to copy into your game's utility functions:

function splitmix32(seed: number) {
  return function () {
    seed |= 0;
    seed = (seed + 0x9e3779b9) | 0;
    let t = seed ^ (seed >>> 16);
    t = Math.imul(t, 0x21f0aaad);
    t = t ^ (t >>> 15);
    t = Math.imul(t, 0x735a2d97);
    return ((t = t ^ (t >>> 15)) >>> 0) / 4294967296;
  };
}

const random = splitmix32(123);

// if you use seed 123 you'll also get these first 3 random numbers:
// random(); => 0.4575126694981009
// random(); => 0.21505506429821253
// random(); => 0.7675276368390769

§Utility functions

Once you've created your seeded random number generator, here's how you can use it to pick a random item from an array:

// an arbitrary seed #
const seed = 123;

// our seeded random number generator
const random = splitmix32(seed);

// selects a random element from an array
function sample<T>(array: T[], rng = Math.random) {
  return array[Math.floor(rng() * array.length)];
}

// pass in the seeded PRNG
sample([5, 2, 7, 9, 1], random); // => 7

A handful of utilities that work with seeded random number generators:

// pick a random floating point number between min and max
function random(min: number, max: number, rng = Math.random) {
  return min + rng() * (max - min);
}

// pick a random integer between min and max
function randomInt(min: number, max: number, rng = Math.random) {
  return Math.floor(rng() * (max - min + 1)) + min;
}

// select a random element from an array
function sample<T>(array: T[], rng = Math.random) {
  return array[Math.floor(rng() * array.length)];
}

// shuffles an array in-place
function shuffle<T>(array: T[], rng = Math.random) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(rng() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

§Sine waves

A sine wave gives us a number that oscillates between -1 and +1. We can pass it the current time to get a value in [-1, 1] that changes over time.

y = Math.sin(time);

To change the speed of the oscillation, include a multiplier:

y = Math.sin(time * speed);

Most of the time it's easier to work with values scaled between 0 and 1, instead of the -1 to +1 range we get with Math.sin.

y = (Math.sin(time) + 1) / 2;

And while you could use sine waves for on/off blinking as well...

// rounded number (0 or 1)
y = Math.round((Math.sin(time) + 1) / 2);

// or a boolean value (true 50% of the time)
isOn = Math.sin(time) > 0;

...modulo is a better fit for that task.

isOn = time % 1 < 0.5;

Now, if you want the same kind of repeating up-and-down change, but with linear movement instead of smooth easing at the top and bottom, you can use a triangle wave like we did for the DVD bounce in Chapter 4:

const period = 2; // seconds for one full up/down cycle
const t = (time % period) / period; // 0..1
const y = t < 0.5 ? t * 2 : 2 - t * 2;

Here's an assortment of practical applications of sine waves for games.

const state = { time: 0 };

function update(dt: number) {
  state.time += dt;
}

function draw(ctx: CanvasRenderingContext2D) {
  const { width, height } = bounds;
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "#3d7ea6";
  const size = 50;
  const speed = 3;
  const wobble = Math.sin(state.time * speed); 

  ctx.save();
  ctx.translate(100, 100);
  ctx.rotate(wobble); 
  ctx.fillRect(-size / 2, -size / 2, size, size);
  ctx.restore();
}

const state = { time: 0 };

function update(dt: number) {
  state.time += dt;
}

function draw(ctx: CanvasRenderingContext2D) {
  const { width, height } = bounds;
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "#3d7ea6";
  const size = 50;
  const speed = 3;
  const wobble = Math.sin(state.time * speed); 

  ctx.save();
  ctx.translate(width / 2 + wobble * 100, height / 2); 
  ctx.fillRect(-size / 2, -size / 2, size, size);
  ctx.restore();
}

const state = { time: 0 };

function update(dt: number) {
  state.time += dt;
}

function draw(ctx: CanvasRenderingContext2D) {
  const { width, height } = bounds;
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "#3d7ea6";
  const size = 50;
  const speed = 3;
  // wobble is a value between -1 and +1
  const wobble = Math.sin(state.time * speed); 
  // normalize it to go between 0 and 1:
  const opacity = (wobble + 1) / 2; 

  ctx.globalAlpha = opacity; 
  ctx.fillRect(75, 75, size, size); 
  ctx.globalAlpha = 1; 
}

const state = { time: 0 };

function update(dt: number) {
  state.time += dt;
}

function draw(ctx: CanvasRenderingContext2D) {
  const { width, height } = bounds;
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "#3d7ea6";
  const size = 50;
  const isOn = state.time % 1 < 0.5; 

  if (isOn) {
    ctx.fillRect(75, 75, size, size);
  }
}

§π

When working with sine waves, you'll often see Math.PI in your code. For example, if you want oscillations to take one second:

y = Math.sin(time * Math.PI * 2);

Where does that π come from?

Trigonometry. If you draw a dot moving around the unit circle, computing Math.sin of the angle from the origin to that dot gives us the dot's y position.

One full trip around the circle is 2π radians, so a sine wave also repeats every 2π radians. Since state.time is measured in seconds, passing it directly to Math.sin means the wave takes 2π seconds (about 6.28s) to complete one full cycle.

Let's say we want the result of Math.sin(...) > 0 to change every second. Since sine crosses zero every π radians, the angle has to advance by π each second.

Try increasing the scale until the positive interval lines up with 1s:

At scale = π, one second of time becomes π radians. So after 1s, the wave reaches π and crosses from positive to negative. After 2s, it reaches 2π and crosses back again.

§Projectiles

If you were to draw an arrow from the origin (0, 0) to (x, y), how would you determine the angle of that arrow? From trigonometry we know tan(θ) = y / x, so maybe you could use the arctangent Math.atan(y / x)?

But how do we get an angle between any two points on our canvas, not just from (0, 0)? The trick is to translate so that one of the points is at the origin (0, 0), then make the second point's coordinates relative to that new origin. From there, atan2 will give you the angle from one point to the other in radians.

const origin = { x: 5, y: 4 };
const target = { x: 10, y: 2 };
const targetRelativeToOrigin = {
  x: target.x - origin.x,  // 5
  y: target.y - origin.y,  // -2
};
const angle = Math.atan2(
  targetRelativeToOrigin.y,  // -2
  targetRelativeToOrigin.x,  // 5
);

To pull out the x and y components from this angle, use the cosine and sine functions.

const speed = 100;
const vx = Math.cos(angle) * speed; // x velocity
const vy = Math.sin(angle) * speed; // y velocity

const origin = { x: 10, y: 20 };
const target = { x: 30, y: 40 };
const targetRelativeToOrigin = {
  x: target.x - origin.x,
  y: target.y - origin.y,
};
const length = Math.hypot(
  targetRelativeToOrigin.x, // targetX - originX
  targetRelativeToOrigin.y, // targetY - originY
);
const speed = 100;
const vx = (targetRelativeToOrigin.x / length) * speed;
const vy = (targetRelativeToOrigin.y / length) * speed;

const speed = 160;
const angle = Math.atan2(
  target.y - origin.y, // -2
  target.x - origin.x, // 5
);
const vx = Math.cos(angle) * speed; // x velocity
const vy = Math.sin(angle) * speed; // y velocity

From here you can add gravity, explosions, or anything else to the projectiles.

for (const bullet of bullets) {
  bullet.vy += gravity * dt; // apply gravity
  bullet.x += bullet.vx * dt;
  bullet.y += bullet.vy * dt;
  if (bullet.y >= groundY) {
    explode(bullet);
  }
}

§Utility functions

// how long is the line from the origin (0, 0) to the point at (x, y)
function magnitude(x: number, y: number) {
  return Math.hypot(x, y);
}

// how long is the line between (x1, y1) and (x2, y2)
function distance(x1: number, y1: number, x2: number, y2: number) {
  return Math.hypot(x2 - x1, y2 - y1);
}

// what is the angle from the origin (0, 0) to the point at (x, y)
function angle(x: number, y: number) {
  return Math.atan2(y, x); // in radians
}

// what is the angle from (x1, y1) to (x2, y2)
function angleBetween(x1: number, y1: number, x2: number, y2: number) {
  return Math.atan2(y2 - y1, x2 - x1); // in radians
}

// if you need to convert the radians from `angle(x, y)` to degrees:
function radiansToDegrees(rad: number) {
  return (rad * 180) / Math.PI;
}

// or convert back from degrees to radians:
function degreesToRadians(deg: number) {
  return (deg * Math.PI) / 180;
}

// pull out the x and y components of the unit vector pointing
// in the direction of the `angle` in radians
function direction(angle: number) {
  return {
    x: Math.cos(angle),
    y: Math.sin(angle),
  };
}

§Collisions & intersections

Detecting when in-game objects overlap is essential not just for things like didProjectileHitPlayer, but also to keep the player from falling through platforms or even just to make it possible to click on stuff.

This section is less a guide and more a collection of common code snippets for collision detection algorithms between various shapes.

The functions in the next sections will tell you when two objects collide, but you'll need to compare the current and past collision state if you want to act on the instant the collision occurred:

const state = {
  wasColliding: false, // stale state from previous frame
  player: { x: 20, y: 50 },
  circle: { x: 30, y: 40, radius: 50 },
};

function update(dt: number) {
  const isColliding = isPointInCircle(state.player, state.circle);
  const justEnteredCircle = isColliding && !state.wasColliding;
  if (justEnteredCircle) {
    playSound("whoosh");
    handleCollision(state);
  }
  state.wasColliding = isColliding;
}

§Point in shape

§Segment collisions

§Ray collisions

§Circle collisions

§Rect collisions (AABB)

When a rectangle is in the same orientation as the game canvas itself it's considered to be "axis-aligned". Collision detection is simpler with axis-aligned rectangles than rotated ones. A common abbreviation you'll see in many game engines for this is AABB (axis-aligned bounding box). The alternative, for rotated rectangles, is an "oriented bounding box", which we'll show in the next section.

§Rotated rect collisions (OBB)

§Polygon collisions

§Distance checks

§Dot product

The dot product of two vectors tells you how much they're pointed in the same direction.

• 1 means they're pointed exactly the same way
• 0 means they're perpendicular to one another
• -1 means they're pointed exactly opposite ways

type Vec2 = { x: number; y: number };

function dot(a: Vec2, b: Vec2) {
  return a.x * b.x + a.y * b.y;
}

If you need to determine whether an object is in front of vs behind something else, or within some enemy vision cone in a stealth game, for example, then the dot product is a useful tool.

You can also use dot to find which target best matches the player's aim, or in a sports game to determine which player to pass to. Just note that the dot product only tells you how close the angles line up—it doesn't incorporate the distance on its own.

The dot product is typically used on normalized vectors.

function normalize(x: number, y: number): Vec2 {
  const length = Math.hypot(x, y);
  if (length === 0) {
    return { x: 0, y: 0 };
  }
  return { x: x / length, y: y / length };
}

const move = normalize(0.4, -0.9);
const aim = normalize(0.2, -0.2);

const alignment = dot(move, aim); // => 0.933...