js弹球游戏实现

最新推荐文章于 2023-04-10 20:05:56 发布

VIP文章 ........千年老妖

最新推荐文章于 2023-04-10 20:05:56 发布

阅读量1.6k

点赞数 4

分类专栏： web前端文章标签： js弹球游戏实现 js实现弹球游戏

本文链接：https://blog.csdn.net/qq_36760873/article/details/100627067

版权

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">分数:&nbsp;</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

最低0.47元/天解锁文章

........千年老妖

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
js弹球游戏实现

js弹球游戏实现html代码 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css"/> <link rel="shortcut icon"...
复制链接

扫一扫