Bacon.jsでPacmanゲームを構築します

JavaScriptの非同期プログラミング機能は、「コールバックヘル」を引き起こすため、祝福と呪いの両方です。 async.jsなどのユーティリティライブラリは、非同期コードの整理に役立ちますが、制御フローを効果的に追跡し、非同期コードのロジックを推測することは依然として困難です。

この記事では、Bacon.jsなどのライブラリを使用してJavaScriptの非同期機能を処理するレスポンシブプログラミングの概念を紹介します。

キーポイント

レスポンシブプログラミングは、非同期データフローを処理し、JavaScriptの非同期機能を管理し、「コールバックHell」を回避します。 Bacon.jsなどのライブラリを使用して、この概念を実装できます。

Bacon.jsは、PAC Manゲームのバージョンを作成するために使用できるレスポンシブプログラミングライブラリです。このライブラリにより、より良いエラー処理とデータストリームを組み合わせる機能が可能になり、優れた制御と柔軟性が提供されます。
イベントストリームまたは観測可能なオブジェクトは、Bacon.jsで作成および操作できます。これらのストリームを購読して、イベントを非同期に観察できます。これは、たとえばPACマンゲームでユーザー入力、ゲームロジック、レンダリングを処理するために使用できます。
bacon.jsには、変更が発生したときに反応して更新する応答性の高いプロパティであるBacon.propertyも含まれています。これは、ゲーム状態の変更を管理するために使用できます。
• レスポンシブプログラミングを開始

レスポンシブプログラミングは、非同期データフローをプロセスします。イテレータモードを観察可能なモードに置き換えます。これは、データを積極的に繰り返してトランザクションを処理する命令的なプログラミングとは異なります。レスポンシブプログラミングでは、データを購読し、イベントに非同期に応答します。

バート・デ・スメットは彼のスピーチのこの変化を説明しています。 AndréStaltzは、この記事でレスポンシブプログラミングを探ります。

レスポンシブプログラミングの使用を開始すると、すべてが非同期データストリームになります。サーバー上のデータベース、マウスイベント、約束、サーバーリクエスト。これにより、「コールバックヘル」と呼ばれるものを回避し、より良いエラー処理を提供できます。このアプローチのもう1つの強力な特徴は、データストリームを組み合わせる機能です。これにより、優れた制御と柔軟性が得られます。 Jafar Husainは、彼のスピーチでこれらの概念を説明しています。

Bacon.jsは、RXJSの代替品であるレスポンシブプログラミングライブラリです。次のセクションでは、Bacon.jsを使用して、Pac-Manゲームの広く知られているバージョンを構築します。

プロジェクトの設定

bacon.jsをインストールするには、Bowerを使用してCLIで次のコマンドを実行できます。

ライブラリをインストールした後、レスポンシブプログラミングの使用を開始できます。

PAC MAN GAME APIおよびUnicodetiles.js

$ bower install bacon

外観と感触のために、私はテキストベースのシステムを使用して、リソースやスプライトに対処する必要はありません。自分で作成しないように、素晴らしいライブラリUnicodetiles.jsを使用します。

最初に、ゲームロジックを処理するPacmangameというクラスを作成しました。次の方法を提供します

• pacmangame（親）：PACMANゲームオブジェクトを作成
• start（）：ゲームを開始
• tick（）：ゲームロジックを更新してゲームをレンダリング
• Spawnghost（color）：新しいゴーストを生成
• updateghosts（）：ゲーム内のすべてのゴーストを更新
• MovePacman（P1V）：指定された方向にPACMANを移動します

さらに、次のコールバックを公開します：

onpacmanmove（movvev）：存在する場合は、ユーザーがボタンを押してパックマンに移動を要求したら
• に電話してください。

このAPIを使用するには、ゲームを開始し、Spawnghostを定期的に呼び出してゴーストを生成し、Onpacmanmoveコールバックを聴きます。また、Ghostの動きを更新するために、ResupteGhostsに定期的に電話します。最後に、変更を更新するために定期的にティックを呼び出します。重要なことに、Bacon.jsを使用してイベントを処理するのに役立ちます。

開始する前に、ゲームオブジェクトを作成しましょう：

$ bower install bacon

新しいPacmangameを作成し、Parent DomオブジェクトParentDivで渡します。ここでは、ゲームがレンダリングされます。今、私たちはゲームを構築する準備ができています。

イベントストリームまたは観察可能なオブジェクト

