Clever Geek Handbook

JavaScriptで多数のタイマーを管理する

最後の投稿は、js13kGamesコンテストのゲームをどのように書いたかに関するもので、その目的は、私の技術を13キロバイトのオープンWebテクノロジースタックに適合させることです。







ミニファイのトリックに加えて、ゲームは私にインスピレーションを与え、多数のタイマーを便利なインターフェースにラップしてグループ化することで、多数のタイマーを管理するツールを作成しました。 これが役立つ可能性のあるコードとケースは、カットされています。









ロケットを発射し、いくつかのコード例を確認できるデモ







これはどこで使用できますか？



多くの場合、ゲームのロジックは状態（ 状態 ）に分割されます。たとえば、メニュー、レベル、勝利画面などの小さな独立した部分です。 プレイヤーがゲーム中にメニューに移動し、レベルで何が起こっているかを一時停止できると仮定した場合、タイマーのコンテキストを維持するように注意する必要があります。







私の比較的貧弱な経験の中で、この問題に対する次の解決策に出会いました。 時間制限ロジックを備えた各オブジェクト内に、独自のタイマーが作成され、オブジェクトが破棄されるとクリアされます。 このソリューションの欠点は、すべてのタイマーを手動でクリアする必要があることです。







別の例。 ゲーム空間が多くの小さな場所で構成されている場合（たとえば、The Binding of Isaac）、オブジェクトとユニットの状態をそれらのいくつかに保存することができます。 繰り返しますが、各ユニットのタイマーを一時停止する機能を登録する必要があります。







タイムストア



主なアイデアは、完全に一時停止、更新、クリーニング、再利用できる「タイマースペース」を作成することです。 最初のプリミティブバージョンは、ゲームの開発過程ですでに登場しており、 先週末、より適切なオプションtimestoreを作成しました 。







2つのクラスがタイマーとして使用されます： Timeout



およびInterval



。 内部では、両方ともsetTimeout()



使用します。 両方のクラスには、 .pause()



.clear()



などの名前を話すメソッドがあります。 タイマーは直接使用できますが、主なトリックはTimestore



クラスにあります。







タイムストアを介してタイマーを作成すると、コレクションに保存され、その後、直接だけでなくIDによってもアクセスできます。 







 var gameTimers = new timestore.Timestore(), simpleTimeout = gameTimers.setTimeout(callback, 5000), timeoutWithCustomId = gameTimers.setTimeout('customId', callback, 5000); someButton.on('click', function () { simpleTimeout.clear(); gameTimers.clearTimeout('customId'); });


重要 ：数値はタイムストア内でデフォルトの識別子として使用されるため、数値（および'10'



などの文字列）をカスタムIDとして使用することはできません。







コレクション全体を管理します。 







 gameTimers.pauseAll(); menuTimers.resumeAll();


fireBeforeClear



フラグをfireBeforeClear



に渡すと、クリーニング時に機能します。 







 var lightBulb = new Interval(toggleLight, 100, true); function switchOff() { lightBulb.clear(); //        . }


別の便利なメソッドは.getTimeLeft()



です。 次のタイマーが起動するまでのミリ秒数を返します。







次は？



次の2〜3日間の計画：









また、近い将来、JSFiddleとCodePenにいくつかの例を投稿します。

現在、 例のあるページがあります。







PS ちなみに、タイムストアを作成するには、最初にテストを使用しましたが、まだ疑問がある人のために、テストはクールです！







PPS コードを書き始める前に、私は類似物を見つけようとしましたが、似たようなものに会いませんでした。 たぶん私は見た目が悪かっただけなのでしょうか？ このようなものに会ったら、共有してください。







PPPS 状態については、 こちらをご覧ください 。







More articles:


All Articles