js弹球游戏实现
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="shortcut icon" href="img/icon.ico">
<title>弹一弹</title>
</head>
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<body onload="init();showScore();" onkeydown="getkeycode(event);">
<!--onselectstart设置div被双击不会选中变蓝-->
<div id="m" onclick="if(isStop){shoot(event);}" onselectstart="return false">
<div id="arr" ></div>
<canvas id="aimLine" width="350" height="550"
onmousemove="aim(event);arr(event);" ></canvas>
<div id="mSquare" >
</div>
<div id="mBall">
</div>
</div>
<div id="showScore">分数: </div>
<div id="showp"></div>
</body>
<script type="text/javascript" src="js/func.js"></script>
</html>
布局如下
css代码
#showp{
position: absolute;
top: 100px;
left: 400px;
width: 165px;
height: 40px;
background: powderblue;
font-size: 15px;
font: "宋体";
}
#showScore{
position: absolute;
top: 20px;
left: 400px;
width: 130px;
height: 40px;
background: powderblue;
font-size: 28px;
}
#m{
border: solid 5px black;
width: 350px;
height: 550px;
background-image: url(../img/mBackground.jpg);
background-size: 100%;
color: white;
font-size:15px ;
position: absolute;
left: 15px;
top: 15px;
cursor: none;/*设置鼠标指针消失*/
}
#aimLine{
position: absolute;
z-index: 6;
}
#arr{
border-radius: 50%;/*可把正方形变成圆形,50%即可*/
position: absolute;
width: 20px;
height: 20px;
background: red;
z-index: 8;
}
#mSquare{
position: absolute;
left: 0px;
top: 0px;
width: 350px;
height: 550px;
z-index: 3;
}
#mBall{
position: absolute;
left: 0px;
top: 0px;
width: 350px;
height: 550px;
z-index: 5;
}
.num{
position: relative;
top: 12px;
font-weight: bold;
font-size: 20px;
}
.square{
position: absolute;
top: 0px;
width: 49px;
height: 49px;
text-align: center;
background-color: chartreuse;
z-index: 5;
border: 1px black solid;
box-shadow: inset 3px 4px 9px white;
}
.plusBall{
position: absolute;
border-radius: 50%;/*可把正方形变成圆形,50%即可*/
top: 0px;
width: 49px;
height: 49px;
background-image: url(../img/plusBall.jpg);
background-size: 100% 100%;
text-align: center;
z-index: 5;
font-size: 34px;
}
.ball {
position: absolute;
border-radius: 50%;/*可把正方形变成圆形,50%即可*/
background: white;
width: 20px;
height: 20px;
z-index: 7;
}
#showBallNum{
position:absolute;
font:white;
fontSize:14px;
width:50px;
height:15px;
}
js代码
fun.js
var dead=10;//死亡所需层数
var num=1;//球的数量
var speed=2;//球速
var score=0;//分数 总共打的层数
var isStop=true;
//设置小球位置,这里传入的x和y代表小球球心的坐标
function ballPosition(b,x,y){
b.style.left=x-10+'px';
b.style.top=y-10+'px';
}
//初始化小球位置和方块位置