当前位置 : 主页 > 手机开发 > 无线 >

如何加快这个移动算法?在Javascript中

来源:互联网 收集:自由互联 发布时间:2021-06-10
我在JS中有一个16个台球阵列,希望用它的方向和速度顺畅地移动每个球. 为此,我设置了一个定时器,每隔42ms(24 fps)调用UpdateThis(). 问题是UpdateThis()需要53ms作为firebug状态. 现在UpdateThis遍历每
我在JS中有一个16个台球阵列,希望用它的方向和速度顺畅地移动每个球.
为此,我设置了一个定时器,每隔42ms(24 fps)调用UpdateThis().
问题是UpdateThis()需要53ms作为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的文件夹(密码是密码)

如何将位置更新与图纸分开?所以有类似的东西(未经测试的代码):

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,但它可以跳过帧. (我实际上没有试过这个,所以这都是理论上的,你可能需要调整一些东西)

网友评论