Vectors and Physics

Why bundle numbers into a vector

The player has x, y and vx, vy. Right now those are just separate numbers. But "moving 340 px right and 200 px down" is naturally **one thing*: a vector.

A vector is two (or more) numbers bundled together that describe a magnitude and direction. In a 2D game that's (x, y). Positions, velocities, accelerations (gravity) are all vectors. Bundling them makes physics code short, correct, and reusable.

class Vec2 {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }

  add(v) {           // add both components
    this.x += v.x;
    this.y += v.y;
    return this;
  }

  scale(s) {         // stretch both components by the same factor
    this.x *= s;
    this.y *= s;
    return this;
  }
}

Velocity becomes a first-class thing: const velocity = new Vec2(340, 0);. add/scale are methods from the Classes lesson, so they operate on this: the specific vector you called them on.

Gravity as a vector operation

Gravity is just a constant downward vector added to velocity every frame. That's the entire physics model:

velocity.y += GRAVITY * dt   (every frame, until it hits the ground)
position.y += velocity.y * dt (every frame)

The game uses GRAVITY = 2400 px/s² and a MAX_FALL cap:

const GRAVITY = 2400;
const MAX_FALL = 1500;
const dt = 1 / 60;

const vy = new Vec2(0, 0);
for (let t = 0; t < 2 * 60; t++) {          // 2 seconds of falling
  vy.y += GRAVITY * dt;                     // gravity pulls down
  if (vy.y > MAX_FALL) vy.y = MAX_FALL;     // but never exceed terminal velocity
}
console.log('final vy =', vy.y.toFixed(0), '(capped at MAX_FALL = 1500)');

vy.y climbs 2400 × 1/60 = 40 each frame until it hits the MAX_FALL ceiling, then stays there. That ceiling keeps the player from falling through the floor on a slow frame.

This cap is a fairness rule: without it, a slow frame lets gravity add too much and the player teleports below the ground.

Jumping: reverse the vector, then let gravity win

A jump is simple: set the vertical vector pointing up (negative, because up is smaller y), then let gravity drain it away:

const JUMP_IMPULSE = -820;   // launch upward
let vy = new Vec2(0, JUMP_IMPULSE);

for (let frame = 0; frame < 60 * 3; frame++) {
  vy.y += GRAVITY * dt;              // gravity pulls back down
  if (vy.y > MAX_FALL) vy.y = MAX_FALL;
  y += vy.y * dt;                    // apply velocity to position
  if (y >= 0) { y = 0; break; }      // landed (ground at y=0)
}

The arc is: vy starts very negative (fast up), gravity shrinks it toward zero at the top, then it grows positive (falling down). The object rises, slows, pauses at the peak, then accelerates back down, exactly the feel the real game uses.

This is exactly what Player.update(dt) does:

update(dt, speed) {
  this.vx = speed;                       // horizontal auto-run
  this.vy += CONFIG.GRAVITY * dt;        // gravity adds to vertical velocity
  if (this.vy > CONFIG.MAX_FALL) this.vy = CONFIG.MAX_FALL;
  this.x += this.vx * dt;
  this.y += this.vy * dt;
}

Watch out: multiply by dt everywhere. Without it the jump depends on frame rate.