如何使用Vue，Phaser，Node，Express和Socket.IO构建多人桌面游戏模拟器

Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor.  

将全栈JavaScript应用程序的所有部分放在一起可能是一项复杂的工作。

In this tutorial, we're going to build a multiplayer tabletop game simulator using Vue, Phaser, Node/Express, and Socket.IO to learn several concepts that will be useful in any full stack app.

在本教程中，我们将使用Vue ， Phaser ， Node / Express和Socket.IO构建一个多人桌面游戏模拟器，以学习在任何全栈应用程序中都有用的几个概念。

You can follow along with this video tutorial as well (1 hour 16 minute watch):

您也可以按照此视频教程进行操作(观看1小时16分钟)：

All of the project files for this tutorial are available on GitHub.

本教程的所有项目文件都可以在GitHub上找到 。

项目概况 (Project Overview)

Our project will feature a Phaser game instance that will allow us to create tokens and cards on screen, and move them around on a digital game board.

我们的项目将包含一个Phaser游戏实例，该实例将使我们能够在屏幕上创建令牌和卡，并在数字游戏板上移动它们。

The Phaser instance will be wrapped in a Vue component that will handle things like multiplayer chat and commands.  Together, Phaser and Vue will comprise our front end (referred to from here on as the "client"), and we'll use Socket.IO to communicate with other players and tie together the front and back ends of our app.

Phaser实例将包装在Vue组件中，该组件将处理多人聊天和命令之类的事情。 Phaser和Vue共同构成了我们的前端(从此处称为“客户端”)，并且我们将使用Socket.IO与其他播放器进行通信，并将应用程序的前端和后端捆绑在一起。

The back end (referred to from here on as the "server") will be a simple Express server that receives Socket.IO events from the client and acts accordingly.  The whole application will run on Node as its runtime.

后端(从此处称为“服务器”)将是一个简单的Express服务器，该服务器从客户端接收Socket.IO事件并采取相应的措施。 整个应用程序将在运行时在Node上运行。

You don't need to be an expert in any of the above frameworks to complete this project, but it would be a good idea to have a solid foundation in basic JavaScript and HTML/CSS before trying to tackle the specifics. You can also follow along with my series on Learning JavaScript by Making Digital Tabletop Games and Web Apps.  

您无需成为上述任何一个框架的专家即可完成此项目，但是在尝试解决具体问题之前，在基本JavaScript和HTML / CSS方面拥有坚实的基础是一个好主意。 您还可以按照我的系列文章“ 通过制作数字桌面游戏和Web应用程序学习JavaScript ”进行学习 。

You'll also want to make sure that you have Node and Git installed, along with your favorite code editor and a command line interface (you can follow my tutorial on setting up an IDE here if you need help).

您还需要确保已安装Node和Git ，以及您喜欢的代码编辑器和命令行界面(如果需要帮助，可以按照我的教程在这里设置IDE)。

Let's get started!

让我们开始吧！

第1部分：客户基础 (Part 1: Client Basics)

We'll begin building our client by installing the Vue CLI, which will help us with some tooling and allow us to make changes to our files without having to reload our web browser.

我们将通过安装Vue CLI开始构建客户端，这将帮助我们提供一些工具，并使我们无需重新加载Web浏览器即可对文件进行更改。

In a command line, type in the following to install the Vue CLI globally:

在命令行中，键入以下内容以全局安装Vue CLI：

npm install -g @vue/cli

Navigate to a desired directory and create a new folder for our project:

导航到所需目录并为我们的项目创建一个新文件夹：

mkdir tabletop-project
cd tabletop-project

Now we can use the Vue CLI to template a front end project for us:

现在，我们可以使用Vue CLI为我们模板化前端项目：

vue create client

You can just hit "enter" at the ensuing prompts unless you have specific preferences.

除非您有特定的首选项，否则您只需在随后的提示中单击“输入”即可。

The Vue CLI has helpfully templated a front end project for us, which we can view in our code editor:

Vue CLI为我们有用地模板化了一个前端项目，我们可以在代码编辑器中查看该项目：

Let's navigate to our new client folder in our CLI and run the template app:

让我们导航到CLI中的新客户端文件夹并运行模板应用程序：

cd client
npm run serve

After a little work, the Vue CLI should begin displaying our app in a web browser at the default http://localhost:8080:

经过一些工作之后，Vue CLI应该开始在默认的http：// localhost：8080的网络浏览器中显示我们的应用程序：

Cool!  We have the basic structure of our client.  Let's break it by creating two new components in the /components folder, called Game.vue and Chat.vue (you can go ahead and delete HelloWorld.vue and anything in the assets folder if you're obsessed with tidiness like I am).

凉！ 我们拥有客户的基本结构。 让我们通过在/ components文件夹中创建两个新组件，即Game.vue和Chat.vue来打破它(您可以继续删除HelloWorld.vue以及Assets文件夹中的任何内容，如果您对像我这样的整洁很着迷)。

Replace the code in App.vue with the following:

用以下代码替换App.vue中的代码：

<template>
    <div id="app">
        <div id="game">
            <Game />
        </div>
        <div id="border" />
        <div id="input">
            <Chat />
        </div>
    </div>
</template>

<script>
    import