JS碰撞运动实现方法详解

前端之家收集整理的这篇文章主要介绍了JS碰撞运动实现方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例分析了JS碰撞运动实现方法分享给大家供大家参考,具体如下:

描述:撞到目标点弹回来(速度反转)

一、无重力的漂浮div

=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轴的速度不断增加

=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);

三、碰撞+重力+拖拽

=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程序设计有所帮助。

原文链接:https://www.f2er.com/js/43489.html

猜你在找的JavaScript相关文章