JavaScript 的異步編程特性，既是福音，也可能是詛咒，因為它會導(dǎo)致“回調(diào)地獄”。雖然 Async.js 等實用程序庫可以幫助組織異步代碼，但有效跟蹤控制流并推斷異步代碼的邏輯仍然很困難。

本文將介紹響應(yīng)式編程的概念，它利用 Bacon.js 等庫來處理 JavaScript 的異步特性。

關(guān)鍵要點

• 響應(yīng)式編程處理異步數(shù)據(jù)流，有助于管理 JavaScript 的異步特性并避免“回調(diào)地獄”。Bacon.js 等庫可用于實現(xiàn)此概念。
• Bacon.js 是一款響應(yīng)式編程庫，可用于創(chuàng)建吃豆人游戲的版本。該庫允許更好的錯誤處理和組合數(shù)據(jù)流的能力，提供極大的控制和靈活性。
• 在 Bacon.js 中可以創(chuàng)建和操作事件流或可觀察對象?？梢杂嗛嗊@些流，從而異步觀察事件。這可以用于處理諸如吃豆人游戲中的用戶輸入、游戲邏輯和渲染等。
• Bacon.js 還包含 Bacon.Property，這是一種響應(yīng)式屬性，可以在發(fā)生更改時做出反應(yīng)并自行更新。這可以用來管理游戲狀態(tài)的變化。

開始響應(yīng)式編程

響應(yīng)式編程處理的是異步數(shù)據(jù)流。它用可觀察模式取代了迭代器模式。這與命令式編程不同，在命令式編程中，您主動迭代數(shù)據(jù)來處理事務(wù)。在響應(yīng)式編程中，您訂閱數(shù)據(jù)并異步響應(yīng)事件。

Bart De Smet 在他的演講中解釋了這種轉(zhuǎn)變。André Staltz 在這篇文章中深入探討了響應(yīng)式編程。

一旦您開始使用響應(yīng)式編程，一切都會變成異步數(shù)據(jù)流：服務(wù)器上的數(shù)據(jù)庫、鼠標(biāo)事件、Promise 和服務(wù)器請求。這使您可以避免所謂的“回調(diào)地獄”，并提供更好的錯誤處理。這種方法的另一個強大功能是能夠組合數(shù)據(jù)流，這為您提供了極大的控制和靈活性。Jafar Husain 在他的演講中解釋了這些概念。

Bacon.js 是一個響應(yīng)式編程庫，它是 RxJS 的替代方案。在接下來的部分中，我們將使用 Bacon.js 來構(gòu)建一個廣為人知的“吃豆人”游戲的版本。

項目設(shè)置

要安裝 Bacon.js，您可以使用 Bower，在 CLI 上運行以下命令：

$ bower install bacon

安裝庫后，您就可以開始使用響應(yīng)式編程了。

吃豆人游戲 API 和 UnicodeTiles.js

為了外觀和感覺，我將使用基于文本的系統(tǒng)，這樣我就不必處理資源和精靈。為了避免自己創(chuàng)建，我將使用一個很棒的庫 UnicodeTiles.js。

首先，我創(chuàng)建了一個名為 PacmanGame 的類，它處理游戲邏輯。它提供以下方法：

• PacmanGame(parent)：創(chuàng)建一個吃豆人游戲?qū)ο?/li>
• start()：啟動游戲
• tick()：更新游戲邏輯，渲染游戲
• spawnGhost(color)：生成一個新的幽靈
• updateGhosts()：更新游戲中每個幽靈
• movePacman(p1V)：按指定方向移動吃豆人

此外，它還公開了以下回調(diào)：

• onPacmanMove(moveV)：如果存在，則在用戶按下按鍵請求吃豆人移動時調(diào)用

因此，要使用此 API，我們將啟動游戲，定期調(diào)用 spawnGhost 來生成幽靈，偵聽 onPacmanMove 回調(diào)，并且每當(dāng)發(fā)生這種情況時，調(diào)用 movePacman 來實際移動吃豆人。我們還定期調(diào)用 updateGhosts 來更新幽靈的移動。最后，我們定期調(diào)用 tick 來更新更改。重要的是，我們將使用 Bacon.js 來幫助我們處理事件。

在開始之前，讓我們創(chuàng)建游戲?qū)ο螅?/p>

$ bower install bacon

我們創(chuàng)建一個新的 PacmanGame，并傳入一個父 DOM 對象 parentDiv，游戲?qū)⒃诖藢ο笾袖秩尽，F(xiàn)在我們準備構(gòu)建我們的游戲了。

