0

我正在开发一个涉及扔雪球的 JavaScript 游戏。我需要雪球在其飞行路径中尽可能频繁地渲染。Chrome 会进行所有计算，包括设置 style.left 和 style.top 属性，但实际上直到雪球到达目的地才重新绘制雪球。Opera 没有这个问题。

相关的一点是，除了使用 alert() 之外，添加一个alert()afterrenderSnowball()修复问题是一个明显的问题。

到目前为止，这是我的代码：

function throwSnowball()
{
    var theta = parseFloat(angleField.value) *    Math.PI/180 ;
    var Vir = parseFloat(velocityField.value) ;

    if (!isNaN(Vir) && !isNaN(theta) )
    {

    Vix = Math.cos(theta) * Vir * 50;
    Viy = Math.sin(theta) * Vir * 50;   

time = new Date() ;
var timeThrown = time.getTime() ;

    while (snowballPosY > 0)
    {
        current = new Date() ;
        var currentTime = current.getTime() ;

        var timeElapsed = (currentTime - timeThrown)/5000 ;
        snowballPosX += Vix * timeElapsed;
        snowballPosY += Viy * timeElapsed;
        Viy -= GRAVITY * timeElapsed ;
        renderSnowball() ;      //renderSnowball() sets the style.left
                 // and style.top properties to snowballPosX pixels 
                 // and snowballPosY pixels respectively                        
        timeThrown = currentTime ;
    }

    snowballPosX = 0 ;
    snowballPosY = 50 ;
    renderSnowball() ;
    }
}
4

2 回答 2

3

你完全阻塞了主线程。您是否尝试过使用setTimeout（即使超时为零）来允许在动画期间发生其他事情？

如果你愿意使用实验技术，requestAnimationFrame那就更好了。

编辑：该setTimeout方法看起来像这样（替换while循环）：

var drawAndWait = function() {
  if (snowballPosY > 0) {
    // movement/drawing code here
    setTimeout(drawAndWait, 20 /* milliseconds */);
  } else {
    // reset code that would normally go after your while loop
  }
};
drawAndWait();

因此，每次绘图完成时，它都会安排自己再次被调用，如果合适的话。请注意，您的throwSnowball函数将快速返回；直到稍后才真正完成投掷。这需要一段时间才能习惯正确地做；如果一开始不直观，请不要太担心。

于 2012-12-23T03:01:23.290 回答
0

尝试摆脱紧密的循环。在您的函数退出之前，Chrome 可能不想重绘。尝试使用setInterval或setTimeout让 Chrome 有机会重新绘制。

于 2012-12-23T03:01:55.537 回答