本文实例为大家分享了jquery实现弹弹球小游戏的具体代码，供大家参考，具体内容如下
效果展示：
css样式：
#box {
width: 600px;
height: 650px;
border: 5px solid rgb(245, 164, 96);
position: relative;
left: 500px;
top: 50px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff),to(rgba(0, 0, 255, 0.5)));
}
/*小球的设置*/
#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: 400px;
border-radius: 10px;
box-shadow: #bbbbbb;
font-size: 24px;
cursor: pointer;
}
/*滑块的设置*/
#slider {
width: 120px;
height: 20px;
background-color: lightpink;
position: absolute;
top: 585px;
border-radius: 10px;
box-shadow: 0px 0px 2px 2px white;
cursor: pointer;
}
/*每个方块的边框*/
#brick div {
width: 98px;
height: 20px;
float: left;
border: 1px solid black;
}
/*游戏规则边框*/
#tip {
width: 280px;
position: fixed;
top: 200px;
left: 100px;
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;
}
/*h3字体设置*/
#grade h3 {
font-weight: 500;
}
#phb{
width: 180px;
position: fixed;
top: 50px;
left: 1150px;
border: 1px solid black;
text-indent: 2em;
padding: 10px;
border-radius: 10px;
}
js代码：
js完整代码：
<script type="text/javascript">
var box = document.getelementbyid("box");
var ball = document.getelementbyid("ball");
var btn = document.getelementbyid("btn");
var slider = document.getelementbyid("slider");
var obrick = document.getelementbyid("brick");
var brickarr = obrick.getelementsbytagname("div");
var grade = document.getelementbyid("grade");
var rank = grade.children[1]
var score = grade.children[3]
var sco = 0; //分数
var timer; //小球运行
var isrunning = false;
var speedx = rand(3, 12);
var speedy = -rand(3, 12);
var num = speedx - speedy;
//随机选择难度
var num = math.ceil((math.random() * 9));
console.log("num为:" + num);
switch (num) {
case 1:
case 2:
case 3:
rank.innerhtml = "简单";
break;
case 4:
case 5:
case 6:
rank.innerhtml = "中等";
slider.style.width = 80 + "px";
break;
case 7:
case 8:
case 9:
rank.innerhtml = "困难";
slider.style.width = 60 + "px";
break;
}
//随机生成小球与滑块的初始位置
var begingo = rand(100, 500);
ball.style.left = begingo + 40 + "px";
slider.style.left = begingo + "px";
//开始按钮点击事件
btn.onclick = function() {
btn.style.display = "none"; //隐藏按钮
isrunning = true;
clearinterval(timer);
timer = setinterval(function() {
//获取小球初始位置
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("game over!");
}
//将运动后的位置重新赋值给小球
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)
}
//鼠标控制滑块
slider.onmousedown = function(e) {
var e = e || window.event;
//获取滑块初始位置
var offsetx = e.clientx - slider.offsetleft;
if (isrunning) {
document.onmousemove = function(e) {
var e = e || window.event;
var l = e.clientx - offsetx;
if (l <= 0) {
l = 0;
}
if (l >= box.offsetwidth - slider.offsetwidth - 10) {
l = box.offsetwidth - slider.offsetwidth - 10;
}
slider.style.left = l + "px";
}
}
}
document.onmouseup = function() {
document.onmousemove = null; //鼠标移动时
}
//按键控制滑块
document.onkeydown = function(e) {
var e = e || window.event;
var code = e.keycode || e.which;
var offsetx = slider.offsetleft;
if (isrunning) {
switch (code) {
case 37: //左
if (offsetx <= 0) {
slider.style.left = 0
break;
}
slider.style.left = offsetx * 4 / 5 + "px";
break;
case 39: //右
if (offsetx >= box.offsetwidth - slider.offsetwidth - 10) {
slider.style.left = box.offsetwidth - slider.offsetwidth;
break;
}
slider.style.left = (box.offsetwidth - slider.offsetwidth - offsetx) / 5 + offsetx + "px";
break;
}
}
}
//一共有66块方块
createbrick(66);
//容器内创建方块
function createbrick(n) {
var obrick = document.getelementbyid("brick");
//在大盒子brick中插入n个div方块，并给予随机颜色
for (var i = 0; i < n; i++) {
var node = document.createelement("div");
node.style.backgroundcolor = color();
obrick.appendchild(node);
}
//获取所有的方块
var brickarr = obrick.getelementsbytagname("div")
//根据每个方块当前所在位置，将left与top值赋给方块
for (var i = 0; i < brickarr.length; i++) {
brickarr[i].style.left = brickarr[i].offsetleft + "px";
brickarr[i].style.top = brickarr[i].offsettop + "px";
}
//将所有方块设置成绝对定位，注意这一步与上一步顺序不能调换
for (var i = 0; i < brickarr.length; i++) {
brickarr[i].style.position = "absolute";
}
}
//随机生成颜色
function color() {
var result = "#";
for (var i = 0; i < 6; i++) {
result += rand(0, 15).tostring(16)
}
return result;
}
//随机数生成
function rand(n, m) {
return n + parseint(math.random() * (m - n + 1));
}
//碰撞检测函数
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 || r2 < l1 || t2 > b1 || b2 < t1) {
return false;
} else {
return true;
}
}
</script>
以上代码不是很完美，有需要的还可以进一步的改进
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
