核心要點

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

我從決定嘗試使用PHP和React構(gòu)建游戲的那一刻起，就開始思考這個問題。“我想制作一個多人經(jīng)濟類游戲，類似于《星露谷物語》，但沒有交友方面的內(nèi)容，并且擁有玩家驅(qū)動的經(jīng)濟系統(tǒng)。” 問題是，我對多人游戲的動態(tài)性，或者如何思考和實現(xiàn)基于玩家的經(jīng)濟系統(tǒng)一無所知。

我甚至不確定自己是否了解足夠的React知識來證明使用它的合理性。我的意思是，我最初的界面——我非常關(guān)注服務(wù)器和游戲的經(jīng)濟方面——非常適合React。但是當我開始制作耕作/互動方面的內(nèi)容時呢？我喜歡圍繞經(jīng)濟系統(tǒng)構(gòu)建等距界面的想法。

我曾經(jīng)觀看過dead_lugosi的演講，她描述了用PHP構(gòu)建中世紀游戲的過程。Margaret激勵了我，那次演講是我寫一本關(guān)于JS游戲開發(fā)書籍的原因之一。我決心要寫下我的經(jīng)驗。也許其他人也可以從我的錯誤中學習。

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

后端設(shè)置

我首先搜索的是關(guān)于構(gòu)建多人經(jīng)濟系統(tǒng)的指導。我找到一個優(yōu)秀的Stack Overflow帖子，其中人們解釋了需要考慮的各種事情。在我意識到我可能從錯誤的地方開始之前，我已經(jīng)看了一半了?！笆紫龋何倚枰粋€PHP服務(wù)器。我將有一堆React客戶端，所以我想要一個能夠處理高并發(fā)（甚至可能是WebSockets）的東西。它需要是持久性的：即使玩家不在線，事情也必須發(fā)生?！?/p>

我開始設(shè)置一個異步PHP服務(wù)器——來處理高并發(fā)并支持WebSockets。我添加了我最近使用PHP預處理器的工作，使事情更清晰，并創(chuàng)建了前幾個端點。

來自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文檔看起來非常不同，但這是因為我對所需內(nèi)容有很好的了解。

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

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

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

來自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將阻塞代碼從異步服務(wù)器中移出，但它無法與amphp/aerys的穩(wěn)定標簽一起安裝。這就是我使用dev-amp_v2分支的原因。

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

然后我開始創(chuàng)建路由文件。來自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，它們可以向其中添加自己的路由。最后，我創(chuàng)建了兩個（類似的）操作。

來自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服務(wù)器的開發(fā)和生產(chǎn)版本。

來自composer.json：

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

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

composer dev

前端設(shè)置

“好的，既然我已經(jīng)讓PHP方面的事情相對穩(wěn)定了；我該如何構(gòu)建ReactJS文件呢？也許我可以使用Laravel Mix……？”

我不太想創(chuàng)建一個全新的構(gòu)建鏈，而且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和相關(guān)的Babel庫來構(gòu)建jsx文件。最后，我添加了Bootstrap文件，以獲得一些默認樣式。

Mix自動加載自定義配置文件，所以我添加了以下內(nèi)容。來自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將內(nèi)置支持構(gòu)建ReactJS資產(chǎn)。屆時，可以刪除mix.webpackConfig代碼。

再一次，我創(chuàng)建了一些快捷腳本，以節(jié)省大量的打字工作。來自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構(gòu)建了JS和CSS文件的調(diào)試版本。-w開關(guān)啟動了Webpack監(jiān)視器（以便可以部分重建捆綁包）。-p開關(guān)啟用了精簡的生產(chǎn)版本的捆綁包。

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

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

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

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

我意識到我可以繼續(xù)創(chuàng)建返回promise的函數(shù)，并以這種方式使用它們來保持代碼的異步性。這是我的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函數(shù)再次找到它們。事實證明它有效！

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

使用WebSockets連接

我?guī)缀跻呀?jīng)設(shè)置好了。最后要做的是通過WebSockets連接后端和前端。我發(fā)現(xiàn)這相對簡單，使用一個新類。來自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");
  }
}

現(xiàn)在，我可以更改JS以連接到此WebSocket，并將消息發(fā)送到連接到它的每個人。來自assets/js/component.jsx：

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

當我創(chuàng)建一個新的Component對象時，它將連接到WebSocket服務(wù)器，并為新消息添加一個事件監(jiān)聽器。我添加了一些調(diào)試代碼——以確保它能夠正確連接，并發(fā)送新的消息。

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

總結(jié)

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

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

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

使用ReactJS和PHP進行游戲開發(fā)的常見問題解答（FAQ）

ReactJS和PHP在游戲開發(fā)中的兼容性如何？

ReactJS和PHP在游戲開發(fā)中具有高度的兼容性。ReactJS是一個JavaScript庫，非常適合構(gòu)建用戶界面，尤其適用于單頁應用程序。它允許快速、響應迅速的網(wǎng)頁設(shè)計。另一方面，PHP是一種服務(wù)器端腳本語言，非常適合后端開發(fā)。它可以處理數(shù)據(jù)庫、用戶身份驗證和服務(wù)器端邏輯。當一起使用時，ReactJS可以處理前端，創(chuàng)建動態(tài)且交互式用戶界面，而PHP則管理后端。

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

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

使用ReactJS進行游戲開發(fā)的好處是什么？

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

使用PHP進行游戲開發(fā)的優(yōu)勢是什么？

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

如何開始使用ReactJS和PHP開發(fā)游戲？

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

有哪些資源或庫可以幫助使用ReactJS和PHP進行游戲開發(fā)？

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

我可以使用ReactJS和PHP構(gòu)建多人游戲嗎？

是的，你可以使用ReactJS和PHP構(gòu)建多人游戲。ReactJS可以處理用戶界面，而PHP可以管理服務(wù)器端邏輯，包括管理玩家會話和跨多個客戶端同步游戲狀態(tài)。

我可以使用ReactJS和PHP構(gòu)建什么類型的游戲？

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

如何在一個使用ReactJS和PHP開發(fā)的游戲中處理數(shù)據(jù)？

在一個使用ReactJS和PHP開發(fā)的游戲中，可以使用服務(wù)器端的PHP處理數(shù)據(jù)。這可以包括玩家數(shù)據(jù)、游戲狀態(tài)、分數(shù)等等。這些數(shù)據(jù)可以存儲在數(shù)據(jù)庫中，并且可以使用PHP與這個數(shù)據(jù)庫進行交互，根據(jù)需要檢索和更新數(shù)據(jù)。

如何在一個使用ReactJS開發(fā)的游戲中處理用戶輸入？

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

以上是與React和PHP的游戲開發(fā)：它們的兼容性如何？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！