Phaser plugin that draws a shockwave as an expanding line

shockwave.js

const size = 48;
const maxFrames = 6;
const blastRadius = 23;

export default class Shockwave extends Phaser.Plugin {
  constructor(game, parent) {
    super(game, parent);

    this.firing = false;
    this.x = this.y = 0;
    this.radius = 0;
    this.radiusDelta = 2;
    this.currentFrame = 0;
    this.frames = [];
    this.images = [];
    for (let i = 0; i < maxFrames; i++) {
      const bmd = game.make.bitmapData(size, size);
      const image = game.add.image(0, 0, bmd);
      image.anchor.setTo(0.5);
      image.visible = false;
      this.frames.push(bmd);
      this.images.push(image);
    }

    setTimeout(() => {
      const { player } = game;
      this.fire(player.x, player.y);
    }, 3000);
  }

  fire(x, y) {
    if (this.firing) {
      return;
    }
    this.firing = true;
    this.x = x;
    this.y = y;
    this.radius = 0;
    this.frames.forEach(frame => frame.cls());
    this.images.forEach(image => {
      image.x = x;
      image.y = y;
    });
  }

  update() {
    if (!this.firing) {
      return;
    }
    if (this.radius > blastRadius) {
      this.firing = false;
      this.images.forEach(image => image.visible = false);
    }
  }

  render() {
    if (!this.firing) {
      return;
    }
    let currentImage = this.images[this.currentFrame];
    currentImage.visible = false;
    const frame = this.frames[this.currentFrame];
    frame.cls();
    if (this.radius < blastRadius) {
      // const colorComponent = Math.floor((blastRadius - this.radius)).toString(16);
      const { ctx } = frame;
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1;
      ctx.beginPath();
      // consider bmp.circle
      ctx.arc(size / 2, size / 2, this.radius, 0, Math.PI * 2);
      ctx.stroke();
    }

    for (let i = 1; i < 5; i++) {
      let ghostFrameIndex = this.currentFrame - i;
      if (ghostFrameIndex < 0) {
        ghostFrameIndex = this.frames.length + ghostFrameIndex;
      }
      const ghostFrame = this.frames[ghostFrameIndex];
      frame.copy(ghostFrame, 0, 0, size, size, 0, 0, size, size, 0, 0, 0, 1, 1, 0.45 / i);
    }
    frame.render();

    this.currentFrame += 1;
    if (this.currentFrame >= this.frames.length) {
      this.currentFrame = 0;
    }

    currentImage = this.images[this.currentFrame];
    currentImage.visible = true;

    this.radius += this.radiusDelta;
    this.radiusDelta = Math.max(0.1, this.radiusDelta - 0.1);
  }
}