JS基础版本桌面弹球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>砖块弹球游戏</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
<style type="text/css">
#container{
width: 99%;
height: 600px;
border: aquamarine solid 5px;
position: relative;
}
#ball{
border-radius:50%;
width: 30px;
height: 30px;
background-color: #ff1c1c;
position: absolute;
top:540px;
left: 54%;
}
#slider{
width: 150px;
height: 30px;
background-color: aquamarine;
position: absolute;
top: 570px;
left: 50%;
}
#brick{
width: 99%;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="brick"></div>
<div id="ball"></div>
<div id="slider"></div>
</div>
</body>
<script>
//动态定义砖块信息
var brickCount = 15;//每行的数量
var brickRow = 10;//行数
var startFlag=false;//游戏开始标识
//页面加载
$(function (e) {
brickInit();
});
//砖块的初始化
function brickInit() {
//确定砖块的长和宽
let brickWidth=$('#brick').width()/brickCount;
let brickHight=$('#brick').height()/brickRow;
//在砖块区域画上砖块
for (let i = 0; i <brickRow ; i++) {
for (let j = 0; j <brickCount ; j++) {
//定义砖块的位置及颜色
var newDiv=$("<div class='brickOne' " +
"style='width: "+brickWidth+"px;height: "+brickHight+"px;" +
"background-color: antiquewhite;position: absolute;" +
"left: "+(j*brickWidth+j)+"px;top: "+(i*brickHight+i)+"px;'></div>");
//将砖块画上
$('#brick').append(newDiv);
}
}
}
//滑块的鼠标单击左键事件,小球开始弹起
$("#slider").click(function () {
if(startFlag) return;
startFlag=true;
ballMove();
});
/**
* 球移动的方法
* @param container 移动区域
* @param obj 待移动元素
* @param x 左右移动速度
* @param y 上下移动速度
* @param l 初始left
* @param t 初始top
* @param m 时间
*/
function ballMove(x, y, l, t, m){
var container=$('#container');
var ball=$('#ball');
var slider=$('#slider');
var brick=$('#brick');
var moveWidth=container.width();//可移动长度
var moveHeight=container.height();//可移动高度
//移动的速度和初始位置，若参数未设置则初始化
x = (x == undefined || x == '') ? 3 : x;
y = (y == undefined || y == '') ? 3 : y;
l = (l == undefined || l == '') ? moveWidth/2 : l;
t = (t == undefined || t == '') ? (moveHeight-ball.height()-slider.height()) : t;
m = (m == undefined || m == '') ? 20 : m;
function moving() {
//碰到区域的左右壁则反方向运动
if(l<=0||(l+ball.width())>=moveWidth)
x=-x;
//碰到区域的上壁则反方向运动
if(t<=0)
y=-y;
//碰到区域的下壁则结束
if(t+ball.height()>moveHeight){
clearInterval(timer_move);
if(confirm("重玩？")){
location.reload();
}else {
location.reload();
}
}
//碰到底部滑块则反方向运动
if(boom(ball,slider)){
y=-y;
}
//碰到砖块则反方向运动并消除砖块
let brickCount=brick.children().length;
if(brickCount==0){
clearInterval(timer_move);
if(confirm("恭喜你完成！")){
location.reload();
}else {
location.reload();
}
}
for (let i = 0; i <brickCount ; i++) {
let child=brick.children().get(i);
if(boom(ball,$(child)))
{
y=-y;
child.remove();
}
}
l+=x;
t+=y;
ball.css({ //改变小球元素的位置
left: l,
top: t
});
}
//判断两个元素相撞
function boom(a,b) {
let aLeft=a.offset().left;
let aTop=a.offset().top;
let bLeft=b.offset().left;
let bTop=b.offset().top;
if(aLeft+a.width()<bLeft||bLeft+b.width()<aLeft||aTop+a.height()<bTop||bTop+b.height()<aTop)
return false;
else
return true;
}
var timer_move = setInterval(function() {
moving();},m);
}
//滑块跟着鼠标移动
$("#slider").mouseover(function(){
if(startFlag){
$(document).mousemove(function(e){
//重新确认滑块的位置，此处需要增加一些边界判断
$("#slider").css("left",e.pageX );
});
}
})
</script>
</html>
浙公网安备 33010602011771号