與React和PHP的遊戲開發：它們的兼容性如何？

核心要點

• 使用React和PHP可以共同開發遊戲，React負責前端用戶界面，PHP管理後端和遊戲邏輯。
• 遊戲開發的設置過程包括設置異步PHP服務器，在非Laravel項目中使用Laravel Mix，以及使用WebSockets連接後端和前端。
• Aerys庫可用於應用程序的HTTP和WebSocket部分，支持高並發和WebSockets。
• Laravel Mix可用於構建ReactJS文件，即使在非Laravel項目中也是如此，它提供了一種簡單的方法來配置和擴展構建鏈。
• WebSockets可用於連接後端和前端，允許服務器和客戶端之間進行實時通信。

我從決定嘗試使用PHP和React構建遊戲的那一刻起，就開始思考這個問題。 “我想製作一個多人經濟類游戲，類似於《星露穀物語》，但沒有交友方面的內容，並且擁有玩家驅動的經濟系統。” 問題是，我對多人遊戲的動態性，或者如何思考和實現基於玩家的經濟系統一無所知。

我甚至不確定自己是否了解足夠的React知識來證明使用它的合理性。我的意思是，我最初的界面——我非常關注服務器和遊戲的經濟方面——非常適合React。但是當我開始製作耕作/互動方面的內容時呢？我喜歡圍繞經濟系統構建等距界面的想法。

我曾經觀看過dead_lugosi的演講，她描述了用PHP構建中世紀遊戲的過程。 Margaret激勵了我，那次演講是我寫一本關於JS遊戲開發書籍的原因之一。我決心要寫下我的經驗。也許其他人也可以從我的錯誤中學習。

---

(本部分的代碼可在以下地址找到：github.com/assertchris-tutorials/sitepoint-making-games/tree/part-1。我已經在PHP 7.1和最新版本的Google Chrome中對其進行了測試。)

---

後端設置

我首先搜索的是關於構建多人經濟系統的指導。我找到一個優秀的Stack Overflow帖子，其中人們解釋了需要考慮的各種事情。在我意識到我可能從錯誤的地方開始之前，我已經看了一半了。 “首先：我需要一個PHP服務器。我將有一堆React客戶端，所以我想要一個能夠處理高並發（甚至可能是WebSockets）的東西。它需要是持久性的：即使玩家不在線，事情也必須發生。”

我開始設置一個異步PHP服務器——來處理高並發並支持WebSockets。我添加了我最近使用PHP預處理器的工作，使事情更清晰，並創建了前幾個端點。

來自config.pre：

$host = new Aerys\Host();
$host->expose("*", 8080);

$host->use($router = Aerys\router());
$host->use($root = Aerys\root(.."/public"));

$web = process .."/routes/web.pre";
$web($router);

$api = process .."/routes/api.pre";
$api($router);

我決定對應用程序的HTTP和WebSocket部分使用Aerys。這段代碼與Aerys文檔看起來非常不同，但這是因為我對所需內容有很好的了解。

運行Aerys應用程序的通常過程是使用類似這樣的命令：

vendor/bin/aerys -d -c config.php

有很多代碼需要重複，而且它沒有處理我想使用PHP預處理的事實。我創建了一個加載器文件。

來自loader.php：

return Pre\processAndRequire(__DIR__ . "/config.pre");

然後我安裝了我的依賴項。這是來自composer.json：

"require": {
  "amphp/aerys": "dev-amp_v2",
  "amphp/parallel": "dev-master",
  "league/container": "^2.2",
  "league/plates": "^3.3",
  "pre/short-closures": "^0.4.0"
},
"require-dev": {
  "phpunit/phpunit": "^6.0"
},

我想使用amphp/parallel將阻塞代碼從異步服務器中移出，但它無法與amphp/aerys的穩定標籤一起安裝。這就是我使用dev-amp_v2分支的原因。

我認為包含某種模板引擎和服務定位器是個好主意。我選擇了PHP League的每個版本。最後，我添加了pre/short-closures，既用於處理config.pre中的自定義語法，也用於我之後計劃使用的短閉包……

然後我開始創建路由文件。來自routes/web.pre：

use Aerys\Router;
use App\Action\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/", new HomeAction
  );
};

以及來自routes/api.pre：

use Aerys\Router;
use App\Action\Api\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/api", new HomeAction
  );
};

雖然是簡單的路由，但這有助於我測試config.pre中的代碼。我決定讓這些路由文件返回閉包，這樣我就可以向它們傳遞一個類型化的$router，它們可以向其中添加自己的路由。最後，我創建了兩個（類似的）操作。

來自app/Actions/HomeAction.pre：

namespace App\Action;

use Aerys\Request;
use Aerys\Response;

class HomeAction
{
  public function __invoke(Request $request,
    Response $response)
  {
    $response->end("hello world");
  }
}

最後的潤色是添加快捷腳本，以啟動Aerys服務器的開發和生產版本。

來自composer.json：

"scripts": {
  "dev": "vendor/bin/aerys -d -c loader.php",
  "prod": "vendor/bin/aerys -c loader.php"
},
"config": {
  "process-timeout": 0
},