事件流或可觀察對象

事件流 是一個可觀察對象，您可以訂閱它以異步觀察事件。您可以使用以下三種方法觀察這三種類型的事件：

• observable.onValue(f)：偵聽值事件，這是處理事件最簡單的方法。
• observable.onError(f)：偵聽錯誤事件，用于處理流中的錯誤。
• observable.onEnd(f)：偵聽流已結(jié)束的事件，并且將不再有移動值可用。

創(chuàng)建流

既然我們已經(jīng)了解了事件流的基本用法，那么讓我們看看如何創(chuàng)建一個事件流。Bacon.js 提供了幾種方法，您可以使用這些方法從 jQuery 事件、Ajax Promise、DOM EventTarget、簡單的回調(diào)甚至數(shù)組創(chuàng)建事件流。

關(guān)于事件流的另一個有用的概念是時間概念。也就是說，事件可能會在未來的某個時間到來。例如，這些方法創(chuàng)建在某個時間間隔內(nèi)傳遞事件的事件流：

• Bacon.interval(interval, value)：以給定的間隔無限重復(fù)該值。
• Bacon.repeatedly(interval, values)：以給定的間隔無限重復(fù)這些值。
• Bacon.later(delay, value)：在給定的延遲后生成值。

為了獲得更多控制，您可以使用 Bacon.fromBinder() 來創(chuàng)建自己的事件流。我們將在游戲中通過創(chuàng)建一個 moveStream 變量來展示這一點，該變量將為我們的吃豆人移動生成事件。

var game = new PacmanGame(parentDiv);

我們可以使用一個值來調(diào)用 sink，該值將發(fā)送一個事件，觀察者可以偵聽該事件。對 sink 的調(diào)用在我們 onPacmanMove 回調(diào)中——也就是說，每當(dāng)用戶按下按鍵請求吃豆人移動時。因此，我們創(chuàng)建了一個可觀察對象，它發(fā)出關(guān)于吃豆人移動請求的事件。

請注意，我們使用一個簡單值 moveV 調(diào)用了 sink。這將使用值 moveV 推送移動事件。我們還可以推送諸如 Bacon.Error 或 Bacon.End 之類的事件。

讓我們創(chuàng)建另一個事件流。這次我們想要發(fā)出通知以生成幽靈的事件。我們將為此創(chuàng)建一個 spawnStream 變量：

$ bower install bacon

Bacon.sequentially() 創(chuàng)建一個流，該流以給定的間隔傳遞值。在我們的例子中，它將每 800 毫秒傳遞一個幽靈顏色。我們還有一個對 delay() 方法的調(diào)用。它延遲了流，因此事件將在 2.5 秒的延遲后開始發(fā)出。

事件流上的方法和大理石圖

在本節(jié)中，我將列出一些更實用的方法，這些方法可用于事件流：

• observable.map(f)：映射值并返回一個新的事件流。
• observable.filter(f)：使用給定的謂詞過濾值。
• observable.takeWhile(f)：在給定的謂詞為真時獲取。
• observable.skip(n)：跳過流中的前 n 個元素。
• observable.throttle(delay)：通過某個延遲來節(jié)流流。
• observable.debounce(delay)：通過某個延遲來去抖動流。
• observable.scan(seed, f) 使用給定的種子值和累加器函數(shù)掃描流。這將流簡化為單個值。

有關(guān)事件流的更多方法，請參閱官方文檔頁面?？梢允褂么罄硎瘓D查看節(jié)流和去抖動之間的區(qū)別：

var game = new PacmanGame(parentDiv);

如您所見，節(jié)流按慣例節(jié)流事件，而去抖動僅在給定的“靜默期”后才發(fā)出事件。

這些實用程序方法簡單而強大，能夠概念化和控制流，從而控制其中的數(shù)據(jù)。我建議觀看這段關(guān)于 Netflix 如何使用這些簡單方法創(chuàng)建自動完成框的演講。

觀察事件流

到目前為止，我們已經(jīng)創(chuàng)建和操作了事件流，現(xiàn)在我們將通過訂閱流來觀察事件。

回顧一下我們之前創(chuàng)建的 moveStream 和 spawnStream?，F(xiàn)在讓我們訂閱它們：

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

盡管您可以使用 stream.subscribe() 來訂閱流，但您也可以使用 stream.onValue()。不同之處在于，subscribe 將發(fā)出我們之前看到的這三種類型的事件，而 onValue 僅發(fā)出 Bacon.Next 類型的事件。也就是說，它將忽略 Bacon.Error 和 Bacon.End 事件。

