Pembangunan permainan dengan React dan PHP: Seberapa serasi mereka?

mata teras

Gunakan React dan PHP untuk bersama-sama membangunkan permainan.
Proses persediaan pembangunan permainan termasuk menubuhkan pelayan PHP yang tidak segerak, menggunakan campuran Laravel dalam projek bukan laravel, dan menggunakan WebSockets untuk menyambungkan backends dan frontends.
Perpustakaan Aerys boleh digunakan di bahagian HTTP dan WebSocket aplikasi, menyokong Concurrency High dan WebSockets.
Campuran Laravel boleh digunakan untuk membina fail ReactJS, walaupun dalam projek bukan laravel, dan ia menyediakan cara mudah untuk mengkonfigurasi dan memperluaskan rantai binaan.
WebSockets boleh digunakan untuk menyambungkan backends dan frontends, yang membolehkan komunikasi masa nyata antara pelayan dan pelanggan.

Saya mula memikirkan perkara ini dari saat saya memutuskan untuk cuba membina permainan dengan PHP dan React. "Saya ingin membuat permainan ekonomi berbilang pemain, sama dengan Stardew Valley, tetapi tanpa kandungan bertarikh dan mempunyai sistem ekonomi yang didorong oleh pemain." sistem tidak tahu.

Saya tidak pasti saya tahu cukup reaksi pengetahuan untuk membenarkan penggunaannya. Maksud saya, antara muka awal saya -saya sangat tertumpu kepada ekonomi pelayan dan permainan -sempurna untuk bertindak balas. Tetapi apa ketika saya mula membuat aspek pertanian/interaktif? Saya suka idea membina antara muka isometrik di sekitar sistem ekonomi.

Saya telah menyaksikan ucapan oleh Dead_Lugosi, yang menggambarkan proses membina permainan zaman pertengahan dengan PHP. Margaret memberi inspirasi kepada saya, dan ucapan itu adalah salah satu sebab mengapa saya menulis sebuah buku mengenai pembangunan permainan JS. Saya bertekad untuk menulis pengalaman saya. Mungkin orang lain juga boleh belajar dari kesilapan saya.

---

(kod untuk bahagian ini boleh didapati di: github.com/assertchris-tutorials/sitepoint-making-games/tree/part-1. Chrome ia diuji

Tetapan back-end

---

Saya mula-mula mencari panduan untuk membina sistem ekonomi berbilang orang. Saya dapati jawatan Stack Overflow yang sangat baik di mana orang menerangkan pelbagai perkara yang perlu dipertimbangkan. Saya sudah separuh jalan sebelum saya menyedari bahawa saya mungkin telah bermula di tempat yang salah. "Pertama: Saya memerlukan pelayan PHP. Saya akan mempunyai sekumpulan pelanggan React, jadi saya mahukan sesuatu yang dapat mengendalikan kesesuaian yang tinggi (dan mungkin juga websocket). Tidak dalam talian Saya mula menubuhkan pelayan PHP yang tidak segerak - untuk mengendalikan konkurensi tinggi dan menyokong WebSockets. Saya menambah kerja baru -baru ini dengan preprocessor PHP untuk membuat perkara lebih jelas dan mencipta titik akhir yang pertama.

dari

:

$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);

Saya memutuskan untuk menggunakan Aerys untuk bahagian HTTP dan WebSocket aplikasi. Kod ini kelihatan sangat berbeza dari dokumentasi Aerys, tetapi itu kerana saya mempunyai pemahaman yang baik tentang apa yang saya perlukan.

Proses biasa menjalankan aplikasi Aerys adalah menggunakan arahan seperti ini:

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

Terdapat banyak kod yang akan diulang, dan ia tidak mengendalikan fakta bahawa saya mahu pra -proses menggunakan PHP. Saya membuat fail loader.

dari loader.php:

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

kemudian saya memasang kebergantungan saya. Ini dari 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"
},

Saya mahu menggunakan amphp/parallel untuk memindahkan kod penyekatan keluar dari pelayan tak segerak, tetapi ia tidak boleh dipasang dengan tag stabil amphp/aerys. Inilah sebabnya saya menggunakan cawangan dev-amp_v2.

