本文實例分析了JS碰撞運動實現(xiàn)方法。分享給大家供大家參考，具體如下：
描述：撞到目標點彈回來（速度反轉(zhuǎn)）
一、無重力的漂浮div
var div1=document.getElementById("div1");var iSpeedX=6;var iSpeedY=8;setInterval(function(){ var l=div1.offsetLeft+iSpeedX; var t=div1.offsetTop+iSpeedY; if(t>=document.documentElement.clientHeight-div1.offsetHeight){ iSpeedY*=-1; //速度反向 t=document.documentElement.clientHeight-div1.offsetHeight; //超出下邊界時，把它拉回到下邊界，不然右邊滾動條會閃動出現(xiàn)一下 } else if(t<=0){ iSpeedY*=-1; t=0; } if(l>=document.documentElement.clientWidth-div1.offsetWidth){ iSpeedX*=-1; l=document.documentElement.clientWidth-div1.offsetWidthl; } else if(l<=0){ iSpeedX*=-1; l=0; } div1.style.left=l+'px'; div1.style.top=t+'px';},30);二、碰撞+重力
所謂重力就是Y軸的速度不斷增加
setInterval(function(){ iSpeedY+=3; var l=div1.offsetLeft+iSpeedX; var t=div1.offsetTop+iSpeedY; if(t>=document.documentElement.clientHeight-div1.offsetHeight){ iSpeedY*=-0.8; iSpeedX*=0.8; //橫向速度也要變慢，否則碰到地面時會停不下來 t=document.documentElement.clientHeight-div1.offsetHeight; } else if(t<=0){ iSpeedY*=-1; iSpeedX*=0.8; t=0; } if(l>=document.documentElement.clientWidth-div1.offsetWidth){ iSpeedX*=-0.8; l=document.documentElement.clientWidth-div1.offsetWidthl; } else if(l<=0){ iSpeedX*=-0.8; l=0; } if(Math.abs(iSpeedX)<1){ //解決小數(shù)的問題，因為假如速度是小數(shù)，正的沒問題，100(iSpeed=0.5)-->100.5-->100，負的100(iSpeed=-0.5)--->99.5-->99，可能會出現(xiàn)x軸反向時滑行 iSpeedX=0; } if(Math.abs(iSpeedY)<1){ iSpeedY=0; } div1.style.left=l+'px'; div1.style.top=t+'px';},30);三、碰撞+重力+拖拽
window.onload=function (){ var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; iSpeedX=l-lastX; //拖拽結(jié)束時的速度 iSpeedY=t-lastY; lastX=l; //更新上一個點的位置 lastY=t; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; startMove(); //拖拽結(jié)束時執(zhí)行 }; clearInterval(timer); };};var timer=null;var iSpeedX=0;var iSpeedY=0;function startMove(){ clearInterval(timer); timer=setInterval(function (){ var oDiv=document.getElementById('div1'); iSpeedY+=3; var l=oDiv.offsetLeft+iSpeedX; var t=oDiv.offsetTop+iSpeedY; if(t>=document.documentElement.clientHeight-oDiv.offsetHeight) { iSpeedY*=-0.8; iSpeedX*=0.8; t=document.documentElement.clientHeight-oDiv.offsetHeight; } else if(t<=0) { iSpeedY*=-1; iSpeedX*=0.8; t=0; } if(l>=document.documentElement.clientWidth-oDiv.offsetWidth) { iSpeedX*=-0.8; l=document.documentElement.clientWidth-oDiv.offsetWidth; } else if(l<=0) { iSpeedX*=-0.8; l=0; } if(Math.abs(iSpeedX)<1) { iSpeedX=0; } if(Math.abs(iSpeedY)<1) { iSpeedY=0; } if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight) { clearInterval(timer); } else { oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; } document.title=iSpeedX; }, 30);}更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
