开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

系列文章：

• 用 Pixi.js 仿一个 Brotato (一) - 掘金 (juejin.cn)

• 用 Pixi.js 仿一个 Brotato (二) - 掘金 (juejin.cn)

前言

前阵子沉迷 Brotato 无法自拔，刚好掘金又出了个 码上掘金编程挑战赛，就想着用 Pixi.js 仿一个 Brotato，现在刚好活动告一段落，于是准备开一个新坑，算是做一个复习总结吧，也希望能对 Pixi 感兴趣的小伙们有所帮助，国内确实这方面的资料比较少（毕竟 PixiJS 的官网是英文文档）

关于 Pixi.js

官网的解释：HTML5创建引擎。最快、最灵活的 2D WebGL 渲染器。

特征

• 支持WebGL渲染，因为能调用GPU渲染，所以渲染性能高

• 支持canvas渲染，当设备不支持WebGL时自动使用canvas渲染，也可以手动选择canvas渲染

• 简单易用的api，提供了很多封装的模块

• 丰富的交互事件，支持完整的鼠标和移动端touch事件

• 不侵入你的编码风格，可以自由选择使用它的多少功能

• 与其他插件或框架无缝集成

详细点说：PixiJS 的核心是一个渲染系统，它使用 WebGL（或者Canvas）来显示图像和其他 2D 视觉内容。 它提供了完整的场景图（要渲染对象的层次结构），并提供交互支持以启用处理点击和触摸事件。 它是现代 HTML5 世界中 Flash 的自然替代品，但提供了更好的性能和像素级效果，超出了 Flash 所能达到的范围。 它非常适合在线游戏、教育内容、交互式广告、数据可视化……任何需要复杂图形的基于 Web 的应用程序。 再加上 Cordova 和 Electron 等技术，PixiJS 应用程序可以作为移动和桌面应用程序分布在浏览器之外。

Pixi API的优势在于它具有通用性：它不仅仅是一个游戏引擎。 因为你可以完全自由地使用它制作自己喜欢的东西，甚至是创建自己的游戏引擎。

流程

• 创建舞台

• 创建画布

• 把画布挂载到DOM上

• 创建精灵

• 显示精灵

• 操作精灵

这里大家先做简单了解，后续会结合案例给大家详细介绍

游戏设计

作为游戏开发的一环，前期游戏规则的制订，流程的设置，以及为后续功能扩展留好坑位十分重要，本篇的主要内容会围绕着游戏设计展开

游戏流程

Brotota 是一个肉鸽类的射击游戏，主要的游戏流程是怪堆里再规定时间内苟活，击杀怪物获得经验，过关升级可以加强属性和购买道具

这里我把流程简化了下，这样一个无限挑战的游戏流程就出来了

游戏元素

Brotato 的主角是各种各样的土豆，这里我就将角色设计成各种水果，当然初版只有一种，但只要把这个角色类设计好，后面的就是一个换肤和添加各种特色机制就可以了，怪物同理，其它的都是些公共元素，简单设计下就可以

不多不少主要有6个元素，后续篇章将会对这6个部分做逐一的设计与讲解，每个都会以 js 中 class 的形式进行设计 （BroFruit，Board，Count，Role，Bullet，Monster...） ，力求尽可能的逻辑解耦与复用，敬请大家持续关注！

初版试玩~后续会更新更多模块与角色^-^

水果兄弟 BroFruit（仿 Brotato） - 码上掘金 (juejin.cn)

系列文章：

• 用 Pixi.js 仿一个 Brotato (一) - 掘金 (juejin.cn)

• 用 Pixi.js 仿一个 Brotato (二) - 掘金 (juejin.cn)