JavaScript实现烟花特效(面向对象)

class FireWork{    constructor(){            }    bindEvent(){        let _this = this;        ele.onclick = function(){            //fly结束再去调用boom函数            _this.fly(_this.boom);        }    }    fly(boom){            }    boom(){            }}

 *{        margin: 0;        padding: 0;    }    #box{        width:800px;        height:600px;        position: relative;        margin: 100px auto;        background:#000000;        border:2px solid red;        overflow: hidden;    }    .ball{        width: 40px;        height: 40px;        border-radius: 50%;        position: absolute;        bottom: 0;    }

<script src="./utils.js"></script><script>// class FireWork{    constructor(){        this.box = document.getElementById("box");        this.box_offset = {              left : box.offsetLeft,              top  : box.offsetTop        }    }    bindEvent(){        let _this = this;        this.box.onclick = function( e ){              e = e || event;              _this.x = e.clientX - _this.box_offset.left;               _this.y = e.clientY - _this.box_offset.top;                   _this.fly(_this.boom);        }         }         fly( boom ){        let ele = this.createEle();        let _this = this;        // 放入box之中;         ele.style.left = this.x + "px";            let _left = this.x ;         let _top  = this.y ;             animate( ele , {              top : this.y         } , function(){              ele.remove();              _this.boom( _left , _top );        });    }    boom( x , y ){        let r = 100;        let count = 0 ;         let _this = this;            for(let i = 0 ; i < 20 ; i ++){              let ele = this.createEle();              ele.style.left = x +"px";              ele.style.top  = y + "px";              let _left =  parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x ;              let _top =  parseInt(Math.sin(  Math.PI / 10 * i ) * r) + y              animate( ele , {                    left : _left,                    top  : _top,                    opacity : 0               } , function(){                    ele.remove();              })        }    }    createEle(){        let ele = document.createElement("div");        ele.className = "ball";        ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;        this.box.appendChild( ele );        return ele ;     }}new FireWork().bindEvent();</script>

function on(dom, event_name, handler_selector, delegation_handler) {    if( typeof handler_selector === "string" && typeof delegation_handler === "function"){        return delegation(dom, event_name, handler_selector, delegation_handler);    }    // 在dom对象里面建立一个事件名 : 事件处理函数对应的数组;     // 判定当前事件处理函数是否在dom对象之中;    var event_type = "_" + event_name;    if (event_type in dom) {        dom[event_type].push(handler_selector);    } else {        dom[event_type] = [handler_selector];    }    // 如果直接用事件名当成对象之中的key值，那么会和原有的dom功能名称冲突;     // 因为特殊的事件名会导致事件无法触发，所以我们在这里要对事件名进行拆分处理;     dom.addEventListener(event_name.split(".")[0], handler_selector)}function off(dom, event_name) {    // 获取到dom对象里面事件名对应的一组事件处理函数;     var callback_list = dom["_" + event_name];    // 根据列表里面的所有函数进行事件移除 ;     callback_list.forEach(function (event_handler) {        dom.removeEventListener(event_name.split(".")[0], event_handler);    })    // 清空dom对象里面的事件处理函数组;     dom["_" + event_name].length = 0;}    function trigger(dom, event_type) {    dom.dispatchEvent(new Event(event_type));}    function delegation(dom, event_name, selector, event_handler) {    dom.addEventListener(event_name, function (e) {        e = e || event;        var target = e.target || e.srcElement;        while (target !== dom) {              switch (selector[0]) {                    case ".":                          if (selector.slice(1) === target.className) {                                event_handler.call(target , e )                                return;                          }                    case "#":                          if (selector.slice(1) === target.id) {                                event_handler.call(target, e)                                return;                          }                    default:                          if (selector.toUpperCase() === target.nodeName) {                                event_handler.call(target, e)                                return;                          }              }              target = target.parentNode;        }    })}function animate( dom , attrs , callback , transition = "buffer", speed = 10 ){    // transition : 有两种动画方式 "buffer" , "liner"    var _style = getComputedStyle( dom );        // - 1. 数据变形 ;     for(var attr in attrs ){        attrs[attr] = {              target : attrs[attr],              now    : _style[attr]        }        // - 2. 速度 : 匀速运动速度正负 ;         if( transition === "liner" ){              attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;        }            if( attr === "opacity"){              attrs[attr].target *= 100               attrs[attr].now    *= 100        }else{              attrs[attr].now = parseInt(attrs[attr].now)         }    }    // - 关闭开启定时器;        clearInterval( dom.interval );    dom.interval = setInterval( function(){        for(var attr in attrs ){              // 取出当前值和属性值 ;               // attrs[attr].target : 目标值;               // attrs[attr].now    : 当前值;                   let { target , now } = attrs[attr];                  // 缓冲运动时候的速度;               if( transition === "buffer" ){                    var speed = (target - now ) / 10 ;                    speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );              }else if(transition === "liner"){                    var speed =  attrs[attr].speed;               }                                if( Math.abs(target - now) <= Math.abs( speed ) ){                                        if( attr === "opacity"){                          dom.style[attr] = target / 100;                    }else{                          dom.style[attr] = target  + "px";                    }                        delete attrs[attr];                    for(var attr in attrs ){                          // 如果有数据循环会执行至少一次;                           return false;                    }                    clearInterval(dom.interval);                    typeof callback === "function" ? callback() : "";              }else{                    now += speed;                        if( attr === "opacity"){                          dom.style[attr] = now / 100;                    }else{                          dom.style[attr] = now  + "px";                    }                    // 给对象赋值;                     attrs[attr].now = now;              }        }    } , 30)}