小球彈彈樂

轅小白發表於2020-11-26

小球彈彈樂
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>

效果截圖
效果截圖

相關文章