javascript - 如何加速这个移动算法？在Javascript中

Question

我在 JS 中有一个由 16 个台球组成的数组，我想用它的方向和速度平稳地移动每个球。
为此，我设置了一个计时器，每 42 毫秒调用一次 UpdateThis()(24 fps)。
问题是 UpdateThis() 需要 53 毫秒作为 Firebug 状态。
现在 UpdateThis 遍历每个球并调用 UpdateBall(ball)。
我认为问题就在那里。
UpdateBall 看起来像这样:

function UpdateBall(ball)
{
if(ball.direction.x != 0 && ball.direction.y != 0) {
    //ball moving!
    for(var i = 0; i < balls.length; i++) {
        //CheckCollision(ball, balls[i]); //even without this it takes 53 ms!
    }

    var ps = VAdd(ball.position, VMul(ball.direction, ball.speed)); //Multiply Direction with speed and add to position!
    if(ps.x < Bx || ps.y < By || ps.x > Bw || ps.y > Bh) { //Bounce off the wall!
        ball.direction = VMul(ball.direction, -1); //Invert direction
        ball.speed *= 1;
        ps = VAdd(ball.position, VMul(ball.direction, ball.speed)); //Calc new position!
    }
    ball.position = ps;
    ball.MoveTo(); //See explanation at the bottom.
    ball.speed *= GRK; //Gravity
    if(ball.speed < 0.05) {
        ball.speed = 0;
    }
  }
}

似乎大部分时间花在 ball.MoveTo() 上，如下所示:

function() 
{
     this.image.style.left = this.position.x + "px";
     this.image.style.top = this.position.y + "px"; 
}

-- 更新 --

function UpdateThis() {
    for(var i = 0; i < balls.length; i++) {
         var cur = balls[i];
         UpdateBall(cur);
         balls[i] = cur;
    }
  }

和 onload 看起来像

nx = setInterval(function() { UpdateThis(); }, 42);

有人对如何加快速度有任何想法吗？

--更新2--

您可以下载包含 HTML 文件的文件夹 here (密码为密码)

Answer 1

如何将位置更新与绘图分开？所以有这样的东西(未经测试的代码):

function DrawBall(ball)
{
    ball.MoveTo(); //Take this line out of UpdateBall
}

-

function UpdateThis() {
    for(var i = 0; i < balls.length; i++) {
         var cur = balls[i];
         UpdateBall(cur);
         balls[i] = cur;
    }
}

-

function DrawThis() {
    for(var i = 0; i < balls.length; i++) {
         DrawBall(balls[i]);
    }
    setTimeout(function() { DrawThis(); }, 42);
}

-

nx = setInterval(function() { UpdateThis(); }, 42);
setTimeout(function() { DrawThis(); }, 42);

如果确实是位置移动慢了，这样逻辑更新还是42ms，帧率不超过42ms但是可以跳帧。 (我还没有实际尝试过，所以这都是理论上的，您可能需要调整一些东西)