Kernpunkte

• Verwenden Sie React und PHP, um Spiele gemeinsam zu entwickeln.
• Der Setup-Prozess der Spieleentwicklung umfasst das Einrichten eines asynchronen PHP-Servers, die Verwendung von Laravel-Mix in Nicht-Laravel-Projekten sowie die Verwendung von Websockets zum Verbinden von Backends und Frontends.
• Aerys -Bibliothek kann in den Teilen HTTP und WebSocket einer Anwendung verwendet werden, die hohe Parallelit?t und Websockets unterstützt.
• Laravel-Mix kann auch bei Nicht-Laravel-Projekten zum Erstellen von ReactJS-Dateien verwendet werden. Er bietet eine einfache M?glichkeit, die Build-Kette zu konfigurieren und zu erweitern.
• Websockets k?nnen zum Verbinden von Backends und Frontends verwendet werden, sodass die Echtzeitkommunikation zwischen Servern und Clients erm?glicht.

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

---

Back-End-Einstellungen

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

Verbinden Sie mit WebSockets

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

… und geringfügige ?nderungen an Webrouting (aus

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

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

):

routes/web.pre

Jetzt kann ich die JS ?ndern, um eine Verbindung zu diesem Websocket herzustellen und die Nachricht an alle, die damit verbunden sind, zu senden. Von

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

Wenn ich ein neues

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

Objekt erstelle, stellt es eine Verbindung zum WebSocket -Server her und fügt einen Ereignish?rer für die neue Nachricht hinzu. Ich habe einige Debugging -Code hinzugefügt - um sicherzustellen, dass er korrekt eine Verbindung herstellt und neue Nachrichten sendet.

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

Wie ist Reactjs und PHP -Kompatibilit?t in der Spielentwicklung?

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.

Kann ich PHP für Spiellogik in ReactJS -Spielen verwenden?

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.

Was sind die Vorteile der Verwendung von ReactJs für die Spieleentwicklung?

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.

Was sind die Vorteile der Verwendung von PHP für die Spielentwicklung?

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.

Wie kann man Spiele mit ReactJs und PHP entwickeln?

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.

Welche Ressourcen oder Bibliotheken gibt es bei der Spieleentwicklung mit ReactJs und PHP?

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.

Kann ich Multiplayer -Spiele mit ReactJs und PHP erstellen?

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.

Welche Art von Spiel kann ich mit ReactJs und PHP bauen?

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.

Wie verarbeitet man Daten in einem Spiel, das mit ReactJs und PHP entwickelt wurde?

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.

Wie verarbeitet man Benutzereingaben in einem Spiel, das mit ReactJs entwickelt wurde?

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.

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!