画面更新タイミング requestAnimationFrame2020/08/14

 ブラウザでアニメーションをさせるための定期処理を行う方法として、setIntervalに代わってrequestAnimationFrameを使ってみます。
setInterval(callback, 16);
FPS:
requestAnimationFrame(callback);
FPS:
 ディスプレイのリフレッシュレートに合わせて描画処理を行うようになり、うまくすれば動作が滑らかに見えます。
 内部フレームレートと画面フレームレートの違いについては、別途解決する必要があります。サンプルでは現在時刻からそのままキャラクタの位置を算出していますが、各キャラクタが相互作用を起こすゲームというジャンルではそうもいきません。
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
requestAnimationFrame(onAnimationFrame);// 最初ののフレーム呼び出し
function onAnimationFrame(timestamp)
{
    /*
    アニメーション処理
    */
    requestAnimationFrame(onAnimationFrame);// 次のフレーム呼び出し
}