Workshop › Frogger-style Crossing › Step 13 of 22

Logs on the river

What we are doing

The river gets five lanes of floating logs. A log lane is just like a road lane, marked with log: true; logs are brown and a little taller than cars.

```js
{ row: 1, speed: 0.025, len: 3, spacing: 5, log: true },
{ row: 2, speed: -0.035, len: 4, spacing: 6, log: true },
{ row: 3, speed: 0.02, len: 2, spacing: 4, log: true },
{ row: 4, speed: -0.03, len: 3, spacing: 5, log: true },
{ row: 5, speed: 0.04, len: 4, spacing: 6, log: true },

  ctx.fillStyle = lane.log ? '#92400e' : lane.color
  const inset = lane.log ? 4 : 6
  for (const x of items(lane)) {
    ctx.fillRect(x * TILE + 2, TOP + lane.row * TILE + inset, lane.len * TILE - 4, TILE - inset * 2)
  }
```

What it means

The new lanes use the same items and move in the same update: no new code is needed for that.
inset is the space above and below: 4 pixels for logs, 6 for cars.

Your turn

Add the five log lanes at the top of LANES.
In draw, pick the color and the inset for logs.

Skills: Arrays and objects

← Tap to play again Stay on the logs →

All steps