Saya fikir ia adalah idea yang baik untuk memasukkan beberapa jenis enjin templat dan pencari perkhidmatan. Saya memilih setiap versi Liga PHP. Akhirnya, saya menambah pre/short-closures, yang digunakan untuk mengendalikan sintaks tersuai dalam config.pre, dan juga penutupan pendek yang saya merancang untuk menggunakan kemudian ...

kemudian saya mula membuat fail penghalaan. Dari routes/web.pre:

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

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

dan dari routes/api.pre:

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

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

Walaupun ia adalah laluan yang mudah, ini membantu saya menguji kod dalam config.pre. Saya memutuskan untuk mempunyai fail penghalaan ini kembali ke penutupan supaya saya dapat lulus mereka yang ditaip $router yang mana mereka boleh menambah laluan mereka sendiri. Akhirnya, saya mencipta dua operasi (serupa).

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

Sentuhan terakhir adalah untuk menambah skrip pintasan untuk memulakan versi pembangunan dan pengeluaran pelayan Aerys.

dari composer.json:

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

selepas semua ini saya boleh memulakan pelayan baru dan mengakses http://127.0.0.1:8080 dengan menaip arahan berikut:

composer dev

Tetapan depan-end

"Baiklah, sekarang saya telah membuat perkara yang agak stabil di sisi php; bagaimana saya membina fail reactjs? Mungkin saya boleh menggunakan campuran Laravel ...?"

Saya tidak benar-benar mahu membuat rantaian binaan baru, dan Mix juga telah dibina semula untuk berfungsi dengan baik dalam projek bukan laravel. Walaupun konfigurasi dan sambungan agak mudah, ia lebih berorientasikan vuejs secara lalai.

Perkara pertama yang perlu saya lakukan ialah memasang beberapa kebergantungan NPM. Dari 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 Menggunakan Webpack ke Preprocess dan Bundle JS dan CSS Files. Saya juga perlu memasang reaksi dan perpustakaan babel yang berkaitan untuk membina fail JSX. Akhirnya, saya menambah fail bootstrap untuk mendapatkan beberapa gaya lalai.

Campurkan secara automatik memuatkan fail konfigurasi tersuai, jadi saya menambah yang berikut. Dari 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()

Saya perlu memberitahu Mix bagaimana untuk mengendalikan fail JSX, jadi saya menambah konfigurasi yang sama seperti yang biasanya diletakkan di .babelrc. Saya merancang untuk mendapatkan satu titik kemasukan JS dan CSS ke pelbagai bahagian aplikasi.

Nota: Versi Mix masa depan akan mendapat sokongan terbina dalam untuk membina aset ReactJS. Pada masa itu, kod mix.webpackConfig boleh dipadamkan.

Sekali lagi, saya membuat beberapa skrip pintasan untuk menjimatkan banyak kerja menaip. Dari 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);

ketiga -tiga skrip menggunakan arahan pembolehubah webpack, tetapi mereka berbeza dalam operasi mereka selain daripada itu. dev Membina versi debug fail JS dan CSS. Suis -w memulakan monitor webpack (supaya bundle boleh dibina semula sebahagiannya). Suis -p membolehkan versi pengeluaran yang diselaraskan dari bundle.

Sejak saya menggunakan kawalan versi dibundel, saya memerlukan cara untuk merujuk fail seperti /js/app.60795d5b3951178abba1.js tanpa mengetahui nilai hash. Saya perhatikan bahawa campuran suka membuat fail nyata, jadi saya membuat fungsi penolong untuk menanyakannya. Dari helpers.pre:

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

Aerys tahu bagaimana untuk mengendalikan janji apabila mereka muncul dalam bentuk $val = yield $promise, jadi saya menggunakan pelaksanaan janji AMP. Selepas membaca dan menyahkod fail, saya dapat mencari laluan fail yang sepadan. Saya menyesuaikan HomeAction. Dari app/Actions/HomeAction.pre:

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

