相思资源网 Design By www.200059.com
本文实例分析了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程序设计有所帮助。
标签：
JS,碰撞,运动
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JS碰撞运动实现方法详解的评论...