Kernpunkte
Ich habe von dem Moment an, als ich beschloss, ein Spiel mit PHP und zu reagieren, darüber nachzudenken. "Ich möchte ein Multiplayer-Wirtschaftsspiel erstellen, ähnlich wie bei Stredew Valley, ohne Inhalte zu treffen und ein playergetriebenes Wirtschaftssystem zu haben." System ist unwissend.
Ich bin mir nicht einmal sicher, ob ich genug reagieren kann, um es zu rechtfertigen. Ich meine, meine anfängliche Schnittstelle - ich habe mich sehr auf die Wirtschaftlichkeit von Servern und Spielen konzentriert - ist perfekt für React. Aber was, wenn ich anfange, den landwirtschaftlichen/interaktiven Aspekt der Dinge zu machen? Ich mag die Idee, isometrische Schnittstellen rund um Wirtschaftssysteme aufzubauen.
Ich habe eine Rede von Dead_lugosi gesehen, die den Prozess des Aufbaus eines mittelalterlichen Spiels mit PHP beschrieb. Margaret hat mich inspiriert, und diese Rede war einer der Gründe, warum ich ein Buch über JS -Spielentwicklung geschrieben habe. Ich bin entschlossen, meine Erfahrungen aufzuschreiben. Vielleicht können andere auch aus meinen Fehlern lernen.
(Der Code für diesen Teil finden Sie unter: github.com/assertchris-tutorials/sitepoint-making-names/tree/Part-1. Ich habe ihn in PHP 7.1 und die neueste Version von Google abgestimmt Chrom wurde es getestet
Ich habe zuerst nach Anleitungen zum Aufbau eines mehrpersonen Wirtschaftssystems gesucht. Ich fand einen ausgezeichneten Stapel -Überlaufbeitrag, in dem die Leute verschiedene Dinge erklären, die zu berücksichtigen sind. Ich war auf halbem Weg, bevor mir klar wurde, dass ich vielleicht am falschen Ort angefangen hätte. "Erstens: Ich brauche einen PHP -Server. Ich habe eine Reihe von React -Clients, also möchte ich etwas, das mit hoher Parallelität (und vielleicht sogar Websockets) umgehen kann. Es muss anhaltend sein: Dinge müssen sein, auch wenn der Spieler ist nicht online
Ich habe angefangen, einen asynchronen PHP -Server einzurichten - um eine hohe Parallelität zu verarbeiten und Websockets zu unterstützen. Ich fügte meine kürzliche Arbeit mit PHP -Präprozessor hinzu, um die Dinge klarer zu machen, und erstellte die ersten Endpunkte.von
:
$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);Ich habe beschlossen, Aerys für die HTTP- und WebSocket -Teile der Anwendung zu verwenden. Dieser Code sieht ganz anders aus als die Aerys -Dokumentation, aber das liegt daran, dass ich ein gutes Verständnis dafür habe, was ich brauche.
Der übliche Prozess des Ausführens einer Aerys -Anwendung besteht darin, einen Befehl wie diesen zu verwenden:
vendor/bin/aerys -d -c config.php
Es gibt viel Code zu wiederholen, und es wird nicht mit der Tatsache handhaben, dass ich mit PHP vorbereiten möchte. Ich habe eine Loader -Datei erstellt.
von loader.php:
return Pre\processAndRequire(__DIR__ . "/config.pre");
Dann habe ich meine Abhängigkeiten installiert. Dies ist von 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"
}, Ich möchte amphp/parallel verwenden, um den Blockierungscode aus dem asynchronen Server zu verschieben, aber er kann nicht mit dem stabilen Tag von amphp/aerys installiert werden. Deshalb benutze ich den dev-amp_v2 -Ast.
Ich denke, es ist eine gute Idee, eine Art Template -Engine und Service -Locator aufzunehmen. Ich habe jede Version der PHP League ausgewählt. Schließlich habe ich pre/short-closures hinzugefügt, die sowohl zum Umgang mit der benutzerdefinierten Syntax in config.pre als auch zu den kurzen Schließungen verwendet wird, die ich später verwenden möchte ...
Dann habe ich angefangen, die Routing -Datei zu erstellen. Von routes/web.pre:
use Aerys\Router;
use App\Action\HomeAction;
return (Router $router) => {
$router->route(
"GET", "/", new HomeAction
);
}; und von routes/api.pre:
use Aerys\Router;
use App\Action\Api\HomeAction;
return (Router $router) => {
$router->route(
"GET", "/api", new HomeAction
);
}; Obwohl es sich um eine einfache Route handelt, hilft mir dies, den Code in config.pre zu testen. Ich habe beschlossen, dass diese Routing -Dateien zu Schließungen zurückkehren, damit ich ihnen einen typisierten $router übergeben konnte, zu dem sie ihre eigenen Routen hinzufügen können. Schließlich habe ich zwei (ähnliche) Operationen erstellt.
von 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");
}
}Die letzte Note besteht darin, Verknüpfungsskripte hinzuzufügen, um die Entwicklungs- und Produktionsversion des Aerys -Servers zu starten.
von composer.json:
"scripts": {
"dev": "vendor/bin/aerys -d -c loader.php",
"prod": "vendor/bin/aerys -c loader.php"
},
"config": {
"process-timeout": 0
},Nach all dem kann ich einen neuen Server starten und auf http://127.0.0.1:8080 zugreifen, indem ich den folgenden Befehl eingreift:
composer dev
Front-End-Einstellungen
"Okay, jetzt, wo ich die Dinge auf der PHP -Seite relativ stabil gemacht habe; wie erstelle ich eine Reactjs -Datei? Vielleicht kann ich Laravel Mix verwenden ...?"
Ich möchte nicht wirklich eine brandneue Build-Kette erstellen, und Mix wurde auch umgebaut, um in Nicht-Laravel-Projekten gut zu arbeiten. Während Konfiguration und Erweiterungen relativ einfach sind, ist sie standardmäßig mehr VueJS-orientiert.
Das erste, was ich tun muss, ist einige NPM -Abhängigkeiten zu installieren. Von 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 verwendet Webpack, um JS- und CSS -Dateien vorzuprobieren und zu bündeln. Ich muss auch React und verwandte Babel -Bibliotheken installieren, um JSX -Dateien zu erstellen. Schließlich habe ich die Bootstrap -Datei hinzugefügt, um einige Standardstile zu erhalten.
lädt automatisch benutzerdefinierte Konfigurationsdateien, sodass ich Folgendes hinzugefügt habe. Von 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() Ich muss mit Mix mitteilen, wie Sie JSX -Dateien verarbeiten, daher habe ich dieselbe Konfiguration wie diejenigen hinzugefügt, die normalerweise in .babelrc platziert sind. Ich habe vor, einen einzelnen JS- und CSS -Einstiegspunkt in verschiedene Teile der Anwendung zu erhalten.
Hinweis: Zukünftige Versionen von Mix haben integrierte Unterstützung für den Bau von ReactJs-Vermögenswerten. Zu diesem Zeitpunkt kann der Code mix.webpackConfig gelöscht werden.
Ich habe noch einmal einige Verknüpfungsskripte erstellt, um eine Menge Tipparbeiten zu speichern. Von 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); Alle drei Skripte verwenden Webpack -Variablenbefehle, unterscheiden sich jedoch in ihren Operationen. dev Erstellen Sie Debug -Versionen von JS- und CSS -Dateien. Der -w Switch startet den Webpack -Monitor (damit das Bundle teilweise umgebaut werden kann). Der -p Switch ermöglicht eine optimierte Produktionsversion des Bundle.
Da ich eine gebündelte Versionskontrolle verwende, muss ich eine Möglichkeit, eine Datei wie /js/app.60795d5b3951178abba1.js zu verweisen, ohne den Hash -Wert zu kennen. Mir ist aufgefallen, dass Mix Manifestdateien erstellt, also habe ich eine Helferfunktion erstellt, um sie abzufragen. Von helpers.pre:
vendor/bin/aerys -d -c config.php
aerys weiß, wie man Versprechungen umgeht, wenn sie in Form von $val = yield $promise erscheinen. Deshalb habe ich die Implementierung von AMPs Versprechen verwendet. Nachdem ich die Datei gelesen und dekodiert habe, kann ich den passenden Dateipfad finden. Ich habe HomeAction angepasst. Von app/Actions/HomeAction.pre:
return Pre\processAndRequire(__DIR__ . "/config.pre");
Ich habe festgestellt, dass ich weiterhin Funktionen erstellen konnte, die Versprechen zurückgeben, und sie auf diese Weise verwenden, um den Code asynchron zu halten. Dies ist mein JS -Code von 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"
},… und aus assets/js/app.jsx:
use Aerys\Router;
use App\Action\HomeAction;
return (Router $router) => {
$router->route(
"GET", "/", new HomeAction
);
}; schließlich möchte ich nur sehen, ob Mix meine JSX -Dateien kompiliert und ob ich sie mit der asynchronisierten Funktion erneut finden kann. Es stellt sich heraus, dass es funktioniert! mix
Hinweis: Die Verwendung der Funktion jedes Mal ist teuer, insbesondere wenn wir dieselbe Datei laden. Stattdessen können wir alle Vorlagen während der Server -Boot -Phase laden und sie bei Bedarf aus dem Betrieb verweisen. Die Konfigurationsdatei, die Aerys starten, kann ein Versprechen zurückgeben (z. mix Amp\all
Ich habe es fast eingerichtet. Das Letzte ist, das Backend und Frontend über WebSockets zu verbinden. Ich fand dies relativ einfach mit einer neuen Klasse. Von
:
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
},
Component wir werden später auf PHP und Websockets detaillierter eingehen, mach dir keine Sorgen.
Zusammenfassung
In diesem Abschnitt haben wir uns angesehen, wie ein einfacher asynchroner PHP-Webserver eingerichtet wird, wie man Laravel-Mix in Nicht-Laravel-Projekten verwendet und sogar wie das Backend und Frontend mithilfe von Websockets miteinander verbindet. wow! Es deckt viele Inhalte ab und wir haben noch keine Reihe von Spielcode geschrieben. Machen Sie sich mir im zweiten Teil mit und wir werden die Spiellogik erstellen und reagieren. (Dieser Artikel wurde von Niklas Keller geprüft. Dank aller Peer -Rezensenten von Sitepoint, um den Inhalt von SitePoint für das Beste zu bringen!) FAQ für die Spielentwicklung mit ReactJs und PHP reactjs und PHP sind in der Spielentwicklung sehr kompatibel. ReactJS ist eine JavaScript-Bibliothek, die ideal zum Erstellen von Benutzeroberflächen ist, insbesondere für einseitige Anwendungen. Es ermöglicht schnelles und reaktionsschnelles Webdesign. Andererseits ist PHP eine serverseitige Skriptsprache, die für die Back-End-Entwicklung sehr geeignet ist. Es kann Datenbank, Benutzerauthentifizierung und serverseitige Logik verarbeiten. ReactJs kann zusammen mit dem Front-End verarbeiten, dynamische und interaktive Benutzeroberflächen erstellen, während PHP das Back-End verwaltet. Ja, Sie können PHP für die Spiellogik in Reactjs -Spielen verwenden. Obwohl ReactJS die Benutzeroberfläche übernimmt, kann PHP die Spiellogik auf der Serverseite verwalten. Dies beinhaltet die Verarbeitung von Daten, die Verwaltung von Benutzersitzungen und die Steuerung der Spielregeln. Diese Trennung von Bedenken ermöglicht einen geordneten und effizienteren Entwicklungsprozess. reactjs bietet viele Vorteile für die Spielentwicklung. Sein virtuelles DOM ermöglicht effiziente Updates und Rendering, wodurch das Spiel glatter ist. Es unterstützt auch wiederverwendbare Komponenten, die die Entwicklungszeit erheblich beschleunigen können. Darüber hinaus verfügt ReactJS über eine große Gemeinschaft und eine reichhaltige Ressourcen, um Lösungen für Probleme zu finden oder neue Technologien zu lernen. PHP hat viele Vorteile in der Spielentwicklung. Es handelt sich um eine serverseitige Sprache, was bedeutet, dass die Datenverwaltung, die Benutzerauthentifizierung und die serverseitige Spiellogik verarbeitet werden kann. PHP ist auch leicht zu lernen, hat eine einfache Syntax und eine riesige Entwicklergemeinschaft. Es ist auch sehr skalierbar, was es für Spiele geeignet ist, für die möglicherweise eine große Anzahl von Benutzern behandelt wird. Um Spiele mit ReactJs und PHP zu entwickeln, müssen Sie zunächst die Grundlagen beider Sprachen lernen. Es stehen viele Online -Ressourcen und Tutorials zur Verfügung. Sobald Sie mit diesen Sprachen vertraut sind, können Sie zunächst ein einfaches Spiel erstellen. Dies kann ein grundlegendes Textspiel oder ein einfaches Puzzlespiel sein. Wenn Sie mehr Erfahrung sammeln, können Sie komplexere Spiele aufbauen. Ja, es gibt mehrere Ressourcen und Bibliotheken, die mit ReactJs und PHP bei der Spielentwicklung helfen können. Für ReactJs sind Bibliotheken wie React Game Kit und React Game Engine sehr nützlich. Für PHP finden Sie möglicherweise Bibliotheken wie PHP-SDL oder Wyvern nützlich. Darüber hinaus gibt es viele Tutorials, Führer und Foren online, in denen Sie mehr erfahren und Hilfe erhalten können. Ja, Sie können Multiplayer -Spiele mit ReactJs und PHP erstellen. ReactJs können Benutzeroberflächen verarbeiten, während PHP die serverseitige Logik verwalten kann, einschließlich der Verwaltung von Player-Sitzungen und der Synchronisierung des Spielstatus über mehrere Clients hinweg. Mit ReactJs und PHP können Sie eine Vielzahl von Spielen erstellen. Dies beinhaltet einfache Textspiele, Puzzlespiele, Plattformspiele, Rollenspiele und sogar Multiplayer-Online-Spiele. Die Möglichkeiten sind enorm und die Grenze ist eigentlich Ihre Vorstellungskraft und Ihre Fähigkeiten. In einem Spiel, das mit ReactJs und PHP entwickelt wurde, kann der serverseitige PHP zum Verarbeiten von Daten verwendet werden. Dies kann Spielerdaten, Spielstatus, Punktzahlen usw. umfassen. Diese Daten können in einer Datenbank gespeichert und mit dieser Datenbank mithilfe von PHP interagiert werden, um die Daten nach Bedarf abzurufen und zu aktualisieren. In einem mit ReactJS entwickelten Spiel kann die Benutzereingabe mithilfe von React's Ereignisverarbeitungssystem verarbeitet werden. Dies kann Mausklicks, Tastaturtasten und Berührungsereignisse umfassen. Das Ereignisverarbeitungssystem von React ist leistungsstark und flexibel, sodass Sie leicht steuern können, wie das Spiel auf Benutzereingaben reagiert. Wie ist Reactjs und PHP -Kompatibilität in der Spielentwicklung?
Kann ich PHP für Spiellogik in ReactJS -Spielen verwenden?
Was sind die Vorteile der Verwendung von ReactJs für die Spieleentwicklung?
Was sind die Vorteile der Verwendung von PHP für die Spielentwicklung?
Wie kann man Spiele mit ReactJs und PHP entwickeln?
Welche Ressourcen oder Bibliotheken gibt es bei der Spieleentwicklung mit ReactJs und PHP?
Kann ich Multiplayer -Spiele mit ReactJs und PHP erstellen?
Welche Art von Spiel kann ich mit ReactJs und PHP bauen?
Wie verarbeitet man Daten in einem Spiel, das mit ReactJs und PHP entwickelt wurde?
Wie verarbeitet man Benutzereingaben in einem Spiel, das mit ReactJs entwickelt wurde?
Das obige ist der detaillierte Inhalt vonSpielentwicklung mit React und PHP: Wie kompatibel sind sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Einführung in Tastenkombinationen zum Minimieren von Windows-Fenstern
Wie man den Douyin-Moment mit engen Freunden zum Leuchten bringt
So verwenden Sie die datediff-Funktion
So summieren Sie dreidimensionale Arrays in PHP
So richten Sie die Antiblockierfunktion von WeChat ein
Der Edge-Browser kann nicht suchen
JavaScript-Escape-Zeichen
So verwenden Sie die Rundungsfunktion
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
