JS碰撞运动实现方法详解

本文实例分析了JS碰撞运动实现方法。分享给大家供大家参考，具体如下：
描述：撞到目标点弹回来（速度反转）
一、无重力的漂浮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; //超出下边界时，把它拉回到下边界，不然右边滚动条会闪动出现一下}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）{ //解决小数的问题，因为假如速度是小数，正的没问题，100（iSpeed=0.5）-->100.5-->100，负的100（iSpeed=-0.5）--->99.5-->99，可能会出现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; //拖拽结束时的速度iSpeedY=t-lastY;lastX=l; //更新上一个点的位置lastY=t;};document.onmouseup=function （）{document.onmousemove=null;document.onmouseup=null;startMove（）; //拖拽结束时执行};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）;}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。