用面向对象写碰撞的小球

创建小球对象的构造函数
function Boll(wh){
//随机产生小球的宽高
var wh = randFn(20,50)
//设置宽高属性和属性值
this.width = wh;
this.height = wh;
//设置小球诞生点的坐标属性
this.top = randFn(0,document.body.offsetHeight-wh)+'px
this.left = randFn(0,document.body.offsetWidth-wh)+'px
// // 设置小球背影颜色的随机数
// rgba(255,255,155,0.5)
this.color = 'rgba(' + randFn(0, 255) + ',' + randFn(0, 255) + ',' + randFn(0, 255) + ',' + Math.random() + ')';
//设置小球移动速度的属性
this.speedX = randFn(-10,10);
this.speedY = randFn(-10,10)
//设置保存小球标签的属性
this.div = document.createElement('div');

}

// 原型方法：绘制小球（配置div标签的相关css样式，然后把标签拼接进文档流）
//因为这些样式都是一样的，所以可以放在原型里
Boll.prototype.draw = function () {

                this.div.className = 'boll';

                this.div.style.width = this.width + 'px';
                this.div.style.height = this.height + 'px';

                this.div.style.top = this.top;
                this.div.style.left = this.left;

                this.div.style.backgroundColor = this.color;

                // 把配置好的节点拼接进文档流
                wrap.appendChild(this.div);
            }
     // 原型方法：让小球移动，且碰壁反弹
            Boll.prototype.run = function () {
                // 因为在定时器中使用的this指针是指向window对象的，要在定时器中获取当前操作的小球对象，就必须在定时器外部用变量把当前操作小球对象保存下来，在定时器内部通过该变量获取小球对象
                var self = this;
                setInterval(function () {
                    var tag = self.div;
                    if (tag.offsetLeft + tag.offsetWidth >= wrap.offsetWidth || tag.offsetLeft < 0) {
                        self.speedX *= -1;
                    }

                    if (tag.offsetTop + tag.offsetHeight >= wrap.offsetHeight || tag.offsetTop < 0) {
                        self.speedY *= -1;
                    }

                    tag.style.left = tag.offsetLeft + self.speedX + 'px';
                    tag.style.top = tag.offsetTop + self.speedY + 'px';

                },30)
            }

for (var i = 0; i < 100; i++) {
// 创建小球对象
var boll = new Boll();

                    // 调用对象绘制方法，把小球绘制进文档
                    boll.draw();

                    // 调用小球移动方法
                    boll.run()
                }