我在JS中有一个16个台球阵列,希望用它的方向和速度顺畅地移动每个球. 为此,我设置了一个定时器,每隔42ms(24 fps)调用UpdateThis(). 问题是UpdateThis()需要53ms作为firebug状态. 现在UpdateThis遍历每
为此,我设置了一个定时器,每隔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,但它可以跳过帧. (我实际上没有试过这个,所以这都是理论上的,你可能需要调整一些东西)