ゲームループ　ゲームを作るならこれから　JavaScript/TypeScript

JavaScript/TypeScriptでのゲームループの作り方。
動きのあるインタラクティブなアプリやゲームを作るには、一定間隔で処理を実行するゲームループ処理があると便利です。というかないとできないかも。
これまでJavaScriptのアプリ製作で試行錯誤を重ねた結果なので信頼と実績あり！

まず思いつく方法（やってはいけない）

function gameLoop(){
    while(1){
        // ゲームの処理や描画
    }
    // 無限ループ！！
}

動きません。ごめんなさい最初やりました。

次に思いつく方法（setInterval / setTimeout）

function gameLoop(){
    // ゲームの処理や描画
}
setInterval(gameLoop, 1000/60)

呼び出し間隔に誤差があります。
滑らかなアニメーションをさせる場合、適切なタイミング（バブルバッファの切り替え時とか）があるのですが、setIntervalでは対応できません。

デモプログラム（setInterval）

これまで説明した方法でのゲームループ実装です。
これでいいような気がするかもしれませんが、後悔します。後悔しました。
最初の方法は実行しないほうがいいです。ブラウザに怒られます。

GitHub - zerogram-info/gameloop

requestAnimationFrame！requestAnimationFrame！

JavaScriptには専用の処理が用意されています。他の処理より優先されて実行されるようです（経験則ですが たぶんスレッドの優先度が高い）。
呼び出し間隔の誤差が小さく、アニメーション処理を行うのに適したタイミングを教えてくれます。
requestAnimationFrameと合わせて、Promise（async/await）を組み合わせた並行処理の方法について説明します。3Dとか複雑なゲームを作るなら必修です。

---

これまでの経験や失敗を重ねて到達した結果です。よければ記事の購入をお願いします。「自分で調べる時間を考えたら、この記事を購入したほうが」になるような価格設定です。
購入の際には、無料記事のデモプログラムが動作するか確認をお勧めします。

ダウンロードの際、ブラウザからブロック（危険ファイル）されるかもしれませんが、危険なファイルではありません。noteへのアップロード時にウイルスチェックされています。念のため、使用する前に内容の確認をお願いします。

---