基于面向对象思想、用原生JS实现的烟花效果【附源码】

话不多说，上代码：

CSS部分：

#sky{
    width: 80%;
    height: 500px;
    background: #000;
    margin:20px auto;
    cursor: crosshair;
    position: relative;
    overflow: hidden;
}
.fire{
    width: 10px;
    height:10px;
    position: absolute;
    bottom: 0;
    border-radius: 50%;
}
.small-fire{
    width: 10px;
    height:10px;
    position: absolute;
    border-radius: 50%;
}

HTML部分：

<div id="sky"></div>

JS部分：

class Fire{
    constructor(pos){
        this.cont = document.getElementById("sky");
        this.x = pos.x;
        this.y = pos.y;
    }
    create(){
        // 创建元素设置样式和位置
        this.f = document.createElement("div");
        this.f.className = "fire";
        this.f.style.background = randomColor();
        this.cont.appendChild(this.f);
        // 位置为鼠标点击的坐标的位置
        this.f.style.left = this.x + "px";
        // 初始信息设置完成后，开始运动
        this.fireMove();
    }
    fireMove(){
        // 调用了运动函数，传入要运动的元素，运动的属性和目标，结束后要做的事情
        move(this.f,{
            top:this.y
        },()=>{
            // 当主体烟花运动到目标后，删除主体烟花
            this.f.remove();
            // 准备创建小烟花：
            // 设置总个数为随机数
            var randomNum = random(10,20);
            // 设置小烟花炸出来的圆的半径
            var r = random(100,200);
            // 根据个数，重复创建小烟花实例
            for(var i=0;i<randomNum;i++){
                // 创建实例时，需要将：以下信息都传到小烟花的实例中
                var sf = new SmallFire({
                    cont:this.cont,
                    x:this.x,
                    y:this.y,
                    r:r,
                    sum:randomNum,
                    i:i
                });
                // 执行创建方法
                sf.create();
            }
        });
    }
}

class SmallFire{
    constructor(obj){
        // 接收并解析：大框，坐标，半径，个数，当前烟花的索引
        this.cont = obj.cont;
        this.x = obj.x;
        this.y = obj.y;
        this.r = obj.r;
        this.sum = obj.sum;
        this.i = obj.i;
    }
    create(){
        // 创建小烟花的元素，设置位置，和样式
        this.f = document.createElement("div");
        this.f.className = "small-fire";
        this.f.style.background = randomColor();
        this.cont.appendChild(this.f);
        this.f.style.left = this.x + "px";
        this.f.style.top = this.y + "px";
        // 小烟花开始运动
        this.smallMove();
    }
    smallMove(){
        move(this.f,{
            left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
            top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y
        },()=>{
            this.f.remove();
        });
    }
}

var ocont = document.getElementById("sky");
ocont.onclick = function(eve){
    var e = eve || window.event;
    // 获取坐标，准备给将来的烟花元素使用
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    // 创建烟花元素，时，将坐标传进去，方便将来使用
    var f = new Fire({
        x:x,
        y:y
    });
    // 执行创建烟花的方法
    f.create();
}
// 封装随机数函数
function random(a,b){
    return Math.round(Math.random()*(a-b)+b);
}
// 封装随机颜色
function randomColor(){
    return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
}

效果如下：

当然了，要实现以上效果，离开了运动函数是肯定不可以的。
运动函数见：运动函数

------天行健，君子以自强不息。