弹力球游戏 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#mycavas{position: relative;}
			#qiu{width:40px;height: 40px;border-radius:50%;background: #008000;position: absolute;left: 20px;top:0;}
			#ban{width: 80px;height: 20px;background: #0099FF;position: absolute;}
		</style>
	</head>
	<body>
		<div id="mycavas"  style="border:1px solid #ccc;background: #DBDBDB;width:500px;height:500px;margin-left:340px;;">
		<div id="qiu" style="left:35px;top:0;"></div>
		<div id="ban" style="bottom:0;left: 251px;"></div>
		</div>
	
	</body>
	<script>
		function id(){
			document.getElementById("id");
		}
		qiu.speedX=4;
		qiu.speedY=4;
	qiu.run=function(){
		var Lft=this.style;
		var leftval=parseInt(Lft.left)+this.speedX;
		var topval=parseInt(Lft.top)+this.speedY;
        Lft.left=leftval+'px';
        Lft.top=topval+'px';
        this.chek(leftval,topval);
	}
	qiu.chek=function(leftval,topval){
     if(leftval>=462||leftval<=0){
	this.speedX=-this.speedX;
	
    }
      if(topval<=0){
	this.speedY=-this.speedY;
      }
      if(topval>=462){
      	clearInterval(clockid);
      	alert('你输了')
      	return false;
      }
      var $left=parseInt(ban.style.left);
      var $top=parseInt(ban.style.top);
      if(leftval+40>=$left&&leftval<=$left+80&&topval+40>=parseInt(ban.style.top)-5&&topval+40<parseInt(ban.style.top)+20){
     this.speedY=-this.speedY;
      }
      
	}
	
	//小木板
	mycavas.onmousemove=function(e){
		if(e.srcElement!==mycavas){
		return ;
	}
		ban.style.left=(e.offsetX-40)+'px';
		ban.style.top=(e.offsetY-20)+'px';
		
	
	}
	//反弹
	
	
	//定时器
		clockid=setInterval(function(){
			qiu.run();
			
		},20)
		
	</script>
</html>

　　

posted on 2017-07-02 16:19  城里的月光  阅读(156)  评论(0)    收藏  举报

导航