Workshop › Frogger-style Crossing › Step 6 of 22

Lanes of traffic

What we are doing

Each road row is a lane: which row, how fast, how long its cars are, how far apart. A lane's pattern repeats every period tiles, a whole number of car spacings that is wider than the screen.

```js
// speed is in tiles per frame (negative = to the left), len and spacing in tiles.
const LANES = [
  { row: 7, speed: -0.05, len: 1, spacing: 4, color: '#ef4444' },
  { row: 8, speed: 0.035, len: 2, spacing: 6, color: '#f59e0b' },
  { row: 9, speed: -0.06, len: 1, spacing: 5, color: '#e879f9' },
  { row: 10, speed: 0.03, len: 1, spacing: 4, color: '#38bdf8' },
  { row: 11, speed: -0.025, len: 2, spacing: 5, color: '#f97316' },
]

for (const lane of LANES) lane.offset = 0

// A lane repeats every `period` tiles, which is always wider than the screen plus one car or log.
function period(lane) {
  return lane.spacing * Math.ceil((COLS + lane.len) / lane.spacing)
}
```

What it means

Each lane is an object: its row, speed in tiles per frame (negative = left), car length and spacing in tiles, and color.
offset is how far the lane has slid; it starts at 0.
Math.ceil rounds up: (12 + 1) / 4 = 3.25 becomes 4, so the first lane repeats every 16 tiles.

Your turn

Under the rows comment, write the comment and LANES.
Under frog, write the offset line, the comment and period.

Skills: Arrays and objects

← Swipe to hop Cars →

All steps