Workshop › OutRun-style Racer › Step 31 of 44

Cars that shrink with distance

What we are doing

To draw a car, find its segment in shown: its near edge tells where on screen that distance is and how wide the road is there. The car is a third of that width: far cars come out tiny, near ones big. Far cars are drawn first.

```js
// The other cars, far ones first, sized by their distance.
const visible = cars
  .map((car) => ({ car, gap: ahead(position, car.z) }))
  .filter((c) => c.gap > PLAYER_Z * 0.5 && c.gap < DRAW * SEG)
  .sort((a, b) => b.gap - a.gap)
for (const { car } of visible) {
  const seg = shown.find((s) => s.index === Math.floor(car.z / SEG) % segments.length)
  if (!seg) continue
  const w = seg.near.w * 0.35
  ctx.fillStyle = '#facc15'
  ctx.fillRect(seg.near.x + car.x * seg.near.w - w / 2, seg.near.y - w * 0.6, w, w * 0.6)
}
```

What it means

map pairs each car with its distance ahead of the camera, filter keeps those in view, and sort puts the furthest first.
for (const { car } of visible) goes through that list. shown.find(...) finds the car's segment, or nothing (continue skips it).
The car is 0.35 of the road's half width wide and 0.6 of that high, standing on the near edge at its place across the road.

Your turn

In draw, above the // Your car. comment, write the other cars' code followed by an empty line.

Skills: Drawing on a canvas, Arrays and objects

← Distance on a loop Traffic moves →

All steps