Workshop › Bomberman-style Arena › Step 18 of 42

Fire!

What we are doing

An explosion leaves flames: short-lived objects { r, c, time }. The first flame burns on the bomb's own tile, drawn as an orange square with a yellow heart.

```js
const FLAME_TIME = 30

let flames // { r, c, time }

  flames = []

  flames.push({ r: bomb.r, c: bomb.c, time: FLAME_TIME })

  for (const f of flames) {
    ctx.fillStyle = '#f97316'
    ctx.fillRect(f.c * TILE + 2, TOP + f.r * TILE + 2, TILE - 4, TILE - 4)
    ctx.fillStyle = '#fde047'
    ctx.fillRect(f.c * TILE + 9, TOP + f.r * TILE + 9, TILE - 18, TILE - 18)
  }
```

What it means

explode adds a flame on the bomb's tile.
Each flame is drawn as two squares: orange, 2 pixels in from the tile's edge, and yellow, 9 pixels in.
The flames are drawn after the tiles and before the bombs and the player.

Your turn

Above DIRS write FLAME_TIME; above let held write let flames; in reset, above held = [], write flames = [].
In explode, under the filter line, write the push.
In draw, above the bombs line, write the flames loop.

Skills: Game states, Drawing on a canvas

← The fuse burns down Flames die down →

All steps