小球弹弹乐

最新推荐文章于 2023-07-06 17:22:12 发布

辕小白

最新推荐文章于 2023-07-06 17:22:12 发布

阅读量303

点赞数

分类专栏：作品文章标签： jquery

本文链接：https://blog.csdn.net/qq_43711676/article/details/110200070

版权

作品专栏收录该内容

12 篇文章 0 订阅

订阅专栏

小球弹弹乐
css部分

<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.qiu{
				width: 80px;
				height: 80px;
				background-image: url(img/0.jpg);
				border-radius: 80px;
				position: absolute;
			}
			.ban{
				width: 200px;
				height: 10px;
				background-color: skyblue;
				border-radius: 10px;
				position: relative;
			}
		</style>

html部分

<body>
		<div class="qiu"></div>
		<div class="ban"></div>
	</body>

jq部分

<script type="text/javascript">
		var x=0; 
		var y=0;
		var h;
		var w;
		var w_flag=false;	//是否接触x轴边界
		var h_flag=false;	//是否接触y轴边界
		var flag=false;  //是否接触下移板
		var point=0;	//得分
		var a=0;
		$(function(e){
			$(window).keydown(function(e){
				// left 37|65,right 39\68;
				//alert(e.keyCode);
				w=$(window).width()-$(".ban").width();
				if(e.keyCode==37||e.keyCode==65){
					//alert(1);
					if(0<a){
						a-=20;
					}	
				}else if(e.keyCode==39||e.keyCode==68){
					if(a<w){
						a+=20;
					}
				}
				$(".ban").css("left",a);		
			})	
			start();
		});
		function start(){
			 h=$(window).height()-$(".qiu").height();	//y轴边界
			 w=$(window).width()-$(".qiu").width();		//x轴边界
			var ban_y=y+$(".qiu").height();		//小球实时坐标（Y轴底部）
			var ban_x=x+$(".qiu").width()/2; 	//小球实时坐标（X轴中心）
			if(x < w && w_flag==false){	
				x=x+1;
			}else{
				if(x>0){
					w_flag=true;
				}else{
					w_flag=false;
				}
				x-=1;
			}
			if(y<h && h_flag==false){
				if(flag==false){
					y=y+1;
					if(ban_y ==h &&a<=ban_x&&ban_x<=(a+200)){
						flag=true;
						point+=10;
					}
				}else{
					h_flag=true;
					flag=false;
				}	
			}else{
				if(y>0){
					h_flag=true;
				}else{
					h_flag=false;
				}
				y-=1;
			}
			if(y==h){
				alert("游戏结束，你的得分是："+point);
				point=0;
			}
			$(".ban").css("top",h);
			$(".qiu").css({"left":x,"top":y});
			var time=setTimeout("start()",1);
		};
		
	</script>

效果截图