核心要點(diǎn)

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

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

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

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

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

後端設(shè)置

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

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

來自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);

我決定對(duì)應(yīng)用程序的HTTP和WebSocket部分使用Aerys。這段代碼與Aerys文檔看起來非常不同，但這是因?yàn)槲覍?duì)所需內(nèi)容有很好的了解。

運(yùn)行Aerys應(yīng)用程序的通常過程是使用類似這樣的命令：

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

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

來自loader.php：

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

然後我安裝了我的依賴項(xiàng)。這是來自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)定標(biāo)籤一起安裝。這就是我使用dev-amp_v2分支的原因。

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

然後我開始創(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
  );
};

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

來自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");
  }
}

最後的潤(rùn)色是添加快捷腳本，以啟動(dòng)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
},

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

composer dev

前端設(shè)置

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

我不太想創(chuàng)建一個(gè)全新的構(gòu)建鏈，而且Mix也已被重建為可在非Laravel項(xiàng)目中良好工作。雖然配置和擴(kuò)展相對(duì)容易，但它默認(rèn)情況下更偏向VueJS。

我首先要做的是安裝一些NPM依賴項(xiàng)。來自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來預(yù)處理和捆綁JS和CSS文件。我還需要安裝React和相關(guān)的Babel庫來構(gòu)建jsx文件。最後，我添加了Bootstrap文件，以獲得一些默認(rèn)樣式。

Mix自動(dòng)加載自定義配置文件，所以我添加了以下內(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中的配置相同的配置。我計(jì)劃讓單個(gè)JS和CSS入口點(diǎn)進(jìn)入應(yīng)用程序的各個(gè)部分。

注意：未來版本的Mix將內(nèi)置支持構(gòu)建ReactJS資產(chǎn)。屆時(shí)，可以刪除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);

所有三個(gè)腳本都使用了Webpack變量命令，但它們?cè)诔酥獾牟僮鞣矫嬗兴煌?dev構(gòu)建了JS和CSS文件的調(diào)試版本。 -w開關(guān)啟動(dòng)了Webpack監(jiān)視器（以便可以部分重建捆綁包）。 -p開關(guān)啟用了精簡(jiǎn)的生產(chǎn)版本的捆綁包。

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

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

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

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

我意識(shí)到我可以繼續(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是否會(huì)編譯我的jsx文件，以及我是否可以使用異步mix函數(shù)再次找到它們。事實(shí)證明它有效！

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

使用WebSockets連接

我?guī)缀跻呀?jīng)設(shè)置好了。最後要做的是通過WebSockets連接後端和前端。我發(fā)現(xiàn)這相對(duì)簡(jiǎn)單，使用一個(gè)新類。來自app/Socket/GameSocket.pre：

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

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

……以及對(duì)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ā)送到連接到它的每個(gè)人。來自assets/js/component.jsx：

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

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

我們稍後會(huì)詳細(xì)介紹PHP和WebSockets，別擔(dān)心。

總結(jié)

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

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

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

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

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

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

我可以在ReactJS遊戲中使用PHP進(jìn)行遊戲邏輯嗎？

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

使用ReactJS進(jìn)行遊戲開發(fā)的好處是什麼？

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

使用PHP進(jìn)行遊戲開發(fā)的優(yōu)勢(shì)是什麼？

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

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

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

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

是的，有幾個(gè)資源和庫可以幫助使用ReactJS和PHP進(jìn)行遊戲開發(fā)。對(duì)於ReactJS，像React Game Kit和React Game Engine這樣的庫非常有用。對(duì)於PHP，你可能會(huì)發(fā)現(xiàn)像PHP-SDL或Wyvern這樣的庫很有用。此外，在線還有很多教程、指南和論壇，你可以在那裡學(xué)習(xí)更多知識(shí)並獲得幫助。

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

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

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

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

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

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

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

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

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