模块分解-game.js

    游戏全局的入口文件，是微信小游戏必有的一个文件，这个文件必须要有

    所有的初始化module都是通过game.js来加载到其他module里的

模块分解-Main.js

    程序主类，主要用来初始化canvas和一些全局对象，各个精灵和绑定点击事件

模块分解-Director.js

    程序导演类，用来控制游戏的逻辑和精灵的创建与销毁，控制游戏主循环

模块分解-DataStore.js

    存储游戏需要长时间保存的变量和需要定时销毁的变量，这样让我们各个JS文件之间的耦合度降更低，当我们两个文件共同去应用一个变量或者去使用某个数据的时候，我们就不需要去引用另一个JS类中的变量了，我们直接从DataStore中取就可以了，就相当于一个中间件

模块分解-Resources.js

    游戏的资源 

模块分解-ResourceLoader.js

    资源加载器，保证游戏是在图片加载完成后开始循环

    我们图片加载完我们的Canvas才进行渲染，否则的话我们的Canvas在资源没有加载完毕的时候就开始运行JS逻辑我们的画面会是一张白布

模块分解-Sprite.js

    游戏精灵的基类，背景，陆地，铅笔，小鸟等都是它的子类

    精灵可以指代游戏中的一切元素，他可以进行旋转、变化、缩放、可以处理很多动作、可以包含很多内部的逻辑。

    精灵类可以说是整个游戏开发比较核心的概念

模块分解-Background.js

    我们在这个js里绑定一个图片资源，这个背景类我们绑定一个背景图片 ，他不动，就放在整个Canvas的背后作为背景

模块分解-Land.js

    陆地类，我们看到游戏的陆地会一直想左移动的，Land.js就是帮我们的陆地拆分让后一点一点一点的渲染，不断去刷新

模块分解-UpPencil.js

    上半部分铅笔类，只要一根就可以了，其他的话我们会剪裁

模块分解-DownPencil.js

    下半部分铅笔类

模块分解-Birds.js

    小鸟类    Canvas它的归图原理不是一个资源对应一个图，它其实是一个剪裁和重绘的过程。就像我们的小鸟，我们准备三个小鸟状态，向上飞，翅膀在中间，翅膀在下面。我们渲染的时候就不断刷新这个部分，就像小鸟在飞

模块分解-Score.js

    计分器类

模块分解-StartButton.js

    重启开始按钮类

Canvas渲染原理：一层一层一层向上叠，类似于油画。我们把背景图放到第一层，它就会放到我们Canvas最底部，这时候我们再放铅笔层，我们把铅笔放上去，然后这个铅笔其实是往下的，是很长的。我们再把陆地贴上去就把这部分铅笔遮住了，这时候再画小鸟，计分器和我们的按钮。铅笔我们每隔一段时间随机创建两组，是一个定期创建的过程。我们判断一下屏幕有两组也就是4根，如果是4根就再去创建他，如果多或者少了我们就不做处理，如果它到了屏幕的边缘我们再销毁刚开始进行创建的。

这个铅笔的高度是不一的，我们做一个随机数然后加一个参数来限定它上下伸缩的距离，这个时候我们就能得到每一组随机产生的铅笔。

至于陆地我们每次取上它的一截，然后让它不断想左重绘，等到快要到头的时候我们又会把左边的一截取下来拼到右边继续重绘，给我们感觉陆地一直在动。

小鸟就是三张图片不停地在切换重绘，切换重绘。

Canvas的渲染原理不是大多数理解的那样，如果是小鸟动就小鸟这块渲染不是这样的。

Canvas其实是一个整块的元素也就是说当我们渲染小鸟的时候，整张图片，整个背景都在不断重绘。每一个像素都会重写创建销毁。所以说我们只要把握这个原则，控制帧数就可以通过剪裁，拼接还有各种障眼法做出我们各种想要的游戏