JS碰撞运动实现方法详解

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

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