大过年的怎么可以不放烟花(js实现烟花简易版效果含源码）

最新推荐文章于 2022-01-24 21:38:23 发布

划水的乌贼

最新推荐文章于 2022-01-24 21:38:23 发布

阅读量379

点赞数

分类专栏： js 文章标签： js css javascript html

本文链接：https://blog.csdn.net/dergfg/article/details/113793687

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

保持对代码的热爱并保存怀疑态度
在这里先祝大家新年快乐，纪念一手。
源码地址：https://gitee.com/yin_huawei/fireworks

烟花实现的原理

  OOA：烟花，点击页面位置，出现元素运动，运动到终点，删除，创建好多元素，运动到指定随机位置，到终点，删除
    主体烟花
        创建元素，设置位置，设置颜色，插入页面
        开始运动，到终点
         删除元素
     小烟花
         创建多个元素，设置位置，设置颜色，插入页面
        开始运动，到终点
        删除元素

以上为分析，因为用的纯js原生，所以烟花的移动做了一个封装方便调用需要详细的点击可以看一下，包括随机颜色的产生也是封装的。文件名：feng.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #container{
        width: 80%;
        height: 600px;
        border: 2px solid red;
        background: #000;
        margin:20px auto;
        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>
<body>
    <div id="container"></div>
</body>
<script src="../feng.js"></script>
<script>
        // OOA：烟花，点击页面位置，出现元素运动，运动到终点，删除，创建好多元素，运动到指定随机位置，到终点，删除
        // 主体烟花
            // 创建元素，设置位置，设置颜色，插入页面
            // 开始运动，到终点
            // 删除元素
        // 小烟花
            // 创建多个元素，设置位置，设置颜色，插入页面
            // 开始运动，到终点
            // 删除元素



    function Fire(ops){   //接收参数
        this.x=ops.x;
        this.y=ops.y;
        this.cont=ops.cont;
        // console.log(cont);

        this.create();  //创建
    }

    Fire.prototype.create=function(){
        this.div=document.createElement("div");
        this.div.className=("fire");             //class名字全称className
        this.cont.appendChild(this.div);
        // console.log(this.cont.appendChild(this.div));
        this.div.style.backgroundColor=color();
        this.div.style.width="15"+"px";
        this.div.style.height="80"+"px";
        this.div.style.borderRadius="20px"
        this.div.style.left=this.x+"px";
        this.firemove();

    }
    Fire.prototype.firemove=function(){
        var that=this;
        move(this.div,{top:this.y},()=>{
            this.div.remove();

            var num=random(20,30);
            var r = random(100,200);  //随机圆的半径
          for(var i=0;i<num;i++){
              new Smfire({
                  x:this.x,
                  y:this.y,
                  cont:this.cont,    //传参圆的
                  r,num,i
              });
          }
        })
    }


      function Smfire(ops){
            this.x = ops.x
            this.y = ops.y;
            this.cont = ops.cont;
            this.r = ops.r;
            this.num = ops.num;  //接收圆的参数
            this.i = ops.i;
            // console.log(this);
            this.create();
            
            
    }

    // Smfire.prototype.create=function(){    //函数名别搞错了
    //     this.div=document.createElement("div");
    //     this.div.className="small-fire";
    //     // console.log(this.div);
    //     this.cont.appendChild=(this.div);//   不是等号啊啊啊啊 this.cont.appendChild(this.div);
    //     this.div.backgroundColor=color();
    //     this.div.style.left=this.x+"px";
    //     this.div.style.top=this.y+"px";

    // }

    Smfire.prototype.create = function(){
            this.div = document.createElement("div");
            this.div.className = "small-fire";
            this.cont.appendChild(this.div);
            this.div.style.background = color();    //下面封装的随机颜色
            this.div.style.left = this.x + "px";
            this.div.style.top = this.y + "px";
            this.fireMove();


        }
    
    // Smfire.prototype.fireMove2=function(){
    //            // 计算随机目标
    //            var target = {
    //             x:random(0, this.cont.offsetWidth - this.div.offsetWidth),
    //             y:random(0, this.cont.offsetHeight - this.div.offsetHeight)
    //         }
    //         move(this.div,{
    //             left:target.x,
    //             top:target.y
    //         },function(){
    //             // 删除元素
    //             this.div.remove();
    //         }.bind(this))
    // }
    Smfire.prototype.fireMove = function(){
            // 元素的个数：this.num
            // 一圈是多少度：360
            // 这是第几个元素：this.i

            // 计算每个元素在圆身上的度数
            var reg = (360/this.num) * (this.i);

            // 计算随机目标
            var target = {
                x:parseInt(Math.cos(reg/(180/Math.PI)) * this.r + this.x),
                y:parseInt(Math.sin(reg/(180/Math.PI)) * this.r + this.y)
            }
            move(this.div,{
                left:target.x,
                top:target.y
            },function(){
                this.div.remove();
            }.bind(this))
        }


    
      // 0. 点击页面上的容器，创建烟花元素，并将鼠标坐标信息传入构造函数
      var cont=document.getElementById("container");
      cont.onclick=function(eve){
          var e=eve ||window.event;
          new Fire(     //传参
              {
                  x:e.offsetX,      
                  y:e.offsetY,
                  cont:this,   //container
              }
              
          )
      }


      function random(max,min){
          return Math.round(Math.random()*(max-min)+min)

      }
      function color(){
          return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
      }
</script>
</html>