Phaser-MVC 是一个基于 Phasor.js 的 MVC 框架，它提供了一种将游戏开发中的业务逻辑、界面和数据分离的方式，使得游戏开发更加方便和有组织。本篇文章将介绍如何使用 Phaser-MVC，包括框架的结构、如何创建 MVC 架构下的游戏，以及一些在实际应用中的用法。
安装和使用
首先，你需要安装最新版本的 Node.js，Node.js 的包管理器 NPM 将会在安装 Node.js 后一同安装。
在终端里输入以下命令即可通过 NPM 安装 Phaser-MVC：
npm install phaser-mvc --save
记得在你的项目中使用该命令时不要遗漏 --save 参数，这样可以将 Phaser-MVC 参数保存到项目的 package.json 文件中，方便以后的管理。
创建 MVC 游戏
Phaser-MVC 的最大特点是使用 MVC 的结构对游戏进行管理，一下我们来了解如何实现一个简单的 MVC 游戏。我们将要创建的是一个简单的贪吃蛇游戏，具体的实现细节可以在 phaser-mvc-examples 中的 snake-demo 示例中进行查看。
配置
在我们开始创建游戏之前，我们需要创建一个非常简单的配置文件以确保我们的游戏可以正确运行。在项目的根目录下创建一个 config.js 文件，并输入以下代码：
-- -------------------- ---- -------
------ ------- -
------ ----
------- ----
---------------- ----------
----- ------------
------- -------
---- -
---------------- ----
-
-这里，我们采用了 ES6 的语法，使用 export 方法来将配置导出，方便在整个应用中的引用。配置文件中 width 和 height 对应着游戏场景的大小，backgroundColor 设置游戏的背景颜色，type 指定了游戏的渲染器类型，parent 制定了游戏渲染的 HTML 元素的 ID，dom.createContainer 为了保证游戏在容器内正确显示。
实现
在我们的游戏中，贪吃蛇和食物都是游戏对象，因此我们需要按照 MVC 的方式来管理它们。首先创建一个名为 Snake.js 的文件，在这个文件中，我们将创建一个 Snake 类来管理贪吃蛇。
-- -------------------- ---- -------
------ ------ ---- --------
------ ---- ---- --------
------ ------- ----- ----- ------- ------------------------ -
----------- ------- -
------------
--------- - ------------------------------- ------------------- -------
--------- - ---------------------- --------------- ------------ --
-------------- - -----------------
---------- - ---
---------------- - ------------- -- --------------- -----
-
------ -- -
----- ---- - --------------------------------------------
-- --------------- -- -------------- --- -------------------- -
-------------- - -----------------
--------------- - -
- ---- -- ----------------- -- -------------- --- ------------------ -
-------------- - -------------------
--------------- - ---
- ---- -- ----------------- -- -------------- --- --------------------- -
-------------- - -------------------
--------------- - ---
- ---- -- ------------------ -- -------------- --- -------------------- -
-------------- - --------------------
--------------- - --
-
----------- -- ------------------------------------------ - ----------- - -----
----------- -- ------------------------------------------ - ----------- - -----
-----------
--------------------------------- - ------------
----------------------------------------------------------- ------------ --------
-
------- -- -
----- - - --------------- --- - - ----------- - --------------------------------- - ----
----- - - --------------- --- - - ----------- - --- - --------------------------------- - ----
-------------------------------- -- --------
-
--- ---------- -- -
------ ------------------------
-
---- -- -
-- ------------ - -- -
----------- - ----------------
-
-- ------------ - ----------------- -
----------- - -
-
-- ------------ - -- -
----------- - -----------------
-
-- ------------ - ------------------ -
----------- - -
-
-
-在这个文件中，我们引入了之前提到的配置文件和 Data.js 文件，它们分别用于取得游戏的配置和一些游戏用到的常量。
Snake 类继承于 Phaser.GameObjects.Group 类，这表示贪吃蛇的运动和身体都将由一个组对象进行管理。在构造函数中，我们创建了一个贪吃蛇的头部，并且添加了一个默认的方向 Data.direction.up，一些速度相关的属性，以及一个用于定时添加身体的调用器。
接下来，我们在类的 update() 函数中来控制蛇的移动。我们通过监听输入对象 Phaser.Input.Keyboard.CursorKeys，检测键盘的输入来实现方向的变化。同时，我们也更新了身体的列表 this.bodyChildren 的位置和方向。当蛇的身体长度增长时，调用 this.addBody() 函数。
addBody() 的函数是用于添加贪吃蛇身体的，将会在适当的时机被调用，用于添加新的身体组件。这些组件是通过 this.scene.add.group() 创建的一个组，并加入到当前实例的组中。
get bodyLength() 函数返回当前身体的长度，而 wrap() 函数则用于检测贪吃蛇是否超出了游戏区域。如果是，函数会将贪吃蛇重新定位于游戏场景范围内。
在同一目录下创建一个名为 Food.js 的文件。这个文件的代码如下：
-- -------------------- ---- -------
------ ------ ---- --------
------ ---- ---- --------
------ ------- ----- ---- ------- ------------------------ -
----------- ------- -- -- -
------------ -- -- -------
-----------------------------
-------------------------------------
------------------------------ - --
-------------------
-----------------
------------------------------ - -- ---------------- - ---------- - ---
------------------------------ - -- ----------------- - ----------- - --
-
-
------ -- -
-- ----------- --- -- -
-----------------
------------------------------ - -- ---------------- - ---------- - ---
------------------------------ - -- ----------------- - ----------- - --
-
---------- - -
-
-
--- -- -
---------- - -
-
-这里我们再次引入了 Data.js 文件，因此需要确保在当前目录下存在这个文件，我们并不需要对其进行修改。
和 Snake.js 中的 Snake 类相似，Food.js 中也是一个继承于 Phaser.GameObjects.Image 类的对象。不同的是，在 constructor() 函数中，我们为食物设定了一个圆形的哈物体以确保其可以和其他物体进行碰撞，而 setOrigin() 函数则将食物对象的初始位置设置在了它的正中心。
update() 函数控制着食物的出现和消失。当食物被吃掉时，它会重新出现，并且使得自己的 alpha(透明度) 值为 0，这样食物就不在游戏场景中可见了。
eat() 函数用于表示食物被吃掉了，这将会使得食物从游戏场景中消失。
控制器
贪吃蛇游戏已经完成，最后我们创建一个控制器来实现和模型的通信和协调。创建一个名为 SnakeController.js 的文件，内容如下：
-- -------------------- ---- -------
------ ------ ---- --------
------ ---- ---- --------
------ ----- ---- ---------
------ ---- ---- --------
------ ------- ----- --------------- ------- ------------ -
----------- -- -
----------------------------------
-
------- -- -
----------------------- ------------------
----------------------- ------------------
----------------------- ------------------
---------------------- -----------------
-
------ -- -
----------------- --- ------ ----- ---- -- ------ - --------- ------- ----- --------- --
---------- - --- -----------
-- ---------------------- -------- ---------
--------- - --- ----------
-
------ -- -
-- -------------------------------------- ----------- -
----------------------
--------------------
---------------
-
-
-这个文件和其他的 Phaser 场景文件并没有什么区别，它也是一个继承于 Phaser.Scene 类的场景对象。我们在 preload() 函数中加载了游戏所需的资源，包括贪吃蛇的头部和身体，食物以及吃下食物的声音等。
在 create() 函数中，我们添加了一个文本提示，然后创建了一个贪吃蛇对象和一个食物对象。
最后，在 update() 函数中，我们检测贪吃蛇和食物是否碰撞，如果它们产生了碰撞，我们就会播放吃下食物的声音，并且将贪吃蛇的身体长度增加一个单位，并且将食物设定为已经被吃掉了。
总结
到此，我们就完成了 MVC 模式下的贪吃蛇游戏。这个例子和其他的 Phasor.js 的项目一样，都可以在 GitHub 上克隆或下载，希望读者掌握了如何使用 Phaser-MVC 进行游戏开发，并且可以将这些技术用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005753a81e8991b448ea47c