JavaScript zum Erzielen von Feuerwerkseffekten (objektorientiert)

Klasse FireWork{
    Konstruktor(){
        
    }
    bindEvent(){
        lass _this = dies;
        ele.onclick = Funktion(){
            //Nachdem fly beendet ist, rufen Sie die Boom-Funktion_this.fly(_this.boom) auf;
        }
    }
    fliegen(boom){
        
    }
    Boom(){
        
    }
}

 *{
        Rand: 0;
        Polsterung: 0;
    }
    #Kasten{
        Breite: 800px;
        Höhe: 600px;
        Position: relativ;
        Rand: 100px automatisch;
        Hintergrund: #000000;
        Rand: 2px durchgehend rot;
        Überlauf: versteckt;
    }
    .Ball{
        Breite: 40px;
        Höhe: 40px;
        Randradius: 50 %;
        Position: absolut;
        unten: 0;
    }

<script src="./utils.js"></script>
<Skript>
// 
Klasse FireWork{
    Konstruktor(){
        diese.box = document.getElementById("box");
        dieser.box_offset = {
              links: box.offsetLeft,
              oben: box.offsetTop
        }
    }
    bindEvent(){
        lass _this = dies;
        this.box.onclick = Funktion( e ){
              e = e || Ereignis;
              _this.x = e.clientX - _this.box_offset.left; 
              _this.y = e.clientY - _this.box_offset.top; 
    
              _dies.fly(_dies.boom);
        }     
    }     
    fliegen(boom){
        ele = this.createEle();
        lass _this = dies;
        //Leg es in die Schachtel; 
        ele.style.left = dies.x + "px";
    
        lass _left = dies.x; 
        lass _top = dies.y; 
    
        animieren(ele, {
              oben: dies.y 
        } , Funktion(){
              ele.entfernen();
              _dieser.boom( _links , _oben );
        });
    }
    boom( x , y ){
        sei r = 100;
        lass count = 0; 
        lass _this = dies;
    
        für (sei i = 0; i < 20; i++) {
              ele = this.createEle();
              ele.style.left = x + "px";
              ele.style.top = y + "px";
              lass _left = parseInt(Math.cos(Math.PI / 10 * i) * r) + x;
              lass _top = parseInt(Math.sin( Math.PI / 10 * i ) * r) + y
              animieren(ele, {
                    links: _links,
                    oben: _top,
                    Deckkraft: 0 
              } , Funktion(){
                    ele.entfernen();
              })
        }
    }
    erstelleEle(){
        let ele = document.createElement("div");
        ele.className = "Ball";
        ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;
        diese.box.appendChild(ele);
        Element zurückgeben; 
    }
}

neues FireWork().bindEvent();
</Skript>

Funktion ein (dom, Ereignisname, Handler-Selektor, Delegationshandler) {
    wenn( Typ des Handler_Selektors === "Zeichenfolge" && Typ des Delegation_Handlers === "Funktion"){
        gibt Delegation zurück (dom, Ereignisname, Handler-Selektor, Delegationshandler);
    }
    //Erstellen Sie einen Ereignisnamen im DOM-Objekt: ein Array, das der Ereignisverarbeitungsfunktion entspricht; 
    // Bestimmen Sie, ob sich die aktuelle Ereignisverarbeitungsfunktion im DOM-Objekt befindet.
    var Ereignistyp = "_" + Ereignisname;
    wenn (Ereignistyp in dom) {
        dom[Ereignistyp].push(Handler-Selektor);
    } anders {
        dom[Ereignistyp] = [Handler-Selektor];
    }
    // Wenn Sie den Ereignisnamen direkt als Schlüsselwert im Objekt verwenden, tritt ein Konflikt mit dem ursprünglichen DOM-Funktionsnamen auf. 
    // Weil spezielle Ereignisnamen dazu führen, dass das Ereignis nicht ausgelöst wird, müssen wir den Ereignisnamen hier aufteilen. 
    dom.addEventListener(Ereignisname.split(".")[0], Handler-Selektor)
}
Funktion aus(dom, Ereignisname) {
    // Einen Satz von Ereignisverarbeitungsfunktionen abrufen, der dem Ereignisnamen im DOM-Objekt entspricht. 
    var callback_list = dom["_" + Ereignisname];
    // Ereignisse gemäß allen Funktionen in der Liste entfernen; 
    callback_list.forEach(Funktion (Ereignishandler) {
        dom.removeEventListener(event_name.split(".")[0], event_handler);
    })
    // Löschen Sie die Funktionsgruppe zur Ereignisverarbeitung im DOM-Objekt. 
    dom["_" + Ereignisname].Länge = 0;
}
    
