烟花爆炸效果

最新推荐文章于 2024-09-11 15:33:18 发布

如山中清风

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量201

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46370471/article/details/104665045

版权

实现某种效果的话首先就要想清楚自己大概要怎么实现，先想好思路再布局，像我这种记性不太好的一般都是写上去实现的步骤然后再转换成代码一一实现它，这是我的代码和思路。

在这里插入代  <style>
        #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%;
            }
    </style>
</head>
<body>
    <div id="container"></div>
    <!-- //烟花就是一个实列 -->
    <!-- 主体烟花实例
        创建元素，设置默认位置，颜色
        运动到点击的位置
            删除主体烟花
            创建小烟花
        炸开的小烟花的实例
        创建，设置位置，颜色
        计算应该运动到哪，目标
        运动，删除 -->
        <script src="../move.2.0.js"></script>
        <script>
            class Fire{
                constructor(pos){
                    this.cont =document.getElementById("container");//因为传给了new的方法，那么container负责接受
                    //接收之后，直接解析到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.rum;
                    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(){
                    //炸成一个圆，计算目标，根据三角函数和角度转弧度公式和计算多个点再圆上的平均角度公式
                    //top = sin(弧度)*r
                    //left=cos(弧度)*r
                    // 角度转弧度：
            // 弧度 = PI / 180 * 平均角度

            // 平均角度：
            // 平均角度 = 360 / 总数 * 当前数（当前索引）
            //注意：圆心的位置是鼠标的位置
            //sin和cos取到小数，页面识别不了小数的像素，所以会超过目标
            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();
            }
            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)})`;
            }
            
            
        </script>码片