Workshop › Scorched Earth-style Artillery › Step 10 of 23
Where the shell meets the ground there is an explosion: an orange fireball that grows for 20 frames. During that time
the state is 'boom', and nobody can shoot. A shell that flies off the side just ends the shot, with no explosion.
```js
const BLAST = 30 // explosion radius
let blast // { x, y } while an explosion shows
let timer // frames left to watch the explosion
blast = null
function explode(x, y) {
blast = { x, y }
}
if (state === 'boom' && --timer === 0) {
blast = null
state = 'aiming'
}
if (hit !== 'away') explode(shell.x, shell.y)
shell = null
state = 'boom'
timer = 20
if (blast) {
// The fireball grows as the timer runs down.
ctx.fillStyle = 'rgba(249, 115, 22, 0.8)'
ctx.beginPath()
ctx.arc(blast.x, blast.y, BLAST * (1 - timer / 40), 0, Math.PI * 2)
ctx.fill()
}
```--timer takes one off first and then compares, so the explosion lasts exactly 20 frames.explode only marks the spot for now; next steps make it dig and hurt.BLAST (timer 20) up to BLAST (timer 0).GRAVITY, write BLAST; under shell, write blast and timer; in reset, clear blast.update, write explode.update, count the explosion down; at the end, explode and wait.draw, draw the fireball after the shell.Skills: Game states, Drawing on a canvas