当前位置：网站首页>Small ball playing

Small ball playing

2022-06-28 05:52:00 【Yuanxiaobai】

Small ball playing music
css part 

<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 part 

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

jq part 

<script type="text/javascript">
		var x=0; 
		var y=0;
		var h;
		var w;
		var w_flag=false;	// Contact or not x Axis boundary 
		var h_flag=false;	// Contact or not y Axis boundary 
		var flag=false;  // Whether it contacts the downward moving plate 
		var point=0;	// score 
		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 Axis boundary 
			 w=$(window).width()-$(".qiu").width();		//x Axis boundary 
			var ban_y=y+$(".qiu").height();		// Sphere real-time coordinates （Y Shaft bottom ）
			var ban_x=x+$(".qiu").width()/2; 	// Sphere real-time coordinates （X Shaft center ）
			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(" Game over , Your score is ："+point);
				point=0;
			}
			$(".ban").css("top",h);
			$(".qiu").css({"left":x,"top":y});
			var time=setTimeout("start()",1);
		};
		
	</script>

Effect screenshots
Effect screenshots

原网站

版权声明
本文为[Yuanxiaobai]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206280521410192.html

边栏推荐

猜你喜欢

随机推荐