Question

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

相关的一点是，在alert()之后renderSnowball()修复问题，除了使用alert（）是一个明显的问题。

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

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() ;
    }
}

Answer 1

你完全阻止了主线程。您是否尝试使用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函数会快速返回;投掷实际上直到后来才完成。这需要一段时间才能习惯正确地做;如果一开始不直观，请不要太在意。

Answer 2

尝试摆脱紧张的循环。在您的功能退出之前，Chrome可能不想重绘。尝试使用setInterval或setTimeout为Chrome提供重绘的机会。

如何强制浏览器重绘图像？

2 个答案: