Workshop › Mario-style Platformer › Step 13 of 37

Walls

What we are doing

Walls work like floors: move sideways first, and if that lands inside a tile, snap back to its side. Then move vertically, as before. Handling the two axes separately is the key trick of tile collisions.

```js
// Move along one axis at a time; if that ends inside a wall, snap back to the wall's edge.
function moveX(body) {
  body.x += body.vx
  if (!overlapsSolid(body)) return false
  if (body.vx > 0) body.x = Math.floor((body.x + body.w - EPS) / TILE) * TILE - body.w
  else body.x = Math.floor(body.x / TILE) * TILE + TILE
  body.vx = 0
  return true
}

  moveX(player)
```

What it means

Moving right into a tile: its left edge is Math.floor((x + w - EPS) / TILE) * TILE; the body's right side goes there.
Moving left: the body's left side goes to the right edge of the tile it entered, Math.floor(x / TILE) * TILE + TILE.
It returns true when it hit a wall, false otherwise. The enemies will use that answer to turn around.

Your turn

Above function moveY(body) { write moveX with its comment, and an empty line after it.
In updatePlayer, replace player.x += player.vx with moveX(player).

Skills: Collision detection

← Friction Jump →

Walls

What we are doing

What it means

Your turn

All steps