當(dāng) spawnStream 上出現(xiàn)事件時（每 800 毫秒發(fā)生一次），其值將是幽靈顏色之一，我們使用該顏色來生成幽靈。當(dāng) moveStream 上出現(xiàn)事件時，請記住，當(dāng)用戶按下按鍵來移動吃豆人時，就會發(fā)生這種情況。我們使用方向 moveV 調(diào)用 game.movePacman：它隨事件一起出現(xiàn)，因此吃豆人會移動。

組合事件流和 Bacon.Bus

您可以組合事件流以創(chuàng)建其他流。組合事件流的方法有很多，這里列出其中幾種：

• Bacon.combineAsArray(streams)：組合事件流，以便結(jié)果流的值為值的數(shù)組。
• Bacon.zipAsArray(streams)：將流壓縮成一個新的流。每個流的事件成對組合。
• Bacon.combineTemplate(template)：使用模板對象組合事件流。

讓我們來看一個 Bacon.combineTemplate 的例子：

$ bower install bacon

如您所見，我們使用模板將事件流（即 password、username、firstname 和 lastname）組合成一個名為 loginInfo 的組合事件流。每當(dāng)事件流接收到事件時，loginInfo 流都會發(fā)出事件，將所有其他模板組合成單個模板對象。

Bacon.js 還有一種組合流的方法，即 Bacon.Bus()。Bacon.Bus() 是一個事件流，允許您將值推入流中。它還允許將其他流插入 Bus 中。我們將使用它來構(gòu)建游戲的最后一部分：

var game = new PacmanGame(parentDiv);

現(xiàn)在我們使用 Bacon.interval 創(chuàng)建另一個流——ghostStream。此流將每 1 秒發(fā)出 0。這次我們訂閱它并調(diào)用 game.updateGhosts 來移動幽靈。這是為了每 1 秒移動一次幽靈。請注意已注釋掉 game.tick，并記住 moveStream 中的其他 game.tick？這兩個流都會更新游戲，最后調(diào)用 game.tick 來渲染更改，因此，與其在每個流中調(diào)用 game.tick，我們可以生成第三個流——這兩個流的組合——并在組合流中調(diào)用 game.tick。

為了組合流，我們可以使用 Bacon.Bus。這是我們游戲中最終的事件流，我們稱之為 combinedTickStream。然后我們將 moveStream 和 ghostStream 插入其中，最后訂閱它并在其中調(diào)用 game.tick。

就是這樣，我們完成了。唯一剩下的就是使用 game.start(); 啟動游戲。

Bacon.Property 和更多示例

Bacon.Property 是一種響應(yīng)式屬性。想象一下，一個響應(yīng)式屬性是一個數(shù)組的總和。當(dāng)我們向數(shù)組添加一個元素時，響應(yīng)式屬性將做出反應(yīng)并自行更新。要使用 Bacon.Property，您可以訂閱它并偵聽更改，或者使用 property.assign(obj, method) 方法，該方法在屬性更改時調(diào)用給定對象的方法。這是一個如何使用 Bacon.Property 的示例：

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

首先，我們創(chuàng)建一個事件流，該流以 1 秒的間隔生成給定數(shù)組的值——1、2、3 和 4，然后我們創(chuàng)建一個響應(yīng)式屬性，它是掃描結(jié)果。這將為 reactiveValue 分配 1、3、6 和 10 的值。

了解更多信息和實時演示

在本文中，我們通過構(gòu)建吃豆人游戲介紹了使用 Bacon.js 進行響應(yīng)式編程。它簡化了我們的游戲設(shè)計，并通過事件流的概念為我們提供了更多控制和靈活性。完整的源代碼可在 GitHub 上找到，實時演示可在此處找到。

以下是一些更有用的鏈接：

• Bacon.js API 參考
• Bacon.js 的視頻介紹
• RxJS 網(wǎng)站
• Highland.js 高級流庫
• Bodil Stokke 編寫的《面向有見識的嬉皮士的響應(yīng)式游戲編程》

關(guān)于使用 Bacon.js 構(gòu)建吃豆人的常見問題解答 (FAQ)

我如何開始使用 Bacon.js 構(gòu)建自己的吃豆人游戲？

要開始使用 Bacon.js 構(gòu)建自己的吃豆人游戲，您首先需要了解 JavaScript 和函數(shù)式響應(yīng)式編程 (FRP) 的基礎(chǔ)知識。掌握這些知識后，您可以開始設(shè)置開發(fā)環(huán)境。您需要在計算機上安裝 Node.js 和 npm（Node 包管理器）。之后，您可以使用 npm 安裝 Bacon.js。設(shè)置好所有內(nèi)容后，您可以開始編寫游戲代碼。您可以按照我們網(wǎng)站上的教程獲取有關(guān)如何使用 Bacon.js 構(gòu)建吃豆人游戲的逐步指南。

