JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<canvas id="screen"></canvas>

JavaScript

// Code by Matheus Lin
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var minVx = -10;
var deltaVx = 20;
var minVy = 25
var deltaVy = 15;
var minParticleV = 5;
var deltaParticleV = 5;
var gravity = 1;
var explosionRadius = 200;
var bombRadius = 10;
var explodingDuration = 100;
var explosionDividerFactor = 10; // I couldn't find a better name. Got any?
var nBombs = 1; // initial
var percentChanceNewBomb = 5;
function Color(min) {
  min = min || 0;
  this.r = colorValue(min);
  this.g = colorValue(min);
  this.b = colorValue(min);
  this.style = createColorStyle(this.r, this.g, this.b);
};
function colorValue(min) {
  return Math.floor(Math.random() * 255 + min);
}
function createColorStyle(r,g,b) {
  return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
// A Bomb. Or firework.
function Bomb(){
  var self = this; 
  self.radius = bombRadius;
  self.previousRadius = bombRadius;
  self.explodingDuration = explodingDuration;
  self.hasExploded = false;
  self.alive = true;
  self.color = new Color();
  self.px = (window.innerWidth / 4) + (Math.random() * window.innerWidth / 2);
  self.py = window.innerHeight;
  self.vx = minVx + Math.random() * deltaVx;
  self.vy = (minVy + Math.random() * deltaVy) * -1; // because y grows downwards
  self.update = function(particlesVector){
    if(self.hasExploded){
      var deltaRadius = explosionRadius - self.radius;
      self.previousRadius = self.radius;
      self.radius += deltaRadius / explosionDividerFactor;
      self.explodingDuration--;
      if(self.explodingDuration == 0){
        self.alive = false;
      }
    }
    else{
      self.vx += 0;
      self.vy += gravity;
      if(self.vy >= 0){ // invertion point
        self.explode(particlesVector);
      }
      self.px += self.vx;
      self.py += self.vy;
    }
  };
  self.draw = function(ctx){
    ctx.beginPath();
    ctx.arc(self.px, self.py, self.previousRadius, 0, Math.PI * 2, false);
    if(self.hasExploded){
    }
    else{
     ...