js 行走的小女孩面向对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>

    * {
        margin:0;
        padding:0;
    }
    html,body {
        height:100%;
    }

    div.girl {
        width:79px;
        height:108px;
        background:url(aisidier.png) 0 -216px no-repeat;
        position:absolute;
        
    }
    
    div.end {
        border:2px solid #000;
        position:absolute;
        left:1000px;
        top:0;
        height:100%;
        
    }
</style>
</head>

<body>
    <div class="end"></div>
    
    <script>
        var girls = [];
        function Girls(){
            this.x = 0;
            this.y = parseInt(Math.random()*(document.documentElement.clientHeight - 108));
            this.speed = parseInt(Math.random()*10)+1;
            this.step = 0;
            this.isMove = true;
            this.init();
            this.update();
            this.bindEvent();
            girls.push(this);
        }
        
        Girls.prototype.init  = function(){
            this.dom = document.createElement('div');
            this.dom.className = "girl";
            document.body.appendChild(this.dom); //上树
        };
        
        Girls.prototype.update = function(){

            if(!this.isMove) 
                return;
             this.x += this.speed;
            if(this.x > 1000){
                this.goDeid();
            }
            this.step++;
            if(this.step > 7){
                this.step = 0;
            }
            this.dom.style.left = this.x+"px";
            this.dom.style.top = this.y+"px";
            console.log("left:",this.dom.style.left ,"top:",this.dom.style.top);
            this.dom.style.backgroundPosition = -this.step*79+"px -216px";
        };

        Girls.prototype.goDeid = function(){
            document.body.removeChild(this.dom); //下树
            for(var i=0;i<girls.length;i++){
                if(girls[i] == this){
                    girls.splice(i,1);
                }
            }
        };

        Girls.prototype.bindEvent = function(){
            var _this = this;
            this.dom.onclick = function(){
                _this.isMove = !_this.isMove;
            };
        };
        

        setInterval(function(){
            for(var i=0;i<girls.length;i++){
                girls[i].update();
            }
        },100);

        new Girls();
        new Girls();
        new Girls();
        new Girls();
        new Girls();
        new Girls();

    </script>
    
</body>
</html>

图片在文件中