Saya menyedari bahawa saya boleh terus membuat fungsi yang mengembalikan janji dan menggunakannya dengan cara ini untuk memastikan kod tersebut tidak segerak. Ini adalah kod JS saya dari : 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"
},

... dan dari

: assets/js/app.jsx

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

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

Lagipun, saya hanya ingin melihat sama ada Mix akan menyusun fail JSX saya dan jika saya dapat mencari mereka lagi menggunakan fungsi Async

. Ternyata berfungsi! mix

Nota: Menggunakan fungsi setiap kali mahal, terutamanya jika kita memuatkan fail yang sama. Sebaliknya, kita boleh memuatkan semua templat semasa fasa boot pelayan dan merujuknya dari dalam operasi jika diperlukan. Fail konfigurasi yang kita mulakan Aerys boleh mengembalikan janji (seperti yang diberikan kepada kami oleh mix), jadi kami dapat menghuraikan semua templat sebelum pelayan bermula. Amp\all

Sambungkan menggunakan WebSockets

Saya hampir menetapkannya. Perkara terakhir yang perlu dilakukan ialah menyambungkan backend dan frontend melalui WebSockets. Saya dapati ini agak mudah, menggunakan kelas baru. Dari

: app/Socket/GameSocket.pre

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

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

... dan pengubahsuaian kecil ke routing web (dari

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

Sekarang saya boleh menukar JS untuk menyambung ke WebSocket ini dan menghantar mesej kepada semua orang yang disambungkan kepadanya. Dari

: assets/js/component.jsx

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

Apabila saya membuat objek

baru, ia menghubungkan ke pelayan WebSocket dan menambah pendengar acara untuk mesej baru. Saya menambah beberapa kod debugging - untuk memastikan ia menghubungkan dengan betul dan menghantar mesej baru. Component

Kami akan lebih terperinci mengenai PHP dan WebSockets kemudian, jangan risau.

Ringkasan

Dalam bahagian ini, kami melihat cara menyediakan pelayan web PHP yang tidak segerak, cara menggunakan campuran Laravel dalam projek bukan laravel, dan juga cara menyambungkan backend dan frontend bersama-sama menggunakan WebSockets.

wow! Ia meliputi banyak kandungan dan kami belum menulis satu baris kod permainan. Sertai saya di bahagian kedua dan kami akan mula membina antara muka logik permainan dan React.

(artikel ini dikaji semula oleh Niklas Keller. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan Sitepoint untuk yang terbaik!)

FAQ untuk pembangunan permainan dengan reactjs dan php

Bagaimana reaksi dan keserasian PHP dalam pembangunan permainan?

ReactJs dan PHP sangat serasi dalam pembangunan permainan. ReactJS adalah perpustakaan JavaScript yang sesuai untuk membina antara muka pengguna, terutamanya untuk aplikasi satu halaman. Ia membolehkan reka bentuk web yang cepat dan responsif. Sebaliknya, PHP adalah bahasa skrip sisi pelayan yang sangat sesuai untuk pembangunan back-end. Ia boleh mengendalikan pangkalan data, pengesahan pengguna, dan logik sisi pelayan. Apabila digunakan bersama-sama, ReactJs boleh mengendalikan bahagian depan, membuat antara muka pengguna yang dinamik dan interaktif, sementara PHP menguruskan back-end.

Bolehkah saya menggunakan php untuk logik permainan dalam permainan reaksi?

Ya, anda boleh menggunakan PHP untuk logik permainan dalam permainan ReactJS. Walaupun ReactJs mengendalikan antara muka pengguna, PHP boleh menguruskan logik permainan di sisi pelayan. Ini termasuk data pemprosesan, menguruskan sesi pengguna, dan mengawal peraturan permainan. Pemisahan kebimbangan ini membolehkan proses pembangunan yang lebih teratur dan cekap.

Apakah faedah menggunakan ReactJs untuk pembangunan permainan?

ReactJS menyediakan banyak manfaat untuk pembangunan permainan. DOM maya membolehkan kemas kini yang cekap dan rendering, menjadikan permainan berjalan lancar. Ia juga menyokong komponen yang boleh diguna semula, yang boleh mempercepatkan masa pembangunan. Di samping itu, ReactJS mempunyai komuniti yang besar dan sumber yang kaya untuk memudahkan mencari penyelesaian kepada masalah atau mempelajari teknologi baru.

Apakah kelebihan menggunakan PHP untuk pembangunan permainan?

PHP mempunyai banyak kelebihan dalam pembangunan permainan. Ia adalah bahasa sisi pelayan, yang bermaksud ia boleh mengendalikan pengurusan data, pengesahan pengguna, dan logik permainan sisi pelayan. PHP juga mudah dipelajari, mempunyai sintaks mudah, dan mempunyai komuniti pemaju yang besar. Ia juga sangat berskala, menjadikannya sesuai untuk permainan yang mungkin memerlukan mengendalikan sejumlah besar pengguna.

Bagaimana untuk memulakan permainan dengan ReactJs dan PHP?

Untuk mula membangunkan permainan dengan ReactJs dan PHP, anda perlu mempelajari asas -asas kedua -dua bahasa. Terdapat banyak sumber dan tutorial dalam talian yang ada. Sebaik sahaja anda sudah biasa dengan bahasa -bahasa ini, anda boleh mulakan dengan membina permainan yang mudah. Ini boleh menjadi permainan teks asas atau permainan teka -teki mudah. Apabila anda mendapat lebih banyak pengalaman, anda boleh mula membina permainan yang lebih kompleks.

Apakah sumber atau perpustakaan yang ada untuk membantu pembangunan permainan menggunakan ReactJs dan PHP?

Ya, terdapat beberapa sumber dan perpustakaan yang dapat membantu pembangunan permainan menggunakan ReactJs dan PHP. Untuk ReactJs, perpustakaan seperti Kit Permainan React dan React Game Engine sangat berguna. Untuk PHP, anda boleh menemui perpustakaan seperti PHP-SDL atau Wyvern yang berguna. Di samping itu, terdapat banyak tutorial, panduan dan forum dalam talian di mana anda boleh mengetahui lebih lanjut dan mendapatkan bantuan.

Bolehkah saya membina permainan multiplayer menggunakan ReactJs dan PHP?

Ya, anda boleh membina permainan multiplayer menggunakan ReactJs dan PHP. ReactJS boleh mengendalikan antara muka pengguna, manakala PHP boleh menguruskan logik sisi pelayan, termasuk menguruskan sesi pemain dan menyegerakkan keadaan permainan di beberapa pelanggan.

Jenis permainan apa yang boleh saya bina menggunakan ReactJs dan PHP?

Dengan ReactJs dan PHP, anda boleh membina pelbagai permainan. Ini termasuk permainan teks mudah, permainan teka-teki, permainan platform, permainan peranan, dan juga permainan dalam talian berbilang pemain. Kemungkinan besar, dan hadnya sebenarnya adalah imaginasi dan tahap kemahiran anda.

Bagaimana memproses data dalam permainan yang dibangunkan menggunakan ReactJs dan PHP?

Dalam permainan yang dibangunkan menggunakan ReactJs dan PHP, PHP sisi pelayan boleh digunakan untuk memproses data. Ini termasuk data pemain, status permainan, skor, dan sebagainya. Data ini boleh disimpan dalam pangkalan data dan boleh berinteraksi dengan pangkalan data ini menggunakan PHP untuk mengambil dan mengemas kini data yang diperlukan.

Bagaimana memproses input pengguna dalam permainan yang dibangunkan menggunakan ReactJs?

Dalam permainan yang dibangunkan menggunakan ReactJs, input pengguna boleh diproses menggunakan sistem pemprosesan acara React. Ini termasuk klik tetikus, kekunci papan kekunci, dan acara sentuh. Sistem pemprosesan acara React adalah kuat dan fleksibel, membolehkan anda dengan mudah mengawal bagaimana permainan bertindak balas terhadap input pengguna.

Atas ialah kandungan terperinci Pembangunan permainan dengan React dan PHP: Seberapa serasi mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!