Phaser 是一个流行的 2D 游戏框架，使用 JavaScript 语言编写，让开发者可以轻松地创建 HTML5 游戏。然而，Phaser 创建的游戏默认是在网页上运行，如果你想将 Phaser 游戏打包成桌面应用，如 .exe 文件（用于 Windows 操作系统），可以使用以下方法。本教程将详细介绍使用 Electron 将 Phaser 游戏打包为 exe 文件的过程。
## 工具与原理
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。 实际上，它基于 Chromium 和 Node.js，将你的 Web 应用程序视作一个完整的桌面程序。 结合 Phaser 和 Electron，你可以将你的游戏制作成独立的桌面应用程序。
## 具体步骤
### 1. 安装 Node.js
为了使用 Electron，首先需要安装 Node.js。请前往 https://nodejs.org/ 下载并安装适合自己操作系统的 Node.js 版本。完成后，你将拥有 node 和 npm（Node.js 的包管理器）命令。
### 2. 创建项目文件夹
在计算机上创建一个新文件夹，例如命名为 "phaser-electron"。在文件夹中创建以下结构：
```
/ phaser-electron
|
| -- /src
| |--index.html
| |--game.js
|
|-- package.json
|-- main.js
```
*src* 文件夹将用于存放 Phaser 游戏的源代码 (index.html 和 game.js)。
*package.json* 文件将用于定义项目的元数据和依赖项。
*main.js* 文件将用于配置 Electron。
### 3. 编写游戏源代码
在 *src* 文件夹中，编写 Phaser 游戏的源代码。如有现成的游戏代码，可以直接放进 *src* 文件夹。
### 4. 创建 package.json 文件
在项目根目录下创建一个名为 *package.json* 的文件，并输入以下内容：
```json
{
"name": "phaser-electron",
"version": "1.0.0",
"description": "A Phaser game packaged using Electron",
"main": "main.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"start": "electron ."
}
}
```
这个文件定义了项目的基本信息、入口点（main.js）以及运行项目所需的脚本。
### 5. 安装 Electron
在项目文件夹 *phaser-electron* 中打开命令行或终端，执行以下命令：
```bash
npm install electron --save-dev
```
这将把 Electron 添加到项目的 *devDependencies* 中。
### 6. 创建 main.js 文件
编写 main.js 文件，设置 Electron 应用程序的基本配置。例如：
```js
const { app, BrowserWindow } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile("src/index.html");
}
app.whenReady().then(createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
此文件定义了 Electron 应用程序的创建窗口、窗口大小以及窗口事件等内容。
### 7. 运行游戏
在 *phaser-electron* 文件夹中打开命令行或终端，执行以下命令：
```bash
npm start
```
现在 Electron 中运行的游戏应该已经启动。
### 8. 打包为 exe 文件
为了将游戏打包成 exe 文件，还需要安装另一个库，electron-packager：
```bash
npm install electron-packager -g
```
安装完成之后，运行下面的命令：
```bash
electron-packager ./ phaser-electron --platform=win32 --arch=x64
```
执行完成后，会生成一个名为 *phaser-electron-win32-x64* 的文件夹，其中包含一个包含游戏的 exe 文件。
至此，已成功将 Phaser 游戏打包为一个 .exe 文件。现在你可以将这个文件夹分发给其他 Windows 用户，让他们在自己的电脑上运行游戏。