イベントストリームは、イベントを非同期に観察するためにサブスクライブできる観測可能なオブジェクトです。次の3つの方法を使用して、これら3つのタイプのイベントを観察できます。

Observable.OnValue（f）：バリューイベントを聞く、これがイベントを処理する最も簡単な方法です。

• Observable.onerror（f）：ストリームのエラーを処理するために使用されるエラーイベントを聞いてください。
• Observable.Onend（f）：ストリームで終了し、使用可能な値がなくなったイベントを聞いてください。
ストリームを作成します

イベントストリームの基本的な使用法を理解したので、イベントストリームの作成方法を見てみましょう。 Bacon.jsは、jQueryイベント、Ajax Promise、Dom EventTarget、Simple Callbacks、さらにはアレイからイベントストリームを作成するために使用できるいくつかの方法を提供します。

イベントの流れに関するもう1つの有用な概念は、時間の概念です。つまり、イベントは将来いつか来るかもしれません。たとえば、これらのメソッドは、特定の時間間隔内でイベントに合格するイベントストリームを作成します。

bacon.interval（間隔、値）：特定の間隔でこの値を無限に繰り返します。

bacon.Repeatly（間隔、値）：特定の間隔でこれらの値を無限に繰り返します。
bacon.later（遅延、値）：特定の遅延後に値を生成します。
• より多くのコントロールをするには、Bacon.Frombinder（）を使用して独自のイベントストリームを作成できます。 PACマンの動きのイベントを生成するMovestream変数を作成することにより、ゲームにこれを示します。

オブザーバーが聴くことができるイベントを送信する値でシンクを呼び出すことができます。シンクの呼び出しは、Onpacmanmoveコールバックにあります。つまり、ユーザーがキーを押してPAC-MANに移動を要求するたびに。そのため、PAC-MAN MOVEリクエストに関するイベントを発行する観察可能なオブジェクトを作成します。

単純な値ムーブを使用してシンクを呼び出したことに注意してください。これにより、Value MoveVを使用してMoveイベントをプッシュします。 Bacon.ErrorやBacon.Endなどのイベントをプッシュすることもできます。

別のイベントストリームを作成しましょう。今回は、ゴーストイベントを生成するための通知を発行したいと考えています。これについては、SpawnStream変数を作成します

$ bower install bacon

bacon.sequentially（）は、指定された間隔で値を渡すストリームを作成します。私たちの場合、800ミリ秒ごとにゴーストカラーを渡します。また、Delay（）メソッドへの呼び出しもあります。ストリームが遅れているため、2.5秒の遅延の後にイベントが放出され始めます。

イベントストリームに関する方法と大理石の図

このセクションでは、イベントストリームに使用できるいくつかの実用的な方法をリストします。

Observable.map（f）：値をマップし、新しいイベントストリームを返します。

observable.filter（f）：指定された述語を使用して値をフィルタリングします。

• Observable.takewhile（f）：与えられた述語が真であるときに取得します。
• observable.skip（n）：ストリーム内の最初のn要素をスキップします。
• Observable.Throttle（遅延）：特定の遅延を通る流れをスロットする。
• Observable.Debounce（Delay）：特定の遅延を通る流れを軽視します。
• Observable.scan（Seed、F）は、与えられたシード値とアキュムレータ関数でストリームをスキャンします。これにより、ストリームが単一の値に簡素化されます。
イベントストリーミングの詳細については、公式ドキュメントページを参照してください。大理石の図を使用して、スロットリングと除jitterの違いを表示できます。
• ご覧のとおり、

これらのユーティリティはシンプルで強力であり、フローを概念化および制御することができ、それによってそれら内のデータを制御できます。 Netflixがこれらのシンプルな方法を使用してオートコンプリートボックスを作成する方法についてこの講演を見ることをお勧めします。

イベントフローを観察します

var game = new PacmanGame(parentDiv);

これまでのところ、イベントストリームを作成して操作しました。これで、ストリームを購読することでイベントを観察します。

前に作成したMovestreamとSpawnStreamを確認します。今すぐサブスクライブしましょう：

stream.subscribe（）を使用してストリームをサブスクライブすることもできますが、stream.onvalue（）を使用することもできます。違いは、サブスクライブが以前に見たこれらの3つのタイプのイベントを発し、onValueはベーコンのイベントのみを放出することです。つまり、Bacon.ErrorおよびBacon.Endイベントを無視します。

