JavaScriptの非同期プログラミング機能は、「コールバックヘル」を引き起こすため、祝福と呪いの両方です。 async.jsなどのユーティリティライブラリは、非同期コードの整理に役立ちますが、制御フローを効果的に追跡し、非同期コードのロジックを推測することは依然として困難です。
この記事では、Bacon.jsなどのライブラリを使用してJavaScriptの非同期機能を処理するレスポンシブプログラミングの概念を紹介します。キーポイント
レスポンシブプログラミングは、非同期データフローを処理し、JavaScriptの非同期機能を管理し、「コールバックHell」を回避します。 Bacon.jsなどのライブラリを使用して、この概念を実装できます。
レスポンシブプログラミングは、非同期データフローをプロセスします。イテレータモードを観察可能なモードに置き換えます。これは、データを積極的に繰り返してトランザクションを処理する命令的なプログラミングとは異なります。レスポンシブプログラミングでは、データを購読し、イベントに非同期に応答します。
バート・デ・スメットは彼のスピーチのこの変化を説明しています。 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を使用します。
開始する前に、ゲームオブジェクトを作成しましょう：
$ bower install bacon
イベントストリームまたは観察可能なオブジェクト
イベントストリームは、イベントを非同期に観察するためにサブスクライブできる観測可能なオブジェクトです。次の3つの方法を使用して、これら3つのタイプのイベントを観察できます。
Observable.OnValue（f）：バリューイベントを聞く、これがイベントを処理する最も簡単な方法です。イベントの流れに関するもう1つの有用な概念は、時間の概念です。つまり、イベントは将来いつか来るかもしれません。たとえば、これらのメソッドは、特定の時間間隔内でイベントに合格するイベントストリームを作成します。
bacon.interval（間隔、値）：特定の間隔でこの値を無限に繰り返します。
単純な値ムーブを使用してシンクを呼び出したことに注意してください。これにより、Value MoveVを使用してMoveイベントをプッシュします。 Bacon.ErrorやBacon.Endなどのイベントをプッシュすることもできます。
別のイベントストリームを作成しましょう。今回は、ゴーストイベントを生成するための通知を発行したいと考えています。これについては、SpawnStream変数を作成します
$ bower install bacon
イベントストリームに関する方法と大理石の図
このセクションでは、イベントストリームに使用できるいくつかの実用的な方法をリストします。observable.filter（f）：指定された述語を使用して値をフィルタリングします。
イベントフローを観察します
var game = new PacmanGame(parentDiv);
これまでのところ、イベントストリームを作成して操作しました。これで、ストリームを購読することでイベントを観察します。
前に作成したMovestreamとSpawnStreamを確認します。今すぐサブスクライブしましょう：
SpawnStream（800ミリ秒ごとに事故）にイベントが表示されると、その価値はゴーストカラーの1つになり、ゴーストを生成するために使用します。 Movestreamにイベントが表示されると、これはユーザーがPACマンを移動するためにキーを押したときに発生することを忘れないでください。 game.movepacmanを方向movevで呼び出します。イベントに表示されるので、パックマンは動きます。
イベントストリームとベーコンを組み合わせて
bus
var moveStream = Bacon.fromBinder(function(sink) {
game.onPacmanMove = function(moveV) {
sink(moveV);
};
});イベントストリームを組み合わせて、他のストリームを作成できます。イベントストリームを組み合わせる方法はたくさんありますが、ここにいくつかあります：
bacon.combinetemplateの例を見てみましょう
$ bower install bacon
bacon.jsストリーム、つまりbacon.bus（）を組み合わせる方法もあります。 Bacon.bus（）は、値をストリームに押し込むことができるイベントストリームです。また、他のストリームをバスに挿入することもできます。ゲームの最後の部分を構築するためにそれを使用します：
var game = new PacmanGame(parentDiv);
ストリームを結合するには、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);
};
});
詳細とリアルタイムのデモンストレーションをご覧ください この記事では、PACマンゲームを構築してBacon.jsを使用してレスポンシブプログラミングを紹介します。ゲームのデザインを簡素化し、イベントストリーミングの概念を通じてより制御と柔軟性を提供します。完全なソースコードはGitHubで利用でき、ライブデモはここにあります。
以下には、より便利なリンクがあります
パックマンゲームの構築におけるbacon.jsの役割は何ですか？
bacon.jsを使用して構築されたPACマンゲームをカスタマイズできますか？
もちろんBacon.jsを使用して構築されたPAC-MANゲームをデバッグするにはどうすればよいですか？
Bacon.jsで構築されたPac-Manゲームのデバッグは、他のJavaScriptアプリケーションのデバッグに似ています。ブラウザの開発者ツールを使用して、コードを確認し、ブレークポイントを設定し、コードをステップスループすることができます。さらに、Bacon.jsは、イベントストリームのエラーを処理するために使用できる「Onerror」と呼ばれるメソッドを提供します。Bacon.jsで構築されたPACマンゲームのパフォーマンスを最適化する方法はいくつかあります。 1つの方法は、DOMの更新の数を最小限に抑えることです。 Bacon.jsの「combinetemplate」関数を使用して、複数のストリームをDOMを更新する単一のストリームに組み合わせることでこれを実現できます。別の方法は、「フラットマップ」関数を使用して、不要なストリームの作成を避けることです。
はい、Bacon.jsを使用して、非同期イベントを処理するために必要なゲームタイプを構築できます。これには、PAC Manのような古典的なアーケードゲームだけでなく、リアルタイム戦略ゲームやマルチプレイヤーオンラインゲームなどのより複雑なゲームも含まれます。
bacon.jsで構築されたPACマンゲームにマルチプレイヤー機能を追加するには、プレーヤー間の通信を処理するためのサーバーが必要です。これにはnode.jsとwebsocketsを使用できます。クライアントでは、Bacon.jsを使用して、着信および発信Websocketメッセージを処理します。
はい、Bacon.jsを使用して構築されたPACマンゲームをWebサイトに展開できます。 JavaScriptコードをWebpackやBrowserifyなどのツールでバンドルする必要があります。その後、Webサーバーで画像やサウンドなどのバンドルされたコードとゲームリソースをホストできます。
はい、他のJavaScriptライブラリまたはフレームワークでBacon.jsを使用できます。 Bacon.jsはスタンドアロンライブラリであるため、他のライブラリやフレームワークに依存しません。ただし、他のライブラリまたはフレームワークと組み合わせて使用して、より複雑なアプリケーションを構築できます。
機能的なリアクティブプログラミング（FRP）とBacon.jsを学習するために、オンラインで利用できる多くのリソースがあります。公式Bacon.jsドキュメントから始めることができます。これは、図書館の機能とAPIに関する包括的なガイドを提供します。また、FRPとBacon.jsをカバーする多くのチュートリアル、ブログ投稿、オンラインコースも詳細にあります。
以上がBacon.jsでPacmanゲームを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
