クールな花火効果を実現するjs

/*キャンバスの CSS スタイルを設定します*/
＃容器 {
        幅: 80%;
        高さ: 600px;
        境界線: 1px 赤実線;
        位置: 相対的;
        マージン: 20px 自動;
        カーソル: ポインタ;
        背景：黒;
    }
<!-- div を設定します -->
<div id="コンテナ"></div>

 //ノードを取得します var app = document.getElementById('container');
        //アプリのバインディングイベントを設定する app.onclick = function(event) {
                var e = イベント || window.event
               //マウスクリック位置の座標を取得します。var pos = {
                    cy: e.offsetY、
                    cx: e.オフセットX
                }
                新しいFire(アプリ、pos)
            }

// コンストラクタ関数 Fire(app, pos) {
            // プロパティを変数に設定します this.app = app;
            this.pos = pos;
            // 大きなdivを作成する
            this.bf = document.createElement('div');
            //クラス名を設定します this.bf.className = 'fire';
            // スタイルを設定 this.bf.style.left = this.pos.cx + 'px';
            this.bf.style.background = this.getColor();
            this.app.appendChild(this.bf);
            //モーション関数を呼び出す this.move(this.bf, {
                トップ: this.pos.cy
            }, () => {
                this.bf.remove();
                this.smallFire();
            })
        }

 。火 {
        背景: 赤;
        位置: 絶対;
        /* 下を設定すると、マウスのクリック位置を差し引いた最大値が上になります*/
        下: 0px;
        幅: 6px;
        高さ: 6px;
    }

//乱数を取得するメソッド Fire.prototype.rand = function(min, max) {
            Math.round(Math.random() * (max - min) + min) を返します。
        }
 
 
//ランダムな色を取得するメソッド Fire.prototype.getColor = function() {
         合計を '#' とします。
         (i = 0; i < 6; i++ とします) {
               合計 += this.rand(0, 15).toString(16)
           }
             合計を返します。
           }

Fire.prototype.move = function(ele, target, cb) {
                // クリア間隔(times);
                times = setInterval(function() {
                    // コンソールログ(これ);
                    var onOff = true;
                    // 移動の方向とターゲットをトラバースする for (let attr in target) {
                        // attr は移動の属性を表します // console.log(attr);
                        // 要素属性のリアルタイム値を取得する let tmpVal = parseInt(this.getPos(ele, attr))
                            // 速度を計算する
                            // console.log(tmpVal, attr);
                        speed = (target[attr] - tmpVal) / 10とします。
                        // ラウンド速度 = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        // タイマーを停止し、属性が位置に移動したらスイッチ状態を設定します。if (tmpVal == target[attr]) onOff = true;
                        // 要素を移動します ele.style[attr] = tmpVal + speed + 'px';
                    }
 
                    // スイッチの状態を判定し、タイマーをクリアします for (var moveAttr in target) {
                        // 等しくない場合は、一部の属性が位置に移動されていないことを意味し、タイマーを停止することはできません。if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
                            オンオフ = false;
                            壊す;
                        }
                    }
                    オンオフの場合
                        クリア間隔(回);
                        cb && cb();
                    }
                    // コンソールログ(1111);
                }.bind(これ), 30)
            }
            // 要素のリアルタイム位置を取得する関数 Fire.prototype.getPos = function(obj, attr) {
            if (obj.currentStyle) { // CSSスタイルを取得します return obj.currentStyle[attr];
            } それ以外 {
                getComputedStyle(obj)[attr]を返す
            }
        }

.small-fire {
        幅: 10px;
        高さ: 10px;
        位置: 絶対;
        境界線の半径: 50%;
    }

//小さな花火 Fire.prototype.smallFire = function() {
            //まず、小さな花火の数を設定します。let num = this.rand(50, 60)
            // それぞれの小さな花火を走査して異なるスタイルを設定します for (let i = 0; i < num; i++) {
                sf = document.createElement('div'); とします。
                sf.className = 'small-fire';
                sf.style.left = this.pos.cx + 'px';
                sf.style.top = this.pos.cy + 'px';
                sf.style.background = this.getColor();
                //コンソールログ(sf);
                //ページに追加 this.app.appendChild(sf);
                //小さな花火の軌道を円運動にします//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
                //var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
                 // 小さな花火にランダムな位置を指定します。キャンバス内の任意の位置にすることができます。let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
                 left = this.rand(0, this.app.offsetWidth - sf.offsetWidth); とします。
                //モーション関数を呼び出す this.move(sf, {
                    トップ: トップ、
                    左: 左
                }、 関数（） {
                    sf.remove();
                })
            }
}