SpawnStream（800ミリ秒ごとに事故）にイベントが表示されると、その価値はゴーストカラーの1つになり、ゴーストを生成するために使用します。 Movestreamにイベントが表示されると、これはユーザーがPACマンを移動するためにキーを押したときに発生することを忘れないでください。 game.movepacmanを方向movevで呼び出します。イベントに表示されるので、パックマンは動きます。

イベントストリームとベーコンを組み合わせて

bus

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

イベントストリームを組み合わせて、他のストリームを作成できます。イベントストリームを組み合わせる方法はたくさんありますが、ここにいくつかあります：

• bacon.combineasArray（ストリーム）：結果ストリームの値が値になるように、イベントを組み合わせた一連のイベントストリーム。
• bacon.zipasArray（ストリーム）：ストリームを新しいストリームに圧縮します。各ストリームのイベントはペアで結合されます。
• Bacon.comBinetEmplate（テンプレート）：テンプレートオブジェクトを使用して、イベントストリームを組み合わせます。

bacon.combinetemplateの例を見てみましょう

$ bower install bacon

ご覧のとおり、テンプレートを使用して、イベントストリーム（つまり、パスワード、ユーザー名、firstName、およびlastName）をloginInfoと呼ばれる複合イベントストリームに組み合わせます。イベントストリームがイベントを受信するたびに、LoginInfoストリームはイベントを放出し、他のすべてのテンプレートを単一のテンプレートオブジェクトに組み合わせます。

bacon.jsストリーム、つまりbacon.bus（）を組み合わせる方法もあります。 Bacon.bus（）は、値をストリームに押し込むことができるイベントストリームです。また、他のストリームをバスに挿入することもできます。ゲームの最後の部分を構築するためにそれを使用します：

var game = new PacmanGame(parentDiv);

ここで、Bacon.intervalを使用して別のストリームを作成します - GhostStream。このストリームは、1秒ごとに0を放出します。今回はそれを購読し、game.updateghostsを呼び出して幽霊を動かします。これは、1秒ごとに幽霊を動かすことです。 Game.tickがコメントアウトされており、Movestreamの他のGame.ticksを覚えていることに注意してください。どちらのストリームがゲームを更新し、最終的にゲームを呼び出して変更をレンダリングするため、各ストリームでTick.Tickを呼び出す代わりに、3番目のストリーム（これら2つのストリームの組み合わせ）を生成できます。ストリーム。

ストリームを結合するには、Bacon.busを使用できます。これは、私たちのゲームの最終的なイベントのストリームであり、CombinedTickStreamと呼ばれます。次に、MovestreamとGhostStreamを挿入し、最終的にそれを購読してGame.tickを呼び出します。

それだけです、私たちは終わりました。残っている唯一のことは、game.start（）;を使用してゲームを開始することです。

bacon.propertyおよびその他の例

bacon.propertyは応答性の高いプロパティです。応答性の高いプロパティは、配列の合計であると想像してください。アレイに要素を追加すると、応答性のある属性が反応し、自らを更新します。 Bacon.Propertyを使用するには、それを購読して変更を聞くか、プロパティが変更されたときに指定されたオブジェクトのメソッドを呼び出すプロパティ（OBJ、メソッド）メソッドを使用できます。ベーコンの使用方法の例は次のとおりです。property：

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

最初に、1秒の間隔である1、2、3、および4で指定された配列の値を生成するイベントストリームを作成し、スキャン結果であるレスポンシブプロパティを作成します。これにより、1、3、6、および10の値がReactiveValueに割り当てられます。

詳細とリアルタイムのデモンストレーションをご覧ください この記事では、PACマンゲームを構築してBacon.jsを使用してレスポンシブプログラミングを紹介します。ゲームのデザインを簡素化し、イベントストリーミングの概念を通じてより制御と柔軟性を提供します。完全なソースコードはGitHubで利用でき、ライブデモはここにあります。

以下には、より便利なリンクがあります

• bacon.js APIリファレンス
• bacon.jsビデオはじめに
• rxjsウェブサイト
• highland.js Advanced Streaming Library
• 「洞察力に富んだヒッピーのためのレスポンシブゲームプログラミング」
Bacon.js

を使用してPAC-MANを構築することについてのFAQ

bacon.jsを使用して自分のパックマンゲームの構築を開始するにはどうすればよいですか？

