**
整理代码思路
**
之前说了思路，现在还需要行为。
以下是思路，
1.创建出砖块
小球 挡板 砖块区域 初始x位置 初始y位置。
2.需要进行碰撞检测
1）小球和挡板的碰撞
2）小球和砖块的碰撞
3）小球和游览器边框的碰撞
砖块初始化
creatBrick: function () { //砖块初始化
var x = document.documentElement.offsetWidth / 2 //设置居中位置
var w = 45 * 2, //设置横向间距
var h = 15 * 2; //设置纵向间距
for (var i = 1; i <= 8; i++) { //循环生成div 8层
for (var j = 0; j < i * 2; j++) { //每一层的砖块个数为 层数*2-1
var brick = document.createElement("div");
brick.style.top = (i - 1) * h + 'px';
brick.style.left = x - (i * w) + (j * w) + 'px';
this.wrap.appendChild(brick);
}
}
}
documentElement是整个节点树的根节点root，即<html 标签
offsetWidth //返回元素的宽度
挡板初始化
wardMove: function () { //挡板初始化
this.ward.style.top = window.innerHeight - 180 + 'px'; //初始化挡板的top位置
this.ward.style.left = this.x - 60 + 'px'; //初始化挡板的left位置居中
this.addEvent(document, 'mousemove', this.mouseMove.bind(this)); //监听鼠标移动
}
用**addEvent()**给挡板附加鼠标移动事件。
用**bind()**进行绑定。