完成所有這些後，我可以啟動一個新的服務器，只需鍵入以下命令即可訪問http://127.0.0.1:8080：

composer dev

前端設置

“好的，既然我已經讓PHP方面的事情相對穩定了；我該如何構建ReactJS文件呢？也許我可以使用Laravel Mix……？”

我不太想創建一個全新的構建鏈，而且Mix也已被重建為可在非Laravel項目中良好工作。雖然配置和擴展相對容易，但它默認情況下更偏向VueJS。

我首先要做的是安裝一些NPM依賴項。來自package.json：

"devDependencies": {
  "babel-preset-react": "^6.23.0",
  "bootstrap-sass": "^3.3.7",
  "jquery": "^3.1.1",
  "laravel-mix": "^0.7.5",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "webpack": "^2.2.1"
},

Mix使用Webpack來預處理和捆綁JS和CSS文件。我還需要安裝React和相關的Babel庫來構建jsx文件。最後，我添加了Bootstrap文件，以獲得一些默認樣式。

Mix自動加載自定義配置文件，所以我添加了以下內容。來自webpack.mix.js：

let mix = require("laravel-mix")

// load babel presets for jsx files

mix.webpackConfig({
  "module": {
    "rules": [
      {
        "test": /jsx$/,
        "exclude": /(node_modules)/,
        "loader": "babel-loader" + mix.config.babelConfig(),
        "query": {
          "presets": [
            "react",
            "es2015",
          ],
        },
      },
    ],
  },
})

// set up front-end assets

mix.setPublicPath("public")

mix.js("assets/js/app.jsx", "public/js/app.js")
mix.sass("assets/scss/app.scss", "public/css/app.css")
mix.version()

我需要告訴Mix如何處理jsx文件，所以我添加了與通常放在.babelrc中的配置相同的配置。我計劃讓單個JS和CSS入口點進入應用程序的各個部分。

注意：未來版本的Mix將內置支持構建ReactJS資產。屆時，可以刪除mix.webpackConfig代碼。

再一次，我創建了一些快捷腳本，以節省大量的打字工作。來自package.json：

$host = new Aerys\Host();
$host->expose("*", 8080);

$host->use($router = Aerys\router());
$host->use($root = Aerys\root(.."/public"));

$web = process .."/routes/web.pre";
$web($router);

$api = process .."/routes/api.pre";
$api($router);

所有三個腳本都使用了Webpack變量命令，但它們在除此之外的操作方面有所不同。 dev構建了JS和CSS文件的調試版本。 -w開關啟動了Webpack監視器（以便可以部分重建捆綁包）。 -p開關啟用了精簡的生產版本的捆綁包。

由於我使用了捆綁版本控制，所以我需要一種方法來引用類似/js/app.60795d5b3951178abba1.js的文件，而無需知道哈希值。我注意到Mix喜歡創建清單文件，所以我製作了一個輔助函數來查詢它。來自helpers.pre：

vendor/bin/aerys -d -c config.php

Aerys知道如何在它們以$val = yield $promise的形式出現時處理promise，所以我使用了Amp的Promise實現。讀取並解碼文件後，我可以查找匹配的文件路徑。我調整了HomeAction。來自app/Actions/HomeAction.pre：

return Pre\processAndRequire(__DIR__ . "/config.pre");

我意識到我可以繼續創建返回promise的函數，並以這種方式使用它們來保持代碼的異步性。這是我的JS代碼，來自assets/js/component.jsx：

"require": {
  "amphp/aerys": "dev-amp_v2",
  "amphp/parallel": "dev-master",
  "league/container": "^2.2",
  "league/plates": "^3.3",
  "pre/short-closures": "^0.4.0"
},
"require-dev": {
  "phpunit/phpunit": "^6.0"
},

……以及來自assets/js/app.jsx：

use Aerys\Router;
use App\Action\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/", new HomeAction
  );
};

畢竟，我只是想看看Mix是否會編譯我的jsx文件，以及我是否可以使用異步mix函數再次找到它們。事實證明它有效！

注意：每次都使用mix函數是很昂貴的，特別是如果我們正在加載相同的文件。相反，我們可以在服務器引導階段加載所有模板，並在需要時從操作內部引用它們。我們啟動Aerys的配置文件可以返回一個promise（例如Amp\all給我們的那種），因此我們可以在服務器啟動之前解析所有模板。

使用WebSockets連接

我幾乎已經設置好了。最後要做的是通過WebSockets連接後端和前端。我發現這相對簡單，使用一個新類。來自app/Socket/GameSocket.pre：

use Aerys\Router;
use App\Action\Api\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/api", new HomeAction
  );
};

……以及對web路由的輕微修改（來自routes/web.pre）：

namespace App\Action;

use Aerys\Request;
use Aerys\Response;

class HomeAction
{
  public function __invoke(Request $request,
    Response $response)
  {
    $response->end("hello world");
  }
}

現在，我可以更改JS以連接到此WebSocket，並將消息發送到連接到它的每個人。來自assets/js/component.jsx：

