Fireworks

Fireworks uses JavaScript and HTML Canvas to allow for users to interactively create their own firework display.

Gameplay

Click or click and drag on the screen to shoot fireworks. This is achieved by using event listeners checking for mousedown, mousemove, and mouseup.

shoot() {
  let that = this;
  that.canvas.addEventListener('mousedown', (e) => {
    e.preventDefault();
    let x = e.clientX;
    let y = e.clientY;
    this.dragStart = [x, y];
    this.drag = true;
    that.shootFirework(this.dragStart, that.game, that.single);
  })

  that.canvas.addEventListener('mousemove', e => {
    if (this.drag) {
      let x = e.clientX;
      let y = e.clientY;
      this.dragEnd = [x, y];
      this.single = false;
      that.shootFirework(this.dragEnd, that.game, this.single);
    }
  })

  that.canvas.addEventListener('mouseup', e => {
    this.drag = false;
    this.single = true;
  })
}

Click:

Drag:

Features

This project required a good amount of trigonometry in order to calculate the correct coordinates for the firework. The color of the firework is determined by its target location, while a particle's color just by its position.

When a firework reaches its target location, an explosion is generated by releasing a number of particles from that location. Those particles may explode again, depending on their particle.gunPowder.

explode(firework) {
  if (firework.gunPowder > 0){
    for (let i = 0; i < this.setN(firework); i++) {
      let rad = Util.makeCircle(Util.getRandomInteger(-50, 50));
      let newPos = [firework.pos[0] + rad[0], firework.pos[1] + rad[1]];
      let particle = new Particle({pos: newPos, game: this, startPos: firework.pos, gunPowder: firework.gunPowder - 1});
      this.addParticle(particle);
    }
    firework.gunPowder -= 1;
  }
}

Future Features