Bacon.js 在構(gòu)建吃豆人游戲中的作用是什么？

Bacon.js 是一個用于 JavaScript 的函數(shù)式響應(yīng)式編程 (FRP) 庫。它允許您以更易于管理和閱讀的方式處理異步事件，例如用戶輸入。在構(gòu)建吃豆人游戲的過程中，Bacon.js 可用于處理用戶輸入（例如鍵盤事件）、游戲邏輯（例如吃豆人和幽靈的移動）以及將游戲狀態(tài)渲染到屏幕上。

我可以自定義使用 Bacon.js 構(gòu)建的吃豆人游戲嗎？

當(dāng)然可以！使用 Bacon.js 構(gòu)建基本吃豆人游戲后，您可以根據(jù)自己的喜好進行自定義。您可以更改游戲的視覺效果、添加新功能，甚至修改游戲的規(guī)則?？赡苄允菬o限的，最好的部分是，您可以在仍然受益于 Bacon.js 和函數(shù)式響應(yīng)式編程的強大功能和簡單性的同時做到這一切。

我如何調(diào)試使用 Bacon.js 構(gòu)建的吃豆人游戲？

調(diào)試使用 Bacon.js 構(gòu)建的吃豆人游戲類似于調(diào)試任何其他 JavaScript 應(yīng)用程序。您可以使用瀏覽器的開發(fā)者工具來檢查代碼、設(shè)置斷點和單步執(zhí)行代碼。此外，Bacon.js 提供了一種名為“onError”的方法，您可以使用它來處理事件流中的錯誤。

我如何優(yōu)化使用 Bacon.js 構(gòu)建的吃豆人游戲的性能？

有幾種方法可以優(yōu)化使用 Bacon.js 構(gòu)建的吃豆人游戲的性能。一種方法是最小化 DOM 更新的數(shù)量。您可以使用 Bacon.js 的“combineTemplate”函數(shù)將多個流組合成一個更新 DOM 的單個流來實現(xiàn)此目的。另一種方法是使用“flatMap”函數(shù)來避免創(chuàng)建不必要的流。

我可以使用 Bacon.js 構(gòu)建其他類型的游戲嗎？

是的，您可以使用 Bacon.js 構(gòu)建任何需要處理異步事件的游戲類型。這不僅包括像吃豆人這樣的經(jīng)典街機游戲，還包括更復(fù)雜的游戲，例如實時戰(zhàn)略游戲或多人在線游戲。

我如何向使用 Bacon.js 構(gòu)建的吃豆人游戲中添加多人游戲功能？

向使用 Bacon.js 構(gòu)建的吃豆人游戲中添加多人游戲功能需要一個服務(wù)器來處理玩家之間的通信。您可以為此使用 Node.js 和 WebSockets。在客戶端，您將使用 Bacon.js 來處理傳入和傳出的 WebSocket 消息。

我可以將使用 Bacon.js 構(gòu)建的吃豆人游戲部署到網(wǎng)站上嗎？

是的，您可以將使用 Bacon.js 構(gòu)建的吃豆人游戲部署到網(wǎng)站上。您需要使用 Webpack 或 Browserify 等工具捆綁您的 JavaScript 代碼，然后您可以將捆綁的代碼和游戲的資源（例如圖像和聲音）托管在 Web 服務(wù)器上。

我可以將 Bacon.js 與其他 JavaScript 庫或框架一起使用嗎？

是的，您可以將 Bacon.js 與其他 JavaScript 庫或框架一起使用。Bacon.js 是一個獨立的庫，因此它不依賴于其他庫或框架。但是，它可以與其他庫或框架結(jié)合使用以構(gòu)建更復(fù)雜的應(yīng)用程序。

我在哪里可以學(xué)習(xí)更多關(guān)于函數(shù)式響應(yīng)式編程 (FRP) 和 Bacon.js 的知識？

網(wǎng)上有很多資源可以學(xué)習(xí)函數(shù)式響應(yīng)式編程 (FRP) 和 Bacon.js。您可以從官方 Bacon.js 文檔開始，該文檔提供了對該庫的功能和 API 的全面指南。還有許多教程、博客文章和在線課程更詳細地介紹了 FRP 和 Bacon.js。

以上是用Bacon.js建立Pacman游戲的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！