Bacon.jsで独自のPACマンゲームの構築を開始するには、最初にJavaScriptと機能的レスポンシブプログラミング（FRP）の基本を理解する必要があります。この知識を習得したら、開発環境のセットアップを開始できます。コンピューターにnode.jsとnpm（ノードパッケージマネージャー）をインストールする必要があります。その後、NPMを使用してBacon.jsをインストールできます。すべてがセットアップされたら、ゲームコードの書き込みを開始できます。 Bacon.jsを使用してPACマンゲームを構築する方法に関するステップバイステップガイドについては、当社のWebサイトのチュートリアルをフォローできます。

パックマンゲームの構築におけるbacon.jsの役割は何ですか？

BACON.JSは、JavaScriptの機能的リアクティブプログラミング（FRP）ライブラリです。これにより、ユーザー入力などの非同期イベントをより管理しやすく読みやすい方法で処理できます。 PACマンゲームの構築では、Bacon.jsを使用して、ユーザー入力（キーボードイベントなど）、ゲームロジック（PACマンやゴーストの動きなど）、およびゲーム状態を画面にレンダリングするために使用できます。

bacon.jsを使用して構築されたPACマンゲームをカスタマイズできますか？

もちろん

！ Bacon.jsで基本的なPACマンゲームを構築した後、好みに合わせてカスタマイズできます。ゲームの視覚効果を変更したり、新機能を追加したり、ゲームのルールを変更することもできます。可能性は無限であり、最良の部分は、Bacon.jsのパワーとシンプルさと機能的な応答性プログラミングの恩恵を受けながら、すべてを行うことができることです。

Bacon.jsを使用して構築されたPAC-MANゲームをデバッグするにはどうすればよいですか？

Bacon.jsで構築されたPac-Manゲームのデバッグは、他のJavaScriptアプリケーションのデバッグに似ています。ブラウザの開発者ツールを使用して、コードを確認し、ブレークポイントを設定し、コードをステップスループすることができます。さらに、Bacon.jsは、イベントストリームのエラーを処理するために使用できる「Onerror」と呼ばれるメソッドを提供します。

Bacon.jsで構築されたPACマンゲームのパフォーマンスを最適化するにはどうすればよいですか？

Bacon.jsで構築されたPACマンゲームのパフォーマンスを最適化する方法はいくつかあります。 1つの方法は、DOMの更新の数を最小限に抑えることです。 Bacon.jsの「combinetemplate」関数を使用して、複数のストリームをDOMを更新する単一のストリームに組み合わせることでこれを実現できます。別の方法は、「フラットマップ」関数を使用して、不要なストリームの作成を避けることです。

bacon.jsを使用して他のタイプのゲームを構築できますか？

はい、Bacon.jsを使用して、非同期イベントを処理するために必要なゲームタイプを構築できます。これには、PAC Manのような古典的なアーケードゲームだけでなく、リアルタイム戦略ゲームやマルチプレイヤーオンラインゲームなどのより複雑なゲームも含まれます。

bacon.jsで構築されたPACマンゲームにマルチプレイヤー機能を追加するにはどうすればよいですか？

bacon.jsで構築されたPACマンゲームにマルチプレイヤー機能を追加するには、プレーヤー間の通信を処理するためのサーバーが必要です。これにはnode.jsとwebsocketsを使用できます。クライアントでは、Bacon.jsを使用して、着信および発信Websocketメッセージを処理します。

bacon.jsを使用して構築されたPACマンゲームを自分のウェブサイトに展開できますか？

はい、Bacon.jsを使用して構築されたPACマンゲームをWebサイトに展開できます。 JavaScriptコードをWebpackやBrowserifyなどのツールでバンドルする必要があります。その後、Webサーバーで画像やサウンドなどのバンドルされたコードとゲームリソースをホストできます。

他のJavaScriptライブラリまたはフレームワークでBacon.jsを使用できますか？

はい、他のJavaScriptライブラリまたはフレームワークでBacon.jsを使用できます。 Bacon.jsはスタンドアロンライブラリであるため、他のライブラリやフレームワークに依存しません。ただし、他のライブラリまたはフレームワークと組み合わせて使用​​して、より複雑なアプリケーションを構築できます。

機能的リアクティブプログラミング（FRP）とBacon.jsの詳細はどこで学ぶことができますか？

機能的なリアクティブプログラミング（FRP）とBacon.jsを学習するために、オンラインで利用できる多くのリソースがあります。公式Bacon.jsドキュメントから始めることができます。これは、図書館の機能とAPIに関する包括的なガイドを提供します。また、FRPとBacon.jsをカバーする多くのチュートリアル、ブログ投稿、オンラインコースも詳細にあります。

以上がBacon.jsでPacmanゲームを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。