1. 程式人生 > >碰撞運動與自由落體運動

碰撞運動與自由落體運動

<!DOCTYPE html>
<html>
<head> 
	<title></title> 
	<meta charset='utf-8' /> 
	<style> 
	#div1
	{
		width: 100px;
	 	height: 100px;
	  	background: red;
	   	position: absolute;
	    left: 0;
     	top: 40px;
	} 
	</style>
	
</head> 
<body> 
	<input type="button" value="開始運動" onclick="startMove()"/>
	<div id="div1"></div> 
</body>
<script>
	//新增拖拽功能
	window.onload=function(){ 
		var oDiv = document.getElementById('div1');
		//當在oDiv中點選滑鼠(這裡會用到事件物件),則將獲取X,Y滑鼠當前位置-oDiv 
		//當前的left和top值,獲取到滑鼠離oDiv最左邊/上邊的距離 
		oDiv.onmousedown = function(ev){ 
			var oEvent = ev || event; 
			var disX = oEvent.clientX-oDiv.offsetLeft; 
			var disY = oEvent.clientY-oDiv.offsetTop;
		//當在文件中移動滑鼠時,則將當前滑鼠座標-已處理好的disX和disY,獲取到oDiv.left/top值 
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX-disX;
			var t = oEvent.clientY-disY;
			//oDiv的left/top值=獲取到的oDiv.left/top值,則使用者如何移動left/top隨之改變
			oDiv.style.left = l+"px";
			oDiv.style.top = t+"px";
		};
		//當滑鼠在文件鬆開時,則把滑鼠移動/鬆開的方法置空. 
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;//在滑鼠鬆開時呼叫startMove函式,實現自由彈跳
			startMove(); 
		};
		//當滑鼠移動時,則關閉定時器,為了避免跟startMove函式搶定時器.
		clearInterval(timer);
		};
	};//定義X和Y軸速度;
	var speedX = 25;
	var speedY = 100;
	var timer = null;
	function startMove(){
		clearInterval(timer);
		timer = setInterval(function(){
			var oDiv = document.getElementById("div1");
			//每次Y軸+2,越彈越高 
			speedY += 5;
			//把X,Y軸速度存起來,便意使用 
			var l = oDiv.offsetLeft+speedX; 
			var t = oDiv.offsetTop+speedY;
			//當T大於了視覺化區域-oDIV的高度,就使oDiv越來越慢,隨之等於視覺化區域-oDiv當前高度.避免了撐大視覺化區域 
			if(t > document.documentElement.clientHeight - oDiv.offsetHeight) {
				//Y*-0.8 使越彈越矮;當然也要讓X軸越來越小,隨之T等於視覺化區域-oDiv當前高度
				speedY *= -0.8;
				speedX *= 0.8;
				t = document.documentElement.clientHeight-oDiv.offsetHeight; 
			}
			//當T小余等於0時,使Y軸*=-0.8,使越彈越矮;當然也使X軸變慢,隨之T=0,避免了撐大視覺化區域 
			else if(t <= 0){
				speedY *= -1;
				speedX *= 0.8;
				t = 0;
			} 
			//當L大於了視覺化區域-oDIV的寬度,就使oDiv越來越慢,隨之等於視覺化區域-oDiv當前寬度.避免了撐大視覺化區域 
			if(l > document.documentElement.clientWidth-oDiv.offsetWidth) {
				//X*-0.8 使越彈越矮,隨之L等於視覺化區域-oDiv當前高度
				speedX *= -0.8;
				l = document.documentElement.clientWidth-oDiv.offsetWidth 
			}
			//當L小余等於0時,使X軸*=-0.8,使越彈越矮;隨之L=0,避免了撐大視覺化區域 
			else if(l <= 0){
				speedX *= -0.8;
				l = 0; 
			} 
			//當X和Y軸的絕對值小余1時,則X和Y軸=0; 避免負小數點出現誤差
			if(Math.abs(speedX) < 1){
				speedX = 0; 
			}
			if(Math.abs(speedY) < 1){
				speedY = 0; 
			} 
			//停止條件:當X,Y軸速度都為0時,並且t=視覺化高度-oDiv.offsetHeight,則關閉定時器
			if(speedX == 0 && speedY == 0 && t == document.documentElement.clientHeight-oDiv.offsetHeight){
				clearInterval(timer); 
			}else{ 
				//新增oDIV速度 
				oDiv.style.left = l+"px"; 
				oDiv.style.top = t+"px";
			} 
			document.title = speedX; 
		},30)
	}
</script> 
</html>