躁动的小球 面向对象实现

在HTML里建一个div，id="wrap"

css样式

*{
    margin:0;
    padding:0;
}

body,html{
    height:100%;
}

#wrap{
    height:100%;
    background-color:black;
    position:relative;
    overflow:hidden;
}

.ball{
    border-radius:50%;
    position:absolute;
}

js代码

//工具函数，产生[min,max)范围内的随机数
function randFn(min,max){
    return parseInt(Math.random()*(max-min)+min);
}


//创建构造函数，由构造函数获取小球对象
function Ball(){
    //小球的尺寸：随机数
    var wh = randFn(20,50);
    this.width= wh; //width不是css中的，只是容器
    this.height= wh;
    
    //小球初始坐标点
    this.left= randFn(0,document.body.offsetWidth-wh);
    this.top= randFn(0,document.body.offsetHeight-wh);
    
    //小球颜色：随机
    this.color= "rgba(" + randFn(0,256) + "," + randFn(0,256) +"," + randFn(0,256) + "," + Math.random() + ")";
    
    //小球运动速度：随机
    this.speedX= randFn(-10,10); //有正值，有负值一开始可以往左往右
    this.speedY= randFn(-10,10);
    
    //开辟属性，保存创建出来的DOM节点
    this.div= document.createElement("div");
}


//添加绘制小球的方法
Ball.prototype.draw= function(){
    this.div.className= "ball";
    this.div.style.width= this.width+"px";
    this.div.style.height= this.height+"px";
    this.div.style.left= this.left+"px";
    this.div.style.top= this.top+"px";
    this.div.style.backgroundColor= this.color;
    
    //把标签拼接进文档流
    var wrap = document.querySelector("#wrap");
    wrap.appendChild(this.div);
}

Ball.prototype.run= function(){
    var self = this;
    setInterval(function(){
        //this指向window
        //判断边界情况
        if(self.div.offsetLeft+self.div.offsetWidth
            >=document.body.offsetWidth ||self.div.offsetLeft<0){
            
            self.speedX*=-1;
        }
        if(self.div.offsetTop+self.div.offsetHeight
            >=document.body.offsetHeight|| self.div.offsetTop<0){
        
            self.speedY*=-1;
        }
        self.div.style.left= self.div.offsetLeft+self.speedX+"px";
        self.div.style.top= self.div.offsetTop+self.speedY+"px";
    },10)

}

window.onload= function(){
    for(var i=0;i<100;i++){
        var ball = new Ball();
        ball.draw();
        ball.run();
    }
}

效果