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