Workshop › Lunar Lander › Step 16 of 31

A flickering flame

What we are doing

While the engine burns, an orange flame shows under the lander. Its tip jumps a little every frame, so it flickers.

```js
if (burning()) {
  ctx.fillStyle = '#f97316'
  ctx.beginPath()
  ctx.moveTo(-5, 8)
  ctx.lineTo(5, 8)
  ctx.lineTo(0, 16 + Math.random() * 8)
  ctx.fill()
}
```

What it means

The flame is a triangle under the body: from (-5, 8) and (5, 8) down to a tip between y = 16 and 24.
It is drawn before the body, inside save/restore, so it tilts with the lander.

Your turn

In drawLander, under ctx.rotate(lander.angle), write the flame block.

Skills: Drawing on a canvas

← The engine Fuel →

All steps