JSFiddle - React, Tailwind, and code Playground

by Harry He

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <canvas id="canvasForfireworks" width="800px" height="560px">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

JavaScript

function makeFireworkGroup(canvasId, numberOfFireworks) {
    function shotFireworkGroup(fireworkGroup) {
        var fireworks = fireworkGroup.getFireworks();
        fireworks.forEach(function(firework) {
            shotFirework(firework);
        });
    }
    
    function shotFirework(firework) {
        firework.shot();
        
        var wait = randomInRange(new Range(1200, 1600));
        setTimeout(shotFirework, wait, firework);
    }
    
    function renderAndUpdate(fireworks) {
        return function() {
            fireworks.render();
            fireworks.update();
        };
    }

    var fireworks = new FireworkGroup(canvasId, numberOfFireworks);
    shotFireworkGroup(fireworks);
    
    var renderAndUpdateFunc = renderAndUpdate(fireworks)
    setInterval(renderAndUpdateFunc, 15);
}

function FireworkGroup(canvasId, numberOfFireworks) {
    var fireworkGroupElement = document.getElementById(canvasId);
    var context = fireworkGroupElement.getContext("2d");
    
    var width = fireworkGroupElement.clientWidth;
    var height = fireworkGroupElement.clientHeight;
    
    var fireworks = initFireworkGroup(width, height);
    
    this.getFireworks = function() {
        return fireworks;
    }

    this.render = function() {
        context.fillStyle = "#010212";
        context.fillRect(0, 0, width, height)
        
        fireworks.forEach(function(firework) {
           firework.render(context);
        });
    }
    
    this.update = function() {
        fireworks.forEach(function(firework) {
           firework.update();
        });
    }
    
    this.shot = function() {
        fireworks.forEach(function(firework) {
           firework.shot();
        });
    }

    function initFireworkGroup(width, height) {
        var fireworks = [];
        for(var i = 0; i < numberOfFireworks; ++i) {
            var pos = {
                x: Math.round((width / numberOfFireworks) * (i + 0.5)),
                y: height * 0.95
            };
   ...