js打砖块

需求分析：
1、小球在触碰到大盒子上、左、右边框，以及滑块后沿另一方向反弹，在碰到底边框后游戏结束；
2、小球在触碰到方块之后，方块消失；
3、消除所有方块获得游戏胜利；
4、可通过鼠标与键盘两种方式移动滑块
代码分析：HTML代码

左边提示框盒子 别用一个div，在其中添加需要的内容；中间主体部 用一个div，里面包含一个滑块 (slider)，一个小球 (ball)，以及一个装有所有方块的brick盒子，我们通过使用js在brick中动态添加方块，这样大大减少了div的数量。简化了html结构。
Css样式代码分析：由于代码过多，我就说方法便可：通过使用position：relative/absolute/fixed，完成对整个页面的布局
Js分析：
首先生成方块
function createBrick(n){
var oBrick = document.getElementById(“brick”)
在大盒子里面放入N个方块，并且赋上随机的颜色

获取所有的方块将left与Top赋值给方块，并且将方块弄成绝对定位，

随机生成小球和滑块的位置

获取小球初始位置和运动后的位置
var ballLeft = ball.offsetLeft;
var ballTop = ball.offsetTop;
运动后位置
var nextleft = ballLeft + speedX;
var nexttop = ballTop + speedY;
水平边界判断，当小球的left值小于容器左边界或者大于容器右边界时，将水平方向速度取反
if(nextleft<=0||nextleft>=box.offsetWidth-ball.offsetWidth-10){
speedX=-speedX;
}
垂直边界判断，当小球的top值小于容器上边界时，将垂直方向速度取反
if(nexttop<=0){
speedY=-speedY;
}
当小球触碰到下边界时，提示“游戏失败”，重新刷新页面
if(nexttop>box.offsetHeight-ball.offsetHeight){
location.reload();
alert(“You were dead！”)
}
重新将运动后的位置赋值给小球
ball.style.left = nextleft+“px”;
ball.style.top= nexttop+“px”;
然后就是小球和滑块的碰撞测试，
if(knock(ball,slider)){
speedY=-speedY;
}
小球与方块的碰撞测试
for(var j=0; j<brickArr.length;j++){
if(knock(brickArr[j],ball)){
speedY=-speedY
obrick.removeChild(brickArr[j]);
sco++;
score.innerHTML=sco;
break;
}
}
当容器中方块数量为0时，宣布“游戏胜利”，刷新页面
if(brickArr.length<=0){
location.reload();
alert(“You win!”)
}
},20)
}
这个是随机生成颜色代码
function color(){
var result= “#”;
for(var i=0;i<6;i++){
result += rand(0,15).toString(16)
（把十进制的数字变成十六进制的字符串:0 1 …9 a b c d f）
}
return result;
}
这个是随机数生成代码
function rand(n,m){
return n+parseInt(Math.random()*(m-n+1));
}