Workshop › Frogger-style Crossing › Step 7 of 22

Cars

What we are doing

items works out where each car of a lane is right now: one every spacing tiles, slid by the lane's offset, wrapped around the period. Then every car is drawn as a colored box.

```js
// Left edges (in tiles) of the cars or logs in a lane right now.
function items(lane) {
  const p = period(lane)
  const xs = []
  for (let start = 0; start < p; start += lane.spacing) {
    xs.push((((start + lane.offset) % p) + p) % p - lane.len)
  }
  return xs
}

  for (const lane of LANES) {
    ctx.fillStyle = lane.color
    for (const x of items(lane)) {
      ctx.fillRect(x * TILE + 2, TOP + lane.row * TILE + 6, lane.len * TILE - 4, TILE - 12)
    }
  }
```

What it means

Cars start at 0, spacing, 2 × spacing... up to the period.
((a % p) + p) % p wraps any number into 0 to p, even a negative one (JavaScript's % keeps the sign).
- lane.len shifts everything left by one car, so a car can be partly off the left edge.

Your turn

Under period, write the comment and items.
In draw, between the rows and the frog, draw the lanes.

Skills: Arrays and objects, Drawing on a canvas

← Lanes of traffic Traffic moves →

All steps