1、使用面向对象的方式来做这个案例---注意：面向对象是面向过程的封装，不是完全替代了面向过程 面向对象与，面向过程的区别 ①面向过程就是亲力亲为，事无巨细，步步紧跟 ②面向对象就是找一个对象，指挥得到结果 ③面向对象将执行者变为指挥者 ④面向对象不是面向过程的替代，而是面向过程的封装
案例一：随机生成小方块 思考：1、这个案例里可以抽象出哪些对象---方块对象
2、随机生成颜色 位置 ----- 生成随机数--封装成函数，但是封装成函数比较散为了方便管理，把不同功能的函数封装不同对象的方法中
所以这个项目会有2个对象 方块对象 + 工具对象 （封装很多功能函数）
方块对象有很多，这些对象都很类似，所以我们可以通过构造函数的方式来创建对象：批量创建相似类型的对象。
工具对象在整个项目中只有一个，所以直接用创建普通对象的方式来创建工具对象就行。 代码实现：
1、创建工具对象---对象的方法来封装些功能（生成随机数） 2、创建方块对象 a、创建构造函数
b、分析方块对象的成员---即构造函数的属性、方法（无对错，只有合适不合适）： 属性：方块的背景颜色、方块的大小、方块的坐标、 方法：随机生成自己的坐标
function Box(parent, options) {
options = options || {};
//设置对象的属性
this.backgroundColor = options.backgroundColor || 'red';
this.width = options.width || 20;
this.height = options.height || 20;
this.x = options.x || 0;
this.y = options.y || 0;
//创建对应的div 用this.div为了能够在原型中访问到这个div
this.div = document.createElement('div');
parent.appenChild(div);
}
//初始化div的样式
Box.prototype.init = function() {
var div = this.div
div.style.backgroundColor = this.backgroundColor;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
//脱离文档流
div.style.position = 'absolute'
//创建对应的div
this.div = document.createElement('div');
parent.appendChild(this.div);
//设置div的样式
this.init();
}
//随机生成方块的位置
Box.prototype.random = function() {
//父容器的宽度 方块的宽度 总共能放多少块
var x = Tools.getRandom(0, this.parent.offsetWidth / this.width - 1) * this.width;
var y = Tools.getRandom(0, this.parent.offsetHeight / this.height - 1) * this.height;
this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
}
3、随机生成方块的调用---实现随机生成方块
//生成十个方块 随机生成颜色
//获取容器
var container = doucment.getElementById('container');
for(var i = 0; i < 10; i++) {
var r = Tools.getRandom(0,255);
var g = Tools.getRandom(0,255);
var b = Tools.getRandom(0,255);
var box = new Box(container, {
backgroundColor: `rgb('+r+','+g+','+b+')`
});
}
//数组 存储创建的方块对象
var array = [];
for(var i = 0; i < 10; i++) {
var r = Tools.getRandom(0,255);
var g = Tools.getRandom(0,255);
var b = Tools.getRandom(0,255);
var box = new Box(container, {
backgroundColor: `rgb('+r+','+g+','+b+')`
});
array.push(box)
}
//设置随机位置开启定时器
setInterval(function(){
//随机生成方块的坐标
}，500）；
setInterval(randomBox, 500);
function randomBox() {
//随机生成方块的坐标
for(var i = 0; i < 10; i++) {
var box = array[i];
box.random();
}
}
//设置随机位置 开启定时器
setInterval(randomBox, 500)
//加载完成 先设置随机位置
//用有名函数时为了页面一加载时就可以调用randombox函数不用等500ms避免方块一开始都在00位置
function randomBox() {
for(var i = 0; i < 10; i++) {
var box = array[i];
box.random();
}
}
