Java Script を使用してオンラインゲームを開発しています。setInterval(movimage, 10) メソッドを使用してゲーム キャラクターを動かしています。しかし、ゲーム キャラクターの移動速度はすべてコンピューターと同じではないことがわかりました。私に提案してください。
3 に答える
setInterval の代わりに、おそらく requestAnimationFrame ( https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame ) を使用する必要があります。
画面が描画できるよりも速く何かを更新しようとしても意味がありません。1 フレームあたり約 16 ミリ秒の 60 fps を目指しています。
http://paulirish.com/2011/requestanimationframe-for-smart-animation/には、これを行う方法に関する詳細情報があります。
ブラウザーのサポートは非常に優れています ( http://caniuse.com/#feat=requestanimationframe ) 要するに、Android Stock ブラウザーを除く現在のすべてのブラウザーです。
これを IE9 以下で動作させる必要がある場合は、https: //gist.github.com/paulirish/1579671がこれらのブラウザーでの動作を適切にシミュレートします。(正直に言うと、これがあなたの心配の最後になると思います、特に不足に関してはcanvas
…)
スクリプトがほとんど何もしない場合でも、各間隔に 10 マイクロ秒以上かかります。
function interval(){
var i=0
intervalID= setInterval(function(){
console.log("called",new Date().getTime());
i++;
if(i>=10){
clearInterval(intervalID);
}
},10);
}
interval()
コンピューターが遅くなったり、ブラウザーが遅くなったりすると、違いに気づき始めます。
ゲームを作成している場合、次のゲームループは、異なるコンピューターで異なる速度で実行されるという問題を最小限に抑えます。
var loopTime = 33; // 1000ms / 30fps (what we want) = 33ms per loop
var startTime, endTime, executionTime;
function gameLoop(){
startTime = new Date().getTime();
doGameMechanics();
drawGame();
endTime = new Date().getTime();
executionTime = endTime - startTime;
if(executionTime < loopTime) { // we were faster than maximum allowed
// sleep the remaining time so the game does not go too fast
setTimeout(function(){ gameLoop(); }, loopTime - executionTime);
}else{ // we were slower than maximum allowed
setTimeout(function(){ gameLoop(); }, 0);
}
}
doGameMechanics()
ゲームのロジックと描画にも時間がかかることを覚えておく必要がありますdrawGame()
。これにより、さまざまなコンピューターでゲームの動作が遅くなったり速くなったりする可能性があります。
このゲームループでは、実行速度を確認します。時間を測定した後、どれくらい待たなければならないかがわかります ( を使用setTimeout
)。「遅すぎる」場合はsetTimeout
、2 番目のパラメーターとして 0 ミリ秒を呼び出します。Javascript はシングルスレッドであるため、これは他のスレッド (ユーザー入力など) が実行されるために必要です。