Funktion Trigger(dom, Ereignistyp) {
    dom.dispatchEvent(neues Ereignis(Ereignistyp));
}
    
Funktion Delegation (dom, Ereignisname, Selektor, Ereignishandler) {
    dom.addEventListener(Ereignisname, Funktion (e) {
        e = e || Ereignis;
        var Ziel = e.Ziel || e.QuelleElement;
        während (Ziel !== dom) {
              Schalter (Selektor[0]) {
                    Fall ".":
                          wenn (Selektor.Slice(1) === Ziel.Klassenname) {
                                event_handler.call(Ziel, e)
                                zurückkehren;
                          }
                    Fall "#":
                          wenn (Selektor.Slice(1) === Ziel-ID) {
                                event_handler.call(Ziel, e)
                                zurückkehren;
                          }
                    Standard:
                          wenn (selector.toUpperCase() === ziel.nodeName) {
                                event_handler.call(Ziel, e)
                                zurückkehren;
                          }
              }
              Ziel = Ziel.übergeordneter Knoten;
        }
    })
}


Funktion animieren(dom, attrs, callback, Übergang = "Puffer", Geschwindigkeit = 10){
    // Übergang: Es gibt zwei Animationsmodi: „Buffer“ und „Liner“
    var _style = getComputedStyle( dom );
    
    // - 1. Datenverformung; 
    für(var attr in attrs ){
        attrs[attr] = {
              Ziel: attrs[attr],
              jetzt: _style[attr]
        }
        // - 2. Geschwindigkeit: positive oder negative Geschwindigkeit der gleichförmigen Bewegung; 
        wenn( Übergang === "Liner" ){
              attrs[attr].speed = attrs[attr].target > attrs[attr].now ? Geschwindigkeit : - Geschwindigkeit;
        }
    
        wenn(attr === "Deckkraft"){
              attrs[attr].ziel *= 100 
              attrs[attr].jetzt *= 100
        }anders{
              attrs[attr].jetzt = parseInt(attrs[attr].jetzt) 
        }
    }
    // - den Starttimer ausschalten;    
    LöschenInterval( dom.interval );
    dom.interval = setzeIntervall( Funktion() {
        für(var attr in attrs ){
              // Den aktuellen Wert und den Attributwert abrufen; 
              // attrs[attr].target : Zielwert; 
              // attrs[attr].now : aktueller Wert; 
    
              lass { Ziel, jetzt } = attrs[attr];
    
              // Puffergeschwindigkeit; 
              wenn( Übergang === "Puffer" ){
                    var Geschwindigkeit = (Ziel – jetzt) ​​/ 10;
                    Geschwindigkeit = Geschwindigkeit > 0? Math.ceil(Geschwindigkeit) : Math.floor(Geschwindigkeit);
              }sonst wenn(Übergang === "Liner"){
                    var Geschwindigkeit = attrs[attr].Geschwindigkeit; 
              }
    
              
              if( Math.abs(Ziel - jetzt) ​​<= Math.abs( Geschwindigkeit ) ){
                    
                    wenn(attr === "Deckkraft"){
                          dom.style[attr] = Ziel / 100;
                    }anders{
                          dom.style[attr] = Ziel + "px";
                    }
    
                    attrs[attr] löschen;
                    für(var attr in attrs ){
                          // Wenn Daten vorhanden sind, wird die Schleife mindestens einmal ausgeführt; 
                          gibt false zurück;
                    }
                    Intervall löschen(dom.interval);
                    Typ des Rückrufs === "Funktion"? Rückruf(): "";
              }anders{
                    jetzt += Geschwindigkeit;
    
                    wenn(attr === "Deckkraft"){
                          dom.style[attr] = jetzt / 100;
                    }anders{
                          dom.style[attr] = jetzt + "px";
                    }
                    // Dem Objekt einen Wert zuweisen; 
                    attrs[attr].now = jetzt;
              }
        }
    } , 30)
}