phaser.min.js_如何使用Phaser 3，Express和Socket.IO构建多人纸牌游戏

phaser.min.js

I'm a tabletop game developer, and am continually looking for ways to digitize game experiences.  In this tutorial, we're going to build a multiplayer card game using Phaser 3, Express, and Socket.IO.

我是桌面游戏开发人员，并且一直在寻找将游戏体验数字化的方法。 在本教程中，我们将使用Phaser 3 ， Express和Socket.IO构建多人纸牌游戏。

In terms of prerequisites, you'll want to make sure that you have Node/NPM and Git installed and configured on your machine.  Some experience with JavaScript would be helpful, and you may want to run through the basic Phaser tutorial before tackling this one.

在先决条件方面，您需要确保在计算机上安装并配置了Node / NPM和Git 。 使用JavaScript的一些经验会有所帮助，您可能需要先解决基本的Phaser教程，然后再解决这一问题。

Major kudos to Scott Westover for his tutorial on the topic, Kal_Torak and the Phaser community for answering all my questions, and my good friend Mike for helping me conceptualize the architecture of this project.

Scott Westover 的主题教程颇为赞誉，Kal_Torak和Phaser社区回答了我所有的问题，我的好朋友Mike则帮助我概念化了该项目的体系结构。

Note: we'll be using assets and colors from my tabletop card game, Entromancy: Hacker Battles.  If you prefer, you can use your own images (or even Phaser rectangles) and colors, and you can access the entire project code on GitHub.

注意：我们将使用桌面纸牌游戏Entromancy：Hacker Battles中的资产和颜色。 如果愿意，可以使用自己的图像(甚至是Phaser矩形 )和颜色，还可以在GitHub上访问整个项目代码。

If you'd prefer a more visual tutorial, you can also follow along with the companion video to this article:

如果您希望使用更直观的教程，则还可以按照本文附带的视频进行操作：

Let's get started!

让我们开始吧！

游戏 (The Game)

Our simple card game will feature a Phaser client that will handle most of the game logic and doing things like dealing cards, providing drag-and-drop functionality, and so on.

我们的简单纸牌游戏将具有一个Phaser客户端，该客户端将处理大多数游戏逻辑并处理诸如发牌，提供拖放功能等操作。

On the back end, we'll spin up an Express server that will utilize Socket.IO to communicate between clients and make it so that when one player plays a card, it shows up in another player's client, and vice-versa.

在后端，我们将启动一个Express服务器，该服务器将使用Socket.IO在客户端之间进行通信，并使它在一个玩家玩纸牌时显示在另一个玩家的客户端中，反之亦然。

Our goal for this project is to create a basic framework for a multiplayer card game that you can build upon and adjust to suit your own game's logic.

该项目的目标是为多人纸牌游戏创建一个基本框架，您可以在该框架上进行构建并进行调整以适应您自己游戏的逻辑。

First, let's tackle the client!

首先，让我们来解决客户！

客户端 (The Client)

To scaffold our client, we're going to clone the semi-official Phaser 3 Webpack Project Template on GitHub.

为了支持我们的客户，我们将在GitHub上克隆半官方的Phaser 3 Webpack项目模板。

Open your favorite command line interface and create a new folder:

打开您喜欢的命令行界面并创建一个新文件夹：

mkdir multiplayer-card-project
cd multiplayer-card-project

Clone the git project:

克隆git项目：

git clone https://github.com/photonstorm/phaser3-project-template.git

This command will download the template in a folder called "phaser3-project-template" within /multiplayer-card-project.  If you want to follow along with our tutorial's file structure, go ahead and change that template folder's name to "client."

此命令会将模板下载到/ multiplayer-card-project内名为“ phaser3-project-template”的文件夹中。 如果要遵循本教程的文件结构，请继续并将该模板文件夹的名称更改为“ client”。

Navigate into that new directory and install all dependencies:

导航到该新目录并安装所有依赖项：

cd client
npm install

Your project folder structure should look something like this:

您的项目文件夹结构应如下所示：

Before we muck with the files, let's go back to our CLI and enter the following command in the /client folder:

在处理文件之前，让我们回到CLI并在/ client文件夹中输入以下命令：

npm start

Our Phaser template utilizes Webpack to spin up a local server that in turn serves up a simple game app in our browser (usually at http://localhost:8080).  Neat!

我们的Phaser模板利用Webpack启动本地服务器，然后在我们的浏览器中提供一个简单的游戏应用程序(通常位于http：// localhost：8080)。 整齐！

Let's open our project in your favorite code editor and make some changes to fit our card game.  Delete everything in /client/src/assets and replace them with the card images from GitHub.

让我们在您最喜欢的代码编辑器中打开我们的项目，并进行一些更改以适合我们的纸牌游戏。 删除/ client / src / assets中的所有内容，并将其替换为GitHub中的卡片图像。

In the /client/src directory, add a folder called "scenes" and another called "helpers."

在/ client / src目录中，添加一个名为“ scenes”的文件夹和另一个名为“ helpers”的文件夹。

In /client/src/scenes, add an empty file called "game.js".

在/ client / src / scenes中，添加一个名为“ game.js”的空文件。

In /client/src/helpers, add three empty files: "card.js", "dealer.js", and "zone.js".

在/ client / src / helpers中，添加三个空文件：“ card.js”，“ dealer.js”和“ zone.js”。

Your project structure should now look like this:

您的项目结构现在应如下所示：

Cool!  Your client might be throwing you errors because we deleted some things, but not to worry.  Open /src/index.js, which is the main entry point to our front end app. Enter the following code:

凉！ 您的客户可能会向您抛出错误，因为我们删除了一些内容，但不必担心。 打开/src/index.js，这是我们前端应用程序的主要入口。 输入以下代码：

import Phaser from "phaser";
import Game from "./scenes/game";

const config = {
    type: Phaser.AUTO,
    parent: "phaser-example",
    width: 1280,
    height: 780,
    scene: [
        Game
    ]
};

const game = new Phaser.Game(config);

All we've done here is restructure the boilerplate to utilize Phaser's "scene" system so that we can separate our game scenes rather than try to cram everything in one file.  Scenes can be useful if you're creating multiple game worlds, building things like instruction screens, or generally trying to keep things tidy.

我们在这里所做的只是重组样板，以利用Phaser的“场景”系统，以便我们可以分隔游戏场景，而不是尝试将所有内容都塞入一个文件中。 如果您要创建多个游戏世界，构建指令屏幕之类的东西，或者通常是试图使事物保持整洁，那么场景会很有用。

Let's move to /src/scenes/game.js and write some code:

让我们转到/src/scenes/game.js并编写一些代码：

export default class Game extends Phaser.Scene {
    constructor() {
        super({