"scripts": {
  "dev": "vendor/bin/aerys -d -c loader.php",
  "prod": "vendor/bin/aerys -c loader.php"
},
"config": {
  "process-timeout": 0
},

當我創建一個新的Component對象時，它將連接到WebSocket服務器，並為新消息添加一個事件監聽器。我添加了一些調試代碼——以確保它能夠正確連接，並發送新的消息。

我們稍後會詳細介紹PHP和WebSockets，別擔心。

總結

在本部分中，我們研究瞭如何設置一個簡單的異步PHP Web服務器，如何在非Laravel項目中使用Laravel Mix，甚至如何使用WebSockets將後端和前端連接在一起。

哇！涵蓋了很多內容，而且我們還沒有編寫一行遊戲代碼。加入我在第二部分，我們將開始構建遊戲邏輯和React界面。

(本文由Niklas Keller同行評審。感謝所有SitePoint的同行評審者，使SitePoint的內容達到最佳狀態！)

使用ReactJS和PHP進行遊戲開發的常見問題解答（FAQ）

ReactJS和PHP在遊戲開發中的兼容性如何？

ReactJS和PHP在遊戲開發中具有高度的兼容性。 ReactJS是一個JavaScript庫，非常適合構建用戶界面，尤其適用於單頁應用程序。它允許快速、響應迅速的網頁設計。另一方面，PHP是一種服務器端腳本語言，非常適合後端開發。它可以處理數據庫、用戶身份驗證和服務器端邏輯。當一起使用時，ReactJS可以處理前端，創建動態且交互式用戶界面，而PHP則管理後端。

我可以在ReactJS遊戲中使用PHP進行遊戲邏輯嗎？

是的，你可以在ReactJS遊戲中使用PHP進行遊戲邏輯。雖然ReactJS處理用戶界面，但PHP可以在服務器端管理遊戲邏輯。這包括處理數據、管理用戶會話和控制遊戲規則。這種關注點分離允許更井然有序且高效的開發過程。

使用ReactJS進行遊戲開發的好處是什麼？

ReactJS為遊戲開發提供了許多好處。它的虛擬DOM允許高效的更新和渲染，使遊戲運行更流暢。它還支持可重用的組件，這可以大大加快開發時間。此外，ReactJS擁有龐大的社區和豐富的資源，使查找問題的解決方案或學習新技術更容易。

使用PHP進行遊戲開發的優勢是什麼？

PHP在遊戲開發中具有多項優勢。它是一種服務器端語言，這意味著它可以處理數據管理、用戶身份驗證和服務器端遊戲邏輯。 PHP也很容易學習，語法簡單，並且擁有龐大的開發者社區。它也具有高度的可擴展性，使其適合可能需要處理大量用戶的遊戲。

如何開始使用ReactJS和PHP開發遊戲？

要開始使用ReactJS和PHP開發遊戲，你首先需要學習這兩種語言的基礎知識。有很多在線資源和教程可用。一旦你熟悉了這些語言，你可以從構建簡單的遊戲開始。這可以是一個基本的文本遊戲或一個簡單的益智遊戲。隨著你獲得更多經驗，你可以開始構建更複雜的遊戲。

有哪些資源或庫可以幫助使用ReactJS和PHP進行遊戲開發？

是的，有幾個資源和庫可以幫助使用ReactJS和PHP進行遊戲開發。對於ReactJS，像React Game Kit和React Game Engine這樣的庫非常有用。對於PHP，你可能會發現像PHP-SDL或Wyvern這樣的庫很有用。此外，在線還有很多教程、指南和論壇，你可以在那裡學習更多知識並獲得幫助。

我可以使用ReactJS和PHP構建多人遊戲嗎？

是的，你可以使用ReactJS和PHP構建多人遊戲。 ReactJS可以處理用戶界面，而PHP可以管理服務器端邏輯，包括管理玩家會話和跨多個客戶端同步遊戲狀態。

我可以使用ReactJS和PHP構建什麼類型的遊戲？

使用ReactJS和PHP，你可以構建各種各樣的遊戲。這包括簡單的文本遊戲、益智遊戲、平台遊戲、角色扮演遊戲，甚至是多人在線遊戲。可能性是巨大的，限制實際上是你的想像力和技能水平。

如何在一個使用ReactJS和PHP開發的遊戲中處理數據？

在一個使用ReactJS和PHP開發的遊戲中，可以使用服務器端的PHP處理數據。這可以包括玩家數據、遊戲狀態、分數等等。這些數據可以存儲在數據庫中，並且可以使用PHP與這個數據庫進行交互，根據需要檢索和更新數據。

如何在一個使用ReactJS開發的遊戲中處理用戶輸入？

在一個使用ReactJS開發的遊戲中，可以使用React的事件處理系統處理用戶輸入。這可以包括鼠標點擊、鍵盤按鍵和触摸事件。 React的事件處理系統功能強大且靈活，允許你輕鬆控制遊戲如何響應用戶輸入。

以上是與React和PHP的遊戲開發：它們的兼容性如何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！