logo
By Lawrence

5 minutes

Lay Down a Smoke Screen

Every answer this stage has so far runs through the front bumper, and lesson 4 made that expensive — the ram that kills a hostile bills you for the same collision. Outrunning the problem is not the plan either: the red pool's profile tops out at 34 against your 30. A combat car needs something it can leave behind it.

Give the player a smoke screen

One component, on the player, next to the drive law:

"SmokeScreen": {
  "maxCharges": 2,
  "rechargeSeconds": 8,
  "ventSeconds": 1.6,
  "dropInterval": 0.2,
  "puffLifetime": 4,
  "maxPuffs": 12,
  "dropBack": 3.5,
  "puffY": 0.5,
  "blindRadius": 5,
  "pursuerTag": "enemy",
  "deployKeys": ["Space"]
}

No new entity. deployKeys is a list of KeyboardEvent.code values, and the Input entity from lesson 2 is what publishes the keyboard.keydown those keys are matched against — without it the car has a rack of smoke and no button.

A screen is not one cloud, and the state it needs to be four numbers wide:

src/components/SmokeScreen/SmokeScreen.core.ts
/** Charges held, and the three clocks. */
export interface SmokeScreenState {
  charges: number;
  /** Seconds until the next charge returns. 0 when the rack is full. */
  rechargeTimer: number;
  /** Seconds left venting. 0 means the button is not down. */
  ventTimer: number;
  /** Seconds to the next puff. */
  dropTimer: number;
}

Press the button and the car vents for ventSeconds, dropping a puff every dropInterval — a line of overlapping clouds laid down the road, each blinding for puffLifetime before it thins out. Which is why the screen keeps working while you are turning: the puffs mark where you were.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search