重力のある単純なアニメーションを作成したい ( http://jsfiddle.net/2pcr9/4/ chrome と firefox でテスト済み)。私はキャンバスを使ってJavascriptでそれをやっています。重力と速度は、(:46) を使用して可変タイムステップで計算されます。
this.realDelta = (now - this.prevTime) / 1000;
this.realTime += this.realDelta;
各ボールには、速度と位置を計算するための次のコードがあります (:148):
this.vy += this.gravity * time.delta;
this.x += this.vx * time.delta;
this.y += this.vy * time.delta;
現在、このプロトタイプは、ウィンドウを表示しているときに問題なく動作します。
ただし、現在のウィンドウを非表示にする (ブラウザーの別のタブに切り替える) と、window.requestAnimationFrame は停止します。5 秒待ってウィンドウを開くと、window.requestAnimationFrame が再開します。問題は、realDelta が 5 秒になり、速度が大きくなりすぎていることです。
realDelta が 1 秒より大きくならないようにチェックを追加できます (:46):
this.realDelta = (now - this.prevTime) / 1000;
if (this.realDelta > 1) {
this.realDelta = 1;
}
this.realTime += this.realDelta;
しかし、これは実際には問題を解決しません。
今、これを本当に修正する方法がわかりません。ウィンドウが非表示になっているかどうかを確認し、タイマーを一時停止する必要があります (ウィンドウが再び表示されたらタイマーを再開します)。それとも速度の計算に誤りがありますか? 「dt」が大きすぎるというこの問題を他の html5 ゲームはどのように修正していますか?
ありがとう