JAVAscript实现萤火虫----面向对象

最新推荐文章于 2022-01-25 22:13:36 发布

置顶好大一个球球

最新推荐文章于 2022-01-25 22:13:36 发布

阅读量1.2k

点赞数 22

文章标签： js css javascript es6 html5

本文链接：https://blog.csdn.net/qq_46370188/article/details/115582973

版权

JAVAscript实现萤火虫----面向对象

前言：写这个主要是想试试自己的脑子还好不好使，也是为了重新想想面向对象。在这里插入图片描述

实现思路

创建萤火虫（一闪一闪的星星图写起来太累，所以我直接用bulingbuling的动图代替）
背景也是随机找的图。
给萤火虫加随机位置，并向定位处运动。
用定时器不断的给萤火虫定位。

创建萤火虫（是N个，不是一个）

这里只是创建一个，new多个实例就会创建多个

 addEle() {
          var div = document.createElement("div");
          var img = document.createElement("img");
          img.src = "img/3.jpg";
          div.className = "box";
          document.body.appendChild(div);
          div.appendChild(img);
          div.style.left = this.x + "px";
          div.style.top = this.y + "px";
          this.move(div);
        }

用随机数生成萤火虫的随机位置

随机生成的位置就是萤火虫将要到达的位置

pos() {
          this.x = ranNum(0, this.clientW - 20);
          this.y = ranNum(0, this.clientH - 20);
        }

让萤火虫动起来

通过缓冲运动让萤火虫运动到随机数生成的位置上

move(ele) {
          this.pos();
          move(
            ele,
            {
              left: this.x,
              top: this.y,
            },
            () => {
              this.move(ele);
            }
          );
        }

创建N个萤火虫（对应1）

这里就是new多个实例

 for (var i = 0; i < 80; i++) {
      var a = new Glowworm();
      a.pos();
      a.addEle();
      }

完整代码

 <style>
      body { background-image: url(img/bg.jpg);}
      .box {width: 20px;height: 20px;position: absolute; }
      .box img { width: 20px;height: 20px;}
    </style>
  </head>
  <body>
    <script>
    //构造函数
      class Glowworm {
        constructor() {
          this.oBox = document.getElementsByClassName("box");
          this.clientW = document.documentElement.clientWidth;
          this.clientH = document.documentElement.clientHeight;
        }
        //创建萤火虫
        addEle() {
          var div = document.createElement("div");
          var img = document.createElement("img");
          img.src = "img/3.jpg";
          div.className = "box";
          document.body.appendChild(div);
          div.appendChild(img);
          div.style.left = this.x + "px";
          div.style.top = this.y + "px";
          this.move(div);
        }
        //生成随机位置
        pos() {
          this.x = ranNum(0, this.clientW - 20);
          this.y = ranNum(0, this.clientH - 20);
        }
        //运动到随机位置
        move(ele) {
          this.pos();
          move(
            ele,
            {
              left: this.x,
              top: this.y,
            },
            () => {
              this.move(ele);
            }
          );
        }
      }
      //通过循环new出N个实例
      for (var i = 0; i < 80; i++) {
      var a = new Glowworm();
      a.pos();
      a.addEle();
      }
//随机数
      function ranNum(a, b) {
        return Math.round(Math.random() * (a - b) + b);
      }
//缓冲运动

// 带有px的css属性和透明度，可以运动
// 背景色不可以

// 参数2被修改成了对象，那么在使用之前需要解析（遍历）
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";
            }
        }
        // 如果每次计时器执行结束，所有属性都执行了一遍之后，状态还是true，表示，没有被改成false，如果没有被改成false，表示没有属性没到终点，那么状态还是false就不清除
        if(i){
            clearInterval(ele.t);
            // 用户决定在动画结束时要执行的功能，万一用户没传参，做个默认判断
            if(cb){
                cb();
            }
            // cb && cb();
        }
    }, 30);
}
//获取样式
function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}
    </script>

好大一个球球

关注

22
点赞
踩
42

收藏

觉得还不错? 一键收藏
17
评论
JAVAscript实现萤火虫----面向对象

JAVAscript实现萤火虫----面向对象前言：写这个主要是想试试自己的脑子还好不好使，也是为了重新想想面向对象。实现思路创建萤火虫（一闪一闪的星星图写起来太累，所以我直接用bulingbuling的动图代替）背景也是随机找的图。给萤火虫加随机位置，并向定位处运动。用定时器不断的给萤火虫定位。创建萤火虫（是N个，不是一个）这里只是创建一个，new多个实例就会创建多个 addEle() { var div = document.createElement("di
复制链接

扫一扫