js小球的自由落体运动

//js部分var dball = document.getElementById('ball');var width = document.documentElement.clientWidth || document.body.clientWidth; ////获得屏幕可用宽度，考虑碰撞var height = document.documentElement.clientHeight || document.body.clientHeight; ////获得屏幕可用高度，考虑碰撞var leftposition = parseInt(dball.style.left); ////获得小球左侧坐标（理解为小球的横向位置）var topposition = parseInt(dball.style.top); ////获得小球上端坐标（理解为小球的纵向向位置）var bool = true; //判断小球是否落到地面碰撞，速度增量得由正变为负了var boolx = true; //X方向判断是否撞墙需反弹（反弹就是速度由正变为负）  var t00 = 0,t01 = 0; //t00为小球下落期间，下落的上一个时刻，t01为下一个时刻var t10 = 0,t11 = 0; //t10为小球上升期间，上升的上一个时刻，t11为下一个时刻var step = 0.1; //step为上一个时刻和下一个时刻的时间差var speedy = 0; //小球下落阶段的位移增量（可以理解为下落时某一时间的速度值）var speedy1 = 0; //小球上升阶段的位移增量（可以理解为上升时某一时间的速度值）var speedym = 0; //用来保存小球与地面碰撞的瞬间时的位移增量（即小球下落时的最大速度）var a = 1.2; //小球反弹后，交反弹前的速度损失比例（可以理解为能量损耗）/////////////////////////水平方向的X位移，匀速运动，没啥看头//////////////////////////////////function xmove() {  var speedx = 2;  leftposition =dball.offsetLeft;  if (leftposition + ball.offsetWidth >= width) {  leftposition=width- ball.offsetWidth-speedx;  //dball.style.left = leftposition + 'px';//使小球在浏览器窗口运动    boolx = true;  }  if (leftposition < 0) {    boolx = false  }  if (boolx) {    speedx = - 2;  } else speedx = 2;  dball.style.left = leftposition + speedx + 'px';}var doxmove = setInterval('xmove()', 5); /////线程未设清除，不关闭页面则一直会动下去/////////////////////////////////////////////竖直方向的Y位移，核心部分////////////////////////////////////function move(){  if (bool) { ////////初始化为true，则下落    t01 = t00 + step; // 时间段1： 下一时刻相比于上一时刻    speedy = 5 * (t01 * t01 - t00 * t00); //由公式S=1/2gt1²-1/2gt0²转化而来，g设定为10；    t00 = t01; // 时间段1 的下一时刻 则是 时间段2的上一时刻 （有点绕，可以理解为T0~T1为一个时间段，T2~T3为相邻的下一个时间段，则T1==T2）    topposition = dball.offsetTop;    dball.style.top = topposition + speedy + 'px'; /////小球在某一时刻的位置变化    if (topposition + ball.offsetWidth + speedy >= height) {      speedym = speedy; //////保存最大位移增量，为下面反弹记录反弹时的初始位移增量（反弹的初始速度）      dball.style.top = topposition+'px'      t00 = 0;      t01 = 0; //此时，下落过程结束，必须初始化两个时刻（因为时刻不同，反应出的位移增量（速度）也不同）      bool = false; ///// 改变状态，得上升了    }  }   else {    t11 = t10 + step; //上升阶段和下落阶段的本质区别在于：下落阶段的初始速度为 0，上升阶段的初始速度为一个不为0的向上的值，其他的过程和状态都一致    speedy1 = 5 * (t11 * t11 - t10 * t10);    t10 = t11;    topposition = dball.offsetTop;    dball.style.top = topposition - (speedym / a) + speedy1 + 'px'; //  (speedym/a)为上升阶段的初始位移增量（速度），a为能耗    if (speedy1 - (speedym / a) >= 0) { //  向下的位移增量（速度）和初始位移增量（速度）相等时，小球上升到最大高度，此时位移增量为0，改下落了      t10 = 0;      t11 = 0;      bool = true;      a = a + 0.1; //因为每撞击一次，小球第二次的下落速度会变小，因为速度越小，撞击时能量损耗越大，所以能量损耗比例越高    } //这也是模拟客观物体运动所需  }}var doymove = setInterval('move()', 10); //每10毫秒运行一次。没有关闭线程哦，但小球最终会在Y方向停下来，并不需要人为给它停止 。 （小球虽然停了，但线程依然在执行哦）