求两小球移动算法

点 移动

解决方案 »

  1.   

    var a = {
    //a的原始坐标
    x:x,
    y:y
    },
    b = {
    //b的原始坐标
    x:x,
    y:y
    },
    time = 100,
    //在100步，通过a到达b点
    btw = {
    //b相对于a的坐标
    x:b.x-a.x,
    y:b.y-a.y
    },
    every = {
    //每一步通过的距离
    ex:btw.x/time,
    ey:btw.y/time
    }//每次定位a的坐标：
    a.x = a.x + every.ex;
    a.y = a.y + every.ey;//再把新的a的x，y坐标，给a元素定位
      

  2.   

            dx = a.x-b.x,
            dy = a.y-b.y,
            d = Math.sqrt(dx * dx + dy * dy),
            e = this.e * d;
      
           a.x -= ((dx / d) * e );
           a.y -= ((dy / d) * e );以上这段代码是什么意思呢？尤其是最后两句。
      

  3.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript"></script>
    <style type="text/css">
    .ball{
    position:absolute;
    width:30px;
    height:30px;
    background-color:green;
    border-radius: 15px;
    text-align:center;
    line-height:30px;
    color:white;
    }
    </style>
    <script type="text/javascript">
    function go(){
    var blockA = document.getElementById("blockA");
    var posA = getAxis("blockA");
    var posB = getAxis("blockB");

    var duration = 3000;//ms
    var timePass = 0;
    var frameRate = 15; // 帧频
    var itv = setInterval(excute, frameRate); function excute(){
    var x, y; timePass += frameRate; if(timePass >= duration){
    x = posB.x;
    y = posB.y;

    clearInterval(itv);
    }else{
    x = (posB.x - posA.x) * timePass / duration + posA.x;
    y = (posB.y - posA.y) * timePass / duration + posA.y;
    }

    blockA.style.left = x + "px";
    blockA.style.top = y + "px";
    }
    } function getAxis(objID, type){
    var left = parseInt(document.getElementById(objID).style.left.replace("px", ""));
    var top = parseInt(document.getElementById(objID).style.top.replace("px", "")); return {x: left, y: top};
    }
    </script>
    </head><body>
    <div id="bg" style="border:solid 1px black;width:800px;height:500px;position:absolute;top:50px;">
    <div id="blockA" class="ball" style="left: 150px;top: 100px;">A</div>  
    <div id="blockB" class="ball" style="left: 20px;top: 340px;">B</div>
    </div>
        <button onclick="go()">Go</button>
    </body>
    </html>写了个基本的. 在指定时间内匀速移动
      

  4.   


    这也是一种思路, 这个d表示两者之间的距离, 
    e表示每个时间点间在d上的步进距离
    最后两句就是这个时间点所在的位置距离在x和y方向上的投影.