可拖拽的弹性碰撞小球

最新推荐文章于 2024-09-03 00:41:58 发布

小白甜甜圈

最新推荐文章于 2024-09-03 00:41:58 发布

阅读量645

点赞数 1

文章标签： javascript 弹性碰撞

本文链接：https://blog.youkuaiyun.com/qq_35168386/article/details/60960929

版权

实现鼠标拖拽、根据拖拽的速度来控制小球的速度，然后进行碰撞检测，碰撞过程中会有速度的损耗。代码如下C+V即可看效果吐舌头

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo1</title>
	<style>
	body{
		
		margin: 0px;
		padding: 0px;
		height: 630px;
		font-family: "微软雅黑";
		background: black;	
	}
	#wind{
		width: 900px;
		height: 600px;
		margin-left: 200px;
		background: pink;
		position: relative;
	}
	#it{
		position: absolute;
		width: 50px;
		height: 50px;
		left: 420px;
		top: 100px;
		border-radius: 25px;
		background: green;
		opacity: 1;
	}
	</style>
</head>
<body>
<div id="wind">
	<div id="it">		
	</div>
</div>
	<script>
	window.οnlοad=function(){
		var aBody=document.getElementById('wind');
		var aDiv=document.getElementById('it');
		var aDivx=0;
		var aDivy=0;
		var arr=[];
		var bBt=true;
		aDiv.οnmοusedοwn=function(ev){
			var ev=ev||window.event;
			aDivx=ev.clientX-aDiv.offsetLeft;
			aDivy=ev.clientY-aDiv.offsetTop;
			speed0=ev.clientX;
			speed1=ev.clientY;
			document.οnmοusemοve=function(ev){
				var ev=ev||window.event;			
                aDiv.style.left=ev.clientX-aDivx+'px';
                aDiv.style.top=ev.clientY-aDivy+'px';
            speedX=ev.clientX-speed0;
            speedY=ev.clientY-speed1;
            speed0=ev.clientX;
            speed1=ev.clientY;       
			}
			document.οnmοuseup=function(){
              document.οnmοusemοve=null;
               move();              
			}
		}
		function move(){
		   var aDivX=aDiv.offsetLeft;
               var aDivY=aDiv.offsetTop; 
              if (aDivY<aBody.offsetHeight-aDiv.offsetHeight) {
              	 var speed=speedY;
              	 var speedXX=speedX; 
                 var timer=null;
               clearInterval(timer);
               timer=setInterval(function(){
              	aDiv.style.top=aDiv.offsetTop+speed+'px';
                aDiv.style.left=aDiv.offsetLeft+speedXX+'px';
                speed+=6;   
               	if (aDiv.offsetTop>=aBody.offsetHeight-aDiv.offsetHeight) 
               	{
               		aDiv.style.top=aBody.offsetHeight-aDiv.offsetHeight+'px';
               		speed*=-1;
               		speed*=0.5;
               		speedXX*=0.75;		
               	}else if(aDiv.offsetTop<=0){
                   aDiv.style.top=0+'px';
               		speed*=-1;
               		speed*=1.5;
               		speedXX*=0.8;
               	}
               	if (aDiv.offsetLeft<=0) 
               	{
               		aDiv.style.left=0+'px';
               		speedXX*=-1;
               		speedXX*=0.8; 
               	}else if(aDiv.offsetLeft>=aBody.offsetWidth-50){
               		aDiv.style.left=aBody.offsetWidth-50+'px';
               		speedXX*=-1;
               		speedXX*=0.75;
               	}
                if (aDiv.offsetTop==aBody.offsetHeight-aDiv.offsetHeight&&speed>-10) {
                	speed=0;
                	if(Math.abs(speedXX)<=1){
                		clearInterval(timer);
                	}
                }
               },100);
              }
	}
	}
	</script>
</body>
</html>