小时候玩一天的打砖块小游戏，附完整源码
在？给个赞？
实现如图
需求分析
1、小球在触碰到大盒子上、左、右边框，以及滑块后沿另一方向反弹，在碰到底边框后游戏结束；
2、小球在触碰到方块之后，方块消失；
3、消除所有方块获得游戏胜利；
4、可通过鼠标与键盘两种方式移动滑块；
5、游戏难度可调整，实时显示得分。
代码分析
1、html结构：左右两个提示框盒子分别用一个div，在其中添加需要的内容；中间主体部分用一个div，里面包含一个滑块（slider），一个小球（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、最后再给每个方块进行绝对定位。
function createBrick(n){
var oBrick = document.getElementById("brick")
//在大盒子brick中插入n个div方块，并给予随机颜色
for(var i = 0; i
碰撞检测函数
代码分析见上一篇
function knock(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop+node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop+node2.offsetHeight;
if(l2>r1||r2b1||b2
完整代码（复制可用）
打砖块小游戏
#box{
width: 600px;height: 650px;border: 5px solid rgb(168, 139, 8);
position: relative;left: 500px;
background:linear-gradient(rgb(19, 192, 120),rgb(47, 32, 114));
}
#ball{
width: 20px;height: 20px;border-radius: 10px;
background-color: white;position: absolute;
top: 560px;box-shadow: 0px 0px 3px 3px aqua;
}
#btn{
width: 150px;height: 90px;position: fixed;left: 730px;top: 350px;
border-radius: 10px;font-size: 24px;cursor: pointer;
}
#slider{
width: 120px;height: 20px;background-color: rgb(168, 139, 8);position: absolute;
top: 585px;border-radius: 10px;box-shadow: 0px 0px 2px 2px red;cursor: pointer;
}
#brick div{
width: 98px;height: 20px;float: left;border: 1px solid black;
}
#tip{
width: 280px;position:fixed;top: 100px;left: 150px;
border: 1px solid black;text-indent: 2em;padding: 10px;border-radius: 20px;
}
#grade{
width: 180px;position:fixed;top: 100px;left: 1150px;
border: 1px solid black;text-indent: 2em;padding: 10px;border-radius: 20px;
}
#grade h3{
font-weight: 500;
}
提示
点击按钮开始游戏
方法1：使用鼠标按住滑块，左右拖动，反弹小球
方法2：使用键盘“左”“右”方向键控制滑块移动，按住快速移动
小球触碰到底部为失败
清空所有方块游戏胜利
游戏强度：
XXX
得分:
00
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
