javascript实实现现打打砖砖块块小小游游戏戏 ((附附完完整整源源码码))
小时候玩一天的打砖块小游戏，附完整源码
在？给个赞？
实实现现如如图图
需需求求 析析
1、小球在触碰到大盒子上、左、右边框，以及滑块后沿另一方向反弹，在碰到底边框后游戏结束；
2、小球在触碰到方块之后，方块消失；
3、消除所有方块获得游戏胜利；
4、可通过鼠标与键盘两种方式移动滑块；
5、游戏难度可调整，实时显示得 。
代代码码 析析
1、html结构：左右两个提示框盒子 别用一个div，在其中添加需要的内容；中间主体部 用一个div，里面包含一个滑块 (slid
er)，一个小球 (ball)，以及一个装有所有方块的brick盒子，我们通过使用js在brick中动态添加方块，这样大大减少了div的数
量。简化了html结构。
2、css样式：通过使用position：relative/absolute/fixed，完成对整个页面的布局；
3、js行为：首先对于小球的运动，我们通过使用setInterval定时器进行实现；小球与滑块以及方块之间的碰撞，我们通过碰撞检
测函数进行实现；滑块的移动我们需要设置两种方法，通过鼠标实现可以使用拖拽；通过键盘实现使用键盘事件。
一一些些封封装装的的函函数数
动动态态创创建建方方块块
函数 析
1、首先，我们在id=“brick”的div盒子中动态插入n个方块，在css中预先为这些盒子设置了固定的宽高，并设置了左浮动布局。
这样，所有的方块就会按照自左到右自上而下排列在盒子中；但是通过浮动布局在中间某一个方块碰撞消失后，后面的方块会补
充上来，这并不是我们想要的；
2、为了防止后面的方块向前移动，显然我们不能使用浮动，在这里我们对每一个方块使用绝对定位；
3、在给每一个方块进行绝对定位之前，我们先要获取它们当前所在位置的left与top值，并赋给它们，否则方块将全部挤在一个
格子里；
4、最后再给每个方块进行绝对定位。
1 function createBrick(n){
2 var oBrick = document.getE ementById("brick")
3 //在大盒子brick中插入n个div方块，并给予随机颜色
4 for(var i = 0; i
5 var node = document.createE ement("div");
6 node.sty e.backgroundCo or= co or();
7 oBrick.appendChi d(node);
8 }
9 //获取所有的方块
10 var brickArr = obrick.getE ementsByTagName("div")
11 //根据每个方块当前所在位置，将 eft与top值赋给方块
12 for(var i=0;i
13 brickArr[i].sty e. eft = brickArr[i].offsetLeft+"px";
14 brickArr[i].sty e.top = brickArr[i].offsetTop+"px";
15 }
16 //将所有方块设置成绝对定位，注意这一步与上一步顺序不能调换
17 for(var i =0;i
18 brickArr[i].sty e.position="abso ute";
19 }
20 }
碰碰撞撞检检测测函函数数
代码 析见上一篇
1 function knock(node1,node2){
2 var 1 = node1.offsetLeft;
3 var r1 = node1.offsetLeft + node1.offsetWidth;
4 var t1 = node1.offsetTop;
5 var b1 = node1.offsetTop+node1.offsetHeight;
6 var 2 = node2.offsetLeft;
7 var r2 = node2.offsetLeft + node2.offsetWi
