js面向对象（萤火虫效果）

最新推荐文章于 2022-10-30 17:13:42 发布

灿尔哈擦苏

最新推荐文章于 2022-10-30 17:13:42 发布

阅读量2k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/susuzhe123/article/details/68066921

版权

js 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

使用面向对象的方法实现一个萤火虫的效果。
页面样式，bg.jpg是一张动图，使用的是jQuery。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            html,body{
                width: 100%;
                height: 100%;
                background: url(img/bg.jpg) no-repeat center;
                background-size: cover;
                overflow: hidden;
                position: relative;
            }
            img{
                position: absolute;
                width: 38px;
                height: 38px;
                /*left:100px;
                top:100px;*/
            }
        </style>
    </head>
    <body>
        <!--<img src="img/1.jpg"/>-->
    </body>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</html>

js:

var firefly = new Object();  //创建firefly这个对象
//下面是这个对象所具有的一些方法属性（我们自己定义）
firefly.element = $("<img src = 'img/1.jpg'/>"); //创建html结构
//显示
firefly.show = function(){
    this.element.css({
        left:this.showPoint().pointX,
        top:this.showPoint().pointY
    });
    $("body").append(this.element);
}
//显示的坐标位置在屏幕上
firefly.showPoint = function (){
    var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
    var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
    return {
        pointX:pointX,
        pointY:pointY
    }
}
//飞行时间
firefly.flyTime = function(){
    //时间为2-5秒
    var flyTime = Math.floor((Math.random()*3+2)*1000);
    return flyTime;
}
//飞行
firefly.run = function(){
    //alert(this.flyTime())
    var self = this;
    this.element.animate({
        left: self.showPoint().pointX,
        top: self.showPoint().pointY,
    },this.flyTime(),function(){
        self.element.animate({
            left: self.showPoint().pointX,
            top: self.showPoint().pointY,
        },self.flyTime(),arguments.callee);
    });
}
firefly.show();  //显示出来
firefly.run();   //开始飞行

下面使用工厂模式实现

//工厂模式,一定要加return  返回当前创建的对象
function createFireFly(){
    var firefly = new Object();
    firefly.element = $("<img src = 'img/1.jpg'/>");
    firefly.show = function(){
        this.element.css({
            left:this.showPoint().pointX,
            top:this.showPoint().pointY
        });
        $("body").append(this.element);
    }
    firefly.showPoint = function (){
        var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
        var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";

        return {
            pointX:pointX,
            pointY:pointY
        }
    }
    firefly.flyTime = function(){
        //时间为2-5秒
        var flyTime = Math.floor((Math.random()*3+2)*1000);
        return flyTime;
    }
    firefly.run = function(){
        //alert(this.flyTime())
        var self = this;
        this.element.animate({
            left: self.showPoint().pointX,
            top: self.showPoint().pointY,
        },this.flyTime(),function(){
            self.element.animate({
                left: self.showPoint().pointX,
                top: self.showPoint().pointY,
            },self.flyTime(),arguments.callee);
        });
    }
    //至关重要
    return firefly;
}
//创建多个
for(var i = 0; i < 20; i++){
    var fire1 = createFireFly();
    fire1.show();
    fire1.run();
}

使用构造函数

//构造函数（使用this指向）
function Firefly(){
    this.element = $("<img src = 'img/1.jpg'/>");
    this.show = function(){
        this.element.css({
            left:this.showPoint().pointX,
            top:this.showPoint().pointY
        });
        $("body").append(this.element);
    }
    this.showPoint = function (){
        var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
        var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
        return {
            pointX:pointX,
            pointY:pointY
        }
    }
    this.flyTime = function(){
        //时间为2-5秒
        var flyTime = Math.floor((Math.random()*3+2)*1000);
        return flyTime;
    }
    this.run = function(){
        //alert(this.flyTime())
        var self = this;
        this.element.animate({
            left: self.showPoint().pointX,
            top: self.showPoint().pointY,
        },this.flyTime(),function(){
            self.element.animate({
                left: self.showPoint().pointX,
                top: self.showPoint().pointY,
            },self.flyTime(),arguments.callee);
        });
    }
}
//创建多个
for(var i = 0; i < 20; i++){
    var fire1 = new Firefly();
    fire1.show();
    fire1.run();
}

构造函数加原型链

function Firefly(){
    this.element = $("<img src = 'img/1.jpg'/>");
}
    //原型模式
    Firefly.prototype.show = function(){
        this.element.css({
            left:this.showPoint().pointX,
            top:this.showPoint().pointY
        });
        $("body").append(this.element);
    }
    Firefly.prototype.showPoint = function (){
        var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
        var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
        return {
            pointX:pointX,
            pointY:pointY
        }
    }
    Firefly.prototype.flyTime = function(){
        //时间为2-5秒
        var flyTime = Math.floor((Math.random()*3+2)*1000);
        return flyTime;
    }
    Firefly.prototype.run = function(){
        //alert(this.flyTime())
        var self = this;
        this.element.animate({
            left: self.showPoint().pointX,
            top: self.showPoint().pointY,
        },this.flyTime(),function(){
            self.element.animate({
                left: self.showPoint().pointX,
                top: self.showPoint().pointY,
            },self.flyTime(),arguments.callee);
        });
    }

for(var i = 0; i < 20; i++){
    var fire1 = new Firefly();
    fire1.show();
    fire1.run();
}

模拟java

//面向对象，模拟java
function Firefly(){
    this.element = $("<img src = 'img/1.jpg'/>");
    this.setPointX = function(value){
        this.pointX = value;
    }
    this.getPointX = function(){
        return this.pointX;
    }
    this.setPointY = function(value){
        this.pointY = value;
    }
    this.getPointY = function(){
        return this.pointY;
    }
    this.setRunTime = function(value){
        this.runtime = value;
    }
    this.getRunTime = function(){
        return this.runtime;
    }
}
    Firefly.prototype.show = function(){
        this.setPointX(Math.abs(Math.random()*window.innerWidth - 18) +"px");
this.setPointY(Math.abs(Math.random()*window.innerHeight - 18) +"px");
        this.element.css({
            left:this.getPointX(),
            top:this.getPointY()
        });
        $("body").append(this.element);
    }
    Firefly.prototype.run = function(){
        //alert(this.flyTime())
        var self = this;
        this.element.animate({
            left: this.getPointX(this.setPointX(Math.abs(Math.random()*window.innerWidth - 18) +"px")),
            top: this.getPointY(this.setPointY(Math.abs(Math.random()*window.innerHeight - 18) +"px"))},this.getRunTime(this.setRunTime(Math.floor((Math.random()*3+2)*1000))),function(){
            self.element.animate({
                left: self.getPointX(self.setPointX(Math.abs(Math.random()*window.innerWidth - 18) +"px")),
                top: self.getPointY(self.setPointY(Math.abs(Math.random()*window.innerHeight - 18) +"px"))      },self.getRunTime(self.setRunTime(Math.floor((Math.random()*3+2)*1000))),arguments.callee);
        });
    }
for(var i = 0; i < 20; i++){
    var fire1 = new Firefly();
    fire1.show();
    fire1.run();
}