使用 Phaser 制作视频游戏

交换流行音乐

上周，我接到一个任务，要为一个班级项目创建一个单页应用程序，使用 JavaScript 前端和 Rails 后端。在思考了一番究竟能做什么之后，我决定尝试开发一款电子游戏。从我记事起，我就一直在玩电子游戏，无论是网站上的简单 Flash 游戏，还是特定主机上的大型游戏。我一直想了解这些游戏是如何制作的，但长期以来却一无所知。现在我已经积累了几个月的编程经验，我觉得是时候探索一下电子游戏开发了。

什么是 Phaser？

在研究如何使用 Javascript 实际创建视频游戏时，我发现有很多方法可以做到这一点。其中一种更流行的方法是使用 Javascript 中提供的画布作为游戏本身的窗口。我还了解到，编写代码来处理游戏物理方面的整个过程非常繁琐且相当困难，尤其是在一周内完成。这时，我的一位同学建议使用 Phaser 来减轻我在整个过程中的负担。Phaser 是一个免费的开源框架，它使用 Javascript，专门用于视频游戏开发。它以数据为导向，为用户提供完整的身体物理系统，这样他们就不必自己编写该部分代码。它还附带创建功能性游戏所需的基本元素，例如输入控制和动画图像（无论它们是静态的还是动态的）的机制。

概念化

启动这个项目之前，我首先需要构思游戏的主题和功能。有些人可能知道，在没有网络连接的情况下，Google Chrome 浏览器上有一个隐藏游戏。这是一个无限滚动的游戏，玩家控制一只恐龙，躲避障碍物，存活时间越长，得分就越高。我决定沿用这个概念，制作我自己的版本，名为“恐龙冲刺”。作为一个单页应用，我希望用户能够在首次访问网站时输入自己的姓名，之后进入游戏界面，并在完成后将分数保存到表格中。

前端

前端包含一个 index.html 文件，用于渲染用户输入姓名的初始页面。它还包含整个游戏的所有 JavaScript 文件。我决定将游戏内容组织成三个关键文件：title.js、game.js 和 main.js。

标题.js

首先从 title.js 开始，顾名思义，这个文件负责游戏的开场场景。它渲染一个播放按钮，按下按钮后会进入 game.js 中的下一个场景。

游戏.js

game.js 中包含了游戏实际运行所需的核心代码。该文件中的代码由 Phaser 提供，分为三个组件：预加载、创建和更新，它们在初始化时会按此顺序运行。预加载部分负责加载游戏所需的所有资源，包括图像、精灵图集和声音等。

创建组件是实际渲染和显示已加载资源的地方。游戏背后的逻辑也在这里进行编程，例如玩家应该从哪个位置开始，哪些物体应该能够相互碰撞，或者某些物体碰撞时会触发什么事件。接下来，更新组件包含游戏的功能。玩家触发的操作将触发与该操作相关的事件并进行更新。此功能最常见的示例是，如果玩家按下向右箭头键，该操作将触发一个事件，将角色的位置向右更新。为此事件添加动画将使位置更新更加无缝衔接。

#Preload
this.load.spritesheet('doux', 'assets/sprites/doux.png', {frameWidth: 23.8, frameHeight: 17})
#Create
this.player = this.physics.add.sprite(100, 450, 'doux')
#Update
let cursors = this.input.keyboard.createCursorKeys()
    this.player.anims.play('run', true)
      if (cursors.right.isDown) {
        this.player.setVelocityX(200)
        this.player.flipX = false
      }

main.js

最终的 main.js 文件将所有内容整合在一起。它使用上述两个文件在 HTML 画布中初始化整个游戏。title.js 和 game.js 分别作为两个独立的场景导入，然后合并。这也是我决定编写获取请求的地方。其中一个请求从后端数据库获取现有用户名及其分数，并排序出前十名分数显示在表格中。另一个请求在新用户首次在主页上输入姓名时，将分数为 0 的新用户提交到数据库。game.js 中还有另一个获取请求，用于在用户死亡并重启游戏后，将新分数提交到数据库。

后端

后端工作比前端简单直接得多。后端使用 Rails 开发，唯一目的是创建用户，并将用户及其分数保存到数据库中。后端部署在 Heroku 上，前端使用提供的 URL 获取数据。

最后的想法

总的来说，我很高兴完成了这个项目，也学到了更多游戏开发的知识。虽然我用 Phaser 完成了许多繁重的工作，但我感觉我的 JavaScript 知识有所提升。本周早些时候我开始学习 React，惊喜地发现我使用 Phaser 的经验在某种程度上是可行的，尤其是在文件的导入和导出方面。Phaser 提供的预加载、创建和更新函数也与 React 的生命周期方法类似。展望未来，我绝对想尝试用 JavaScript 制作不同类型的电子游戏。

查看我的代码：
https://github.com/mshin1995/DinoDash

玩游戏：
https://mshin1995.github.io/DinoDash/

玩法：
- 使用箭头键移动/跳跃
- 吃肉获得额外积分
- 避开炸弹
- 活下去