碰撞運動與自由落體運動
阿新 • • 發佈：2018-11-10
<!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>