Lesson goal: Frogger: Periodic Traffic & Relative Velocity

Previous: Artillery: Parabolic Ballistics & Wind Drift | Home | Next: LEGO 3D Studio: Solid Geometry & Discrete Coordinates

In 1981, Konami and Sega released Frogger, an arcade phenomenon that became one of the most celebrated video games in computing history.

To successfully guide a frog across a busy multi-lane highway and treacherous raging river into home lily pads, players intuitively solve rich physics and math problems: modular arithmetic of cyclic traffic flows and relative velocity in moving reference frames!

1. Cyclic Traffic Waves & Modular Arithmetic

Each highway lane acts as a one-dimensional periodic wave train. Vehicles of length $L$ travel at constant velocity $v$, wrapping cyclically across screen width $W = 600\text{ px}$: $$x(t) = (x_0 + v t) \pmod W$$ The temporal period $T$ between passing vehicles is given by: $$T = \frac{\Delta x}{|v|}$$ By synchronizing frog hops with these periodic intervals, you can hop precisely through oncoming gaps without colliding!

2. Relative Velocity & Reference Frames on River Logs

Once you reach the river, the water current moves logs horizontally. When our frog lands on a floating log moving at velocity $\vec{v}_{\text{log}}$ relative to the ground, the frog's velocity relative to the riverbank follows Galileo's classical velocity addition: $$\vec{v}_{\text{frog, ground}} = \vec{v}_{\text{frog, log}} + \vec{v}_{\text{log, ground}}$$ While resting on the log ($\vec{v}_{\text{frog, log}} = 0$), the current carries the frog downstream: $$\Delta x = v_{\text{log}} \cdot \Delta t$$ To reach an open lily pad cove at the far bank, you must calculate the drift time $\Delta t$ needed for the log to carry you directly in line with the target slot!

3. Discrete Grid Coordinate Mapping ($10\text{ Rows} \times 600\text{ px}$)

  • Row 9 ($y = 368\text{ px}$): Starting riverbank sidewalk (Safe).
  • Rows 8–5 ($y = 328 \dots 208\text{ px}$): Four highway lanes with trucks, tractors, sedans, and high-speed race cars.
  • Row 4 ($y = 168\text{ px}$): Median sidewalk rest island (Safe).
  • Rows 3–1 ($y = 128 \dots 52\text{ px}$): River logs drifting at velocities ranging from $-45\text{ px/s}$ to $+60\text{ px/s}$.
  • Row 0 ($y = 22\text{ px}$): Top riverbank with 5 lily pad goal coves at $x \in \{90, 195, 300, 405, 510\}$.


Controlling the Frog with Code

Program deterministic crossing sequences using Lua commands:
  • frogger_game(n): Loads Stage #$n$ (1: Highway Timing, 2: Relative Velocity on River Logs, 3: Lily Pad Landing, 4: Full Expedition).
  • hop(dir, count): Hops in direction "up", "down", "left", or "right" for count steps (default 1).
  • hop_up(count), hop_down(count), hop_left(count), hop_right(count): Directional shortcuts.
  • wait(seconds): Pauses execution to wait for a traffic gap or ride a floating log.
frogger_game(1)
hop("up", 1)

wait(0.8)

hop("up", 3)
Move the mouse over a dotted box for more information.

  • Live Telemetry HUD: Displays current Score, Lives remaining, Row index, and Goals reached.
  • Relative Velocity Indicator: When resting on floating logs, notice how the log's drift velocity directly transfers to the frog's coordinate.
  • Interactive D-Pad & Keyboard Controls: You can also control the frog manually using the arrow keys or on-screen directional buttons!
  • Full Retro Sound Synthesis: Web Audio procedural sound effects for hopping, scoring, water submersion, and victory chimes.

Now you try. Can you hop across the highway to the median sidewalk, or try frogger_game(2) to ride river logs?

Type your code here:


See your results here: