0

私は、雪玉を投げる JavaScript ゲームに取り組んでいます。飛行経路中にできるだけ頻繁に雪玉をレンダリングする必要があります。Chrome は、style.left プロパティと style.top プロパティの設定を含むすべての計算を行いますが、雪玉が目的地に到達するまで実際に再描画することはありません。Opera にはこの問題はありません。

関連するポイントは、alert() の使用が明らかな問題であることを除いて、alert()after をrenderSnowball()配置すると問題が修正されることです。

これまでの私のコードは次のとおりです。

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 に答える