系列文章：
前言
前阵子沉迷 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)
系列文章：
