JavaScript模拟烟花炸裂

最新推荐文章于 2021-05-04 18:00:10 发布

「已注销」

最新推荐文章于 2021-05-04 18:00:10 发布

阅读量579

点赞数 1

文章标签： javascript css html5 es6

本文链接：https://blog.youkuaiyun.com/mikkfe/article/details/104661061

版权

这篇博客介绍了如何使用JavaScript模拟烟花炸裂，包括圆形炸裂和随机炸裂两种方式。通过创建div，设置CSS样式，使用ES6的class语法，以及实现移动函数和随机颜色函数，博主详细解释了烟花动画的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JavaScript模拟烟花的炸裂，这里实现圆形炸裂和随机炸裂两种方式，模拟烟花炸裂的操作步骤为从下而上一个大烟花，到达鼠标的位置后大烟花消失，然后有多个移动到各个地方各种颜色的小烟花，再让其消失，实现代码如下：
两种烟花都需要再js中添加，所以body内只需要一个div：

<body>
    <div id="container"></div>
</body>

需要在css中对div进行修饰，并且提前对两种方式的烟花进行修饰：

#container{
	width: 80%;
	height: 600px;
	border: 2px solid red;
	background: #000;
	margin:20px auto;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.fire{
	width: 10px;
	height:10px;
	position: absolute;
	bottom: 0;
}
.small-fire{
	width: 10px;
	height:10px;
	position: absolute;
	border-radius: 50%;
}

因为是两种烟花，所以需要两个实例，使用ES6新增的class语法实现：

class Fire{}
class SmallFire{}

大烟花：

class Fire{
        constructor(pos){
            this.cont = document.getElementById("container");
            // 因为传给了new的方法，那么constructor负责接收
            // 接收之后，直接解析到this，方便在后续方法中使用
            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("container");
    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();
    }

move移动函数：

    function move(ele,obj,cb){
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            var i = true;
            for(var attr in obj){
                if(attr == "opacity"){
                    var iNow = getStyle(ele,attr) * 100;
                }else{
                    var iNow = parseInt(getStyle(ele,attr));
                }
        
                let speed = (obj[attr] - iNow)/10;
                speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                if(iNow !== obj[attr]){
                    i = false;
                }
                if(attr == "opacity"){
                    ele.style.opacity = (iNow + speed)/100;
                }else{
                    ele.style[attr] = iNow + speed + "px";
                }
            }
            if(i){
                clearInterval(ele.t);
                if(cb){
                    cb();
                }
            }
        }, 30);
    }

    function getStyle(ele,attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,false)[attr];
        }
    }

由于烟花颜色是随机的，所以需要构造一个随机颜色的函数

    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
    function randomColr(){
        return `reg(${random(0,255)},${random(0,255)},${random(0,255)})`
    }

以上为圆形炸裂，也可让其随机炸裂，在随机炸裂里，不需要move函数，而是使用步长，并对其添加一个自由落体的运动，其代码如下：

    class Fire{
        constructor(pos){
            this.cont = document.getElementById("container");
            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);
                
                // 根据个数，重复创建小烟花实例
                for(var i=0;i<randomNum;i++){
                    // 创建实例时，需要将：以下信息都传到小烟花的实例中
                        // 大框，坐标
                    var sf = new SmallFire({
                        cont:this.cont,
                        x:this.x,
                        y:this.y
                    });
                    // 执行创建方法
                    sf.create();
                }
            });
        }
    }

    class SmallFire{
        constructor(obj){
            // 接收并解析：大框，坐标
            this.cont = obj.cont;
            this.x = obj.x;
            this.y = obj.y;
        }
        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(){

            // 因为要做自由落体效果，所以，小烟花的运动不适合使用曾经的缓冲运动
            // 适合加速运动
            // 所以当前的运动属于，重新写的

            // 计算随机的步长
            var speedX = random(-10,10);
            var speedY = random(-20,0);
            // 开启计时器
            this.f.t = setInterval(() => {
                // 因为是自由落体，判断元素是否超过了大框
                if(this.f.offsetTop > this.cont.offsetHeight){
                    // 超出了，清除计时器，删除对应小烟花
                    clearInterval(this.f.t);
                    this.f.remove();
                }else{
                    // 没有超出，正常根据步长移动
                    this.f.style.left = this.f.offsetLeft + speedX + "px";
                    // 过程中，将Y的步长，不断的增大，造成重力加速效果
                    this.f.style.top = this.f.offsetTop + speedY++ + "px";
                }
            }, 30);
        }
    }

    var ocont = document.getElementById("container");
    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)})`;
    }