Workshop › Mario-style Platformer › Step 9 of 37

Landing on tiles

What we are doing

The recipe for collisions: move, then check. If the move ended inside something solid, snap back to the edge of the tile you ran into. Falling into a tile puts the feet exactly on its top, and the body is grounded.

```js
function moveY(body) {
  body.grounded = false
  body.y += body.vy
  if (!overlapsSolid(body)) return
  if (body.vy > 0) {
    body.y = Math.floor((body.y + body.h - EPS) / TILE) * TILE - body.h
    body.grounded = true
  }
  body.vy = 0
}

  moveY(player)
```

What it means

grounded is false unless this move lands on something.
If after moving the body overlaps nothing, we are done.
Falling: Math.floor((y + h - EPS) / TILE) is the row the feet went into; times TILE is that tile's top; minus h puts the feet exactly on it.
vy = 0 stops the fall.

Your turn

Under overlapsSolid, leave an empty line and write moveY.
In updatePlayer, replace player.y += player.vy with moveY(player). Press Run.

Skills: Velocity and gravity, Collision detection

← Gravity Which keys are held? →

All steps