Workshop › Mario-style Platformer › Step 5 of 37

Is a box touching anything?

What we are doing

The player (and later the enemies) is a box { x, y, w, h }. Is it inside anything solid? Checking its four corners is enough, as long as the box is no bigger than a tile. The right and bottom edges are taken a hair inside the box.

```js
const EPS = 0.01 // a hair: the right and bottom edges are just inside the box

// Bodies are never bigger than a tile, so checking their four corners is enough.
function overlapsSolid(body) {
  const right = body.x + body.w - EPS
  const bottom = body.y + body.h - EPS
  return solidAt(body.x, body.y) || solidAt(right, body.y) || solidAt(body.x, bottom) || solidAt(right, bottom)
}
```

What it means

right and bottom are the last points inside the box, a hair (0.01) before x + w and y + h.
The four solidAt calls check the top-left, top-right, bottom-left and bottom-right corners; || is true if any is.
The hair is tiny because positions have fractions: with - 1, a body could sink half a pixel into the floor unnoticed.

Your turn

Under const TILE = 32 write EPS.
Under solidAt, leave an empty line and write overlapsSolid with its comment.

Skills: Collision detection

← What is solid? Find the start →

All steps