Movement is a vector; collision is a query

First, build a mental model

A movement vector describes direction and amount. Collision asks whether a proposed shape or the path it travels is allowed. The mesh is a presentation; the collision shape is an explicit approximation chosen for gameplay and cost.

1. A vector such as (3, 4) has length 5. Divide by its length to obtain direction (0.6, 0.8), then multiply by speed and time. Handle the zero vector separately; dividing by zero is not a direction.
2. An axis-aligned bounding box uses intervals on each axis. Overlap requires overlap on all relevant axes. Rotation can make an AABB a loose approximation; oriented boxes, circles or capsules may fit a particular mechanic better.
3. A discrete test inspects the destination. A fast object can move entirely across a thin wall between samples. A swept test considers the segment or swept volume and finds the earliest blocking contact.
4. A broad phase cheaply chooses potential nearby colliders. A narrow phase applies a precise test to those candidates. Response then accepts, stops or slides the movement according to the game's rules.
5. Define contact conventions: whether touching counts, how much tolerance is used, and what happens when starting overlapped. Geometry without a documented response policy is not a complete movement system.

function unitVector(x, y) {
  const length = Math.hypot(x, y);
  return length === 0 ? { x: 0, y: 0 } : { x: x / length, y: y / length };
}
// Restricted example: a body moves right toward an infinite vertical wall.
function crossesWall(previousX, nextX, halfWidth, wallX) {
  return previousX + halfWidth <= wallX &&
         nextX + halfWidth >= wallX;
}
console.log(unitVector(3, 4)); // { x: 0.6, y: 0.8 }
console.log(crossesWall(8, 26, 1, 20)); // true
// A general 2D/3D sweep must also test other axes and candidate contacts.

1. Before

   The body's center is at 8 and its right edge is at 9. A vertical wall begins at x = 20.

2. Candidate

   The center requests 26, putting the right edge at 27. The right edge crossed 20 even if neither endpoint is inside a thin wall.

3. Resolve

   For this one-sided example, stopping with the center at 19 places the right edge at 20. A different game might slide along the wall or reflect velocity.