花火効果を実現するJavaScript（オブジェクト指向）

クラス FireWork{
    コンストラクタ（）{
        
    }
    バインドイベント(){
        _this = this とします。
        ele.onclick = 関数(){
            //fly が終了したら、boom を呼び出します function_this.fly(_this.boom);
        }
    }
    飛ぶ(ブーム){
        
    }
    ブーム（）{
        
    }
}

 *{
        マージン: 0;
        パディング: 0;
    }
    ＃箱{
        幅:800ピクセル;
        高さ:600px;
        位置: 相対的;
        マージン: 100px 自動;
        背景:#000000;
        border:2px 赤一色;
        オーバーフロー: 非表示;
    }
    。ボール{
        幅: 40px;
        高さ: 40px;
        境界線の半径: 50%;
        位置: 絶対;
        下部: 0;
    }

<script src="./utils.js"></script>
<スクリプト>
// 
クラス FireWork{
    コンストラクタ（）{
        this.box = document.getElementById("box");
        this.box_offset = {
              左: box.offsetLeft、
              上: box.offsetTop
        }
    }
    バインドイベント(){
        _this = this とします。
        this.box.onclick = 関数(e){
              e = e || イベント;
              _this.x = e.clientX - _this.box_offset.left; 
              _this.y = e.clientY - _this.box_offset.top; 
    
              _this.fly(_this.boom);
        }     
    }     
    飛ぶ(ブーム){
        ele = this.createEle() とします。
        _this = this とします。
        //ボックスに入れます。 
        ele.style.left = this.x + "px";
    
        _left = this.x とします。 
        _top = this.y とします。 
    
        アニメーション(ele, {
              トップ : this.y 
        } 、 関数（）{
              要素を削除します。
              _this.boom( _left 、 _top );
        });
    }
    ブーム(x,y){
        r = 100 とします。
        count = 0 とします。 
        _this = this とします。
    
        for(i = 0 ; i < 20 ; i++){
              ele = this.createEle() とします。
              ele.style.left = x + "px";
              ele.style.top = y + "px";
              _left = parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x とします。
              _top = parseInt(Math.sin( Math.PI / 10 * i ) * r) + y とします。
              アニメーション(ele, {
                    左 : _左、
                    トップ: _top,
                    不透明度: 0 
              } 、 関数（）{
                    要素を削除します。
              })
        }
    }
    要素を作成します（）{
        ele = document.createElement("div"); とします。
        ele.className = "ボール";
        ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;
        this.box.appendChild(ele);
        要素を返します。 
    }
}

新しい FireWork().bindEvent();
</スクリプト>

関数 on(dom, イベント名, ハンドラーセレクター, 委任ハンドラー) {
    if( typeof handler_selector === "文字列" && typeof delegation_handler === "関数"){
        delegation(dom、event_name、handler_selector、delegation_handler) を返します。
    }
    // DOM オブジェクトにイベント名を作成します。イベント処理関数に対応する配列です。 
    // 現在のイベント処理関数が DOM オブジェクト内にあるかどうかを判断します。
    var イベントタイプ = "_" + イベント名;
    if (event_type in dom) {
        dom[イベントタイプ].push(ハンドラセレクタ);
    } それ以外 {
        dom[イベントタイプ] = [ハンドラセレクタ];
    }
    // オブジェクトのキー値としてイベント名を直接使用すると、元の DOM 関数名と競合します。 
    // 特殊なイベント名を使用するとイベントがトリガーされなくなるため、ここでイベント名を分割する必要があります。 
    dom.addEventListener(イベント名.split(".")[0], ハンドラーセレクター)
}
関数 off(dom, イベント名) {
    // DOM オブジェクト内のイベント名に対応するイベント処理関数のセットを取得します。 
    var callback_list = dom["_" + イベント名];
    // リスト内のすべての関数に従ってイベントを削除します。 
    callback_list.forEach(関数 (イベントハンドラ) {
        dom.removeEventListener(イベント名.split(".")[0], イベントハンドラ);
    })
    // DOM オブジェクト内のイベント処理関数グループをクリアします。 
    dom["_" + イベント名].length = 0;
}
    
関数トリガー(dom, イベントタイプ) {
    dom.dispatchEvent(新しいイベント(event_type));
}
    
関数委任(dom, イベント名, セレクター, イベントハンドラー) {
    dom.addEventListener(イベント名、関数(e) {
        e = e || イベント;
        var ターゲット = e.target || e.srcElement;
        while (ターゲット !== dom) {
              スイッチ（セレクタ[0]）{
                    場合 "。"：
                          if (selector.slice(1) === target.className) {
                                イベントハンドラの呼び出し(ターゲット、e)
                                戻る;
                          }
                    場合 "＃"：
                          if (selector.slice(1) === target.id) {
                                イベントハンドラの呼び出し(ターゲット、e)
                                戻る;
                          }
                    デフォルト：
                          if (selector.toUpperCase() === target.nodeName) {
                                イベントハンドラの呼び出し(ターゲット、e)
                                戻る;
                          }
              }
              ターゲット = target.parentNode;
        }
    })
}


関数 animate( dom , attrs , callback , transition = "buffer", speed = 10 ){
    // 遷移: アニメーション モードには「バッファ」と「ライナー」の 2 つがあります
    var _style = getComputedStyle(dom);
    
    // - 1. データの変形; 
    for(var attr in attrs){
        attrs[属性] = {
              ターゲット: attrs[attr],
              現在:_style[属性]
        }
        // - 2. 速度: 等速運動の正または負の速度。 
        if( 遷移 === "ライナー" ){
              attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;
        }
    
        if( attr === "不透明度"){
              attrs[attr].target *= 100 
              attrs[attr].now *= 100
        }それ以外{
              attrs[attr].now = parseInt(attrs[attr].now) 
        }
    }
    // - 開始タイマーをオフにします。    
    間隔をクリアします(dom.interval);
    dom.interval = setInterval( 関数() {
        for(var attr in attrs){
              // 現在の値と属性値を取得します。 
              // attrs[attr].target: ターゲット値; 
              // attrs[attr].now: 現在の値; 
    
              {target, now} = attrs[attr]とします。
    
              // バッファリング速度; 
              if( 遷移 === "バッファ" ){
                    var speed = (ターゲット - 現在) / 10 ;
                    速度 = 速度 > 0 ? Math.ceil( 速度 ) : Math.floor( 速度 );
              }else if(transition === "liner"){
                    var speed = attrs[attr].speed; 
              }
    
              
              if( Math.abs(ターゲット - 現在) <= Math.abs(速度) ){
                    
                    if( attr === "不透明度"){
                          dom.style[attr] = ターゲット / 100;
                    }それ以外{
                          dom.style[attr] = ターゲット + "px";
                    }
    
                    attrs[attr]を削除します。
                    for(var attr in attrs){
                          // データがある場合、ループは少なくとも 1 回実行されます。 
                          false を返します。
                    }
                    dom.interval をクリアします。
                    typeof callback === "function" ? callback() : "";
              }それ以外{
                    今 += 速度;
    
                    if( attr === "不透明度"){
                          dom.style[attr] = 現在 / 100;
                    }それ以外{
                          dom.style[attr] = now + "px";
                    }
                    // オブジェクトに値を割り当てます。 
                    attrs[attr].now = now;
              }
        }
    } 、30）
}