Game development

使用Phaser开发2D breakout game

在这个手把手的教程中,我们将使用Phaser框架制作一个使用JavaScript构建简单的MDN消除游戏。

教程的每一步骤都会有可供修改的样品来玩,所以你可以看到开发的每一步中间步骤。 您将学到如何使用Phaser框架来实现基础游戏机制的基本知识,诸如渲染和移动图像,碰撞检测,控制机制,框架特定的帮助器功能,动画和补间,以及获胜和失败状态等。

为了充分理解这一系列的文章,您应该确保已有基本的中级JavaScript知识。学完本教程,您将有能力用Phaser构建简单的Web游戏。

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

教学清单

所有的课程 — 以及我们接下来将一起做的各个版本的 MDN Breakout game  都能在 GitHub上找到

  1. 初始化框架
  2. 缩放
  3. 加载资源并在屏幕上打印
  4. 移动小球
  5. 物理
  6. 从墙上弹开
  7. 弹块和控制
  8. 游戏结束
  9. 建立砖块
  10. 碰撞检测
  11. 得分
  12. 胜利
  13. 额外生命
  14. 动画与补间
  15. 按钮
  16. 随机游戏

学习路线的小提示 — 最好先熟悉使用原生JavaScript进行网页游戏开发,这样可以打下坚实的基础.如果你还不熟悉原生javascript开发,我们建议你先过一遍这个系列, 使用原生Javascript开发MDN消除游戏.

在那之后,你就能随意挑选框架并用在你的项目中;我们选择了Phaser这个稳定优越的框架,它有着好的支持和社区环境以及大量优秀的插件. 框架加速了开发并能帮你管理无趣的部分,让你专注于有意思的事务. 然而, 框架也有不好的地方, 所以当一些意想不到的事情发生了或者想实现一些框架没有提供的功能时,你就将需要原生的JavaScript知识了.

注意: 本系列文章可用作实际游戏开发的材料。 如果您想要使用Phaser讨论游戏开发,您还可以使用基于本教程的 Gamedev Phaser内容套件.

Next steps

好了,那我们就开始吧!前往系列第一部分 — 初始化框架.

文档标签和贡献者