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