mata teras
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.
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"
},: assets/js/app.jsx
use Aerys\Router;
use App\Action\HomeAction;
return (Router $router) => {
$router->route(
"GET", "/", new HomeAction
);
};. 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
);
};): 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");
}
}: assets/js/component.jsx
"scripts": {
"dev": "vendor/bin/aerys -d -c loader.php",
"prod": "vendor/bin/aerys -c loader.php"
},
"config": {
"process-timeout": 0
}, 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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
