js, um einen coolen Feuerwerkseffekt zu erzielen

/*Legen Sie den CSS-Stil für die Leinwand fest*/
#Behälter {
        Breite: 80%;
        Höhe: 600px;
        Rand: 1px rot durchgezogen;
        Position: relativ;
        Rand: 20px automatisch;
        Cursor: Zeiger;
        Hintergrund: schwarz;
    }
<!-- Ein Div einrichten -->
<div id="Container"></div>

 //Knoten abrufen var app = document.getElementById('container');
        //Legen Sie ein Bindungsereignis für die App fest app.onclick = function(event) {
                var e = Ereignis || Fenster.Ereignis
               //Holen Sie sich die Koordinaten der Mausklickposition var pos = {
                    cy: e.offsetY,
                    cx: e.offsetX
                }
                neues Feuer (App, Pos)
            }

// Konstruktorfunktion Fire(app, pos) {
            //Setze die Eigenschaft auf die Variable this.app = app;
            dies.pos = pos;
            // Erstelle ein großes div
            dies.bf = Dokument.createElement('div');
            //Einen Klassennamen festlegen this.bf.className = 'fire';
            //Stil festlegen this.bf.style.left = this.pos.cx + 'px';
            dies.bf.style.background = dies.getColor();
            diese.app.appendChild(diese.bf);
            //Rufen Sie die Bewegungsfunktion this.move(this.bf, {
                oben: this.pos.cy
            }, () => {
                dies.bf.entfernen();
                dies.smallFire();
            })
        }

 .Feuer {
        Hintergrund: rot;
        Position: absolut;
        /* Beim Festlegen von „unten“ ergibt sich „oben“ als Maximalwert abzüglich der Mausklickposition*/
        unten: 0px;
        Breite: 6px;
        Höhe: 6px;
    }

//Eine Zufallszahl abrufen Methode Fire.prototype.rand = function(min, max) {
            gibt Math.round(Math.random() * (max - min) + min) zurück;
        }
 
 
//Methode um eine zufällige Farbe zu erhalten Fire.prototype.getColor = function() {
         sei Summe = '#';
         für (sei i = 0; i < 6; i++) {
               Summe += this.rand(0, 15).toString(16)
           }
             Rücklaufsumme;
           }

Fire.prototype.move = Funktion(Element, Ziel, cb) {
                // Intervall löschen(Zeiten);
                let times = setIntervall(Funktion() {
                    // konsole.log(dies);
                    var einAus = true;
                    // Durchlaufe die Richtung und das Ziel der Bewegung for (let attr in target) {
                        // attr stellt das Attribut der Bewegung dar // console.log(attr);
                        // Den Echtzeitwert des Elementattributs abrufen let tmpVal = parseInt(this.getPos(ele, attr))
                            // Geschwindigkeit berechnen
                            // konsole.log(tmpVal, attr);
                        lass Geschwindigkeit = (Ziel[attr] – tmpVal) / 10;
                        // Rundengeschwindigkeit = Geschwindigkeit > 0 ? Math.ceil(Geschwindigkeit) : Math.floor(Geschwindigkeit);
                        // Stoppen Sie den Timer, wenn sich ein Attribut an die Position bewegt, und setzen Sie den Schalterzustand, wenn (tmpVal == target[attr]) onOff = true;
                        // Das Element bewegen ele.style[attr] = tmpVal + speed + 'px';
                    }
 
                    // Bestimmen Sie den Schalterstatus und löschen Sie den Timer für (var moveAttr in target) {
                        // Wenn sie nicht gleich sind, bedeutet das, dass einige Attribute nicht an die Position bewegt wurden und der Timer nicht gestoppt werden kann, if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
                            einAus = falsch;
                            brechen;
                        }
                    }
                    wenn (einAus) {
                        clearInterval(Zeiten);
                        cb und cb();
                    }
                    // konsole.log(1111);
                }.binden(dies), 30)
            }
            // Funktion zum Abrufen der Echtzeitposition eines Elements Fire.prototype.getPos = function(obj, attr) {
            if (obj.currentStyle) { // CSS-Stil abrufen return obj.currentStyle[attr];
            } anders {
                gibt getComputedStyle(Objekt)[Attr] zurück
            }
        }

.kleines Feuer {
        Breite: 10px;
        Höhe: 10px;
        Position: absolut;
        Randradius: 50 %;
    }

//Kleines Feuerwerk Fire.prototype.smallFire = function() {
            //Zuerst legen wir die Anzahl der kleinen Feuerwerke fest let num = this.rand(50, 60)
            //Durchlaufe und lege für jedes kleine Feuerwerk einen anderen Stil fest for (let i = 0; i < num; i++) {
                Lassen Sie sf = document.createElement('div');
                sf.className = "kleines Feuer";
                sf.style.left = diese.pos.cx + 'px';
                sf.style.top = diese.pos.cy + 'px';
                sf.style.background = this.getColor();
                //Konsole.log(sf);
                //An die Seite anhängen this.app.appendChild(sf);
                //Die Flugbahn des kleinen Feuerwerks in eine Kreisbewegung umwandeln//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
                //var links = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
                 //Geben Sie dem kleinen Feuerwerk eine zufällige Position, die jede beliebige Position auf der Leinwand sein kann. let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
                 let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);
                //Rufen Sie die Bewegungsfunktion this.move(sf, {
                    oben: oben,
                    links: links
                }, Funktion() {
                    sf.entfernen();
                })
            }
}