小游戏开发 Mario (Four)

今天我们的目标是让 Mario 动起来。根据所学的物理知识，知道随着时间变化物体的位置发生改变，那么这个物体运动起来了。

思路是给 mario 一个坐标，并且随着时间变化更改 mario 的坐标（位置），那么 mario 自然而然就动了起来，所有就需要一个表示位置的 pos 对象，和一个间隔一定时间（频率）来绘制画面的方法。

图1

修改 mario 绘制方法，在图的什么位置绘制 mario 由 pos 来决定，可以通过改变 pos 来改变 mario 的位置。

图2

然后就要实现在一定时间间隔反复（回调方式）来执行一个函数。这里是用  requestAnimationFrame  方法来实现的。requestAnimationFrame 根据浏览器间隔时间回调一个函数，实现动画效果。requestAnimationFrame  会根据浏览器刷新的时间间隔来回调 update 函数。有关我们为什么不用 interval 而用 requestAnimationFrame 以后会单拿出来一篇文章讲述选择他的原因。

图3

观察 mario 已经动起来了！以 45 ° 向右下角运动，因为 x 和 y 随时时间增量为固定值。

图5

我们是不希望每次都要绘制背景的，因为背景并没有变化，如果每次都需要绘制背景，这样就造成资源的浪费。我们可以将背景事先绘制到一个 canvas 中作为备用，每次更新时候我只需要读取整个 canvas 中缓存的数据，将他绘制到屏幕上即可。具体实现方法如下图

图6

图7

绘制背景

现在需要理清一下思路，我们游戏窗口可能会许多层，层可能用于绘制不同场景，例如前景、中景和背景，也可能用于绘制不同敌人或物件，我们通过层来进行区分或归类，所有这些层最终会组合在一起呈现给玩家，我们为这个组合创建一个类 即 Compositor 类多说一句如果了解 ps compositor 对您一定不会陌生，compositor 就是多个图层组合。创建一个 Compositor 用于存放图层，可以添加图层。

图8

createSpriteLayer 用于创建一个返回绘制 sprite layer 的方法。

这里 js 中高阶函数天然且容易地实现注入或者可以说切面编程这种模式

我们将一函数作为返回值，在获取函数时就可以进行一些处理，然后传参和处理不同

来得到一个我们想要的函数，很巧妙吧

图9

然后将 spriteLayer 添加到 Compositor ，遍历 Compositor 中的图层，来绘制图层。

图10

到现在，我们来整理一下代码，这样结构更清晰，不让 main.js 变得那么臃肿。

首先分离 compositor 分离到独立的文件。

图11

然后将 createBackgroundLayer 分离到 layers.js 文件，因为 drawBackground 只被 createBackgroundLayer 调用，所以将 drawBackground 放入 layers 文件。

图12

图

我们现在将 sprites 修改为 backgroundsprites ，这样看上去更加明了。

图

大家知道速度和位置都是向量，我们将位置和速度类型为向量 Vec2

图

效果图

定义二维向量类 Vec2.

效果图

然后就将 pos 和 vel 转换为 Vec2 二维向量。

图

创建一个 Entity 我们所有物件和游戏人物都是基于这个类，这个类构造时定义位置和速度。

图

mario 就是一个 Entity 的实例。可以将 entity 看成 mario 的接口。

图

将 mario 实体 entity 类替换所有相关的参数。

图

将 update 也移入到 mario 对象中。

图

为 mario 对象添加 draw 方法。将 mario的 Spritedraw 方法移入到 mario 的 draw 方法。

图

也需要修改一下 createSpriteLayer 方法。

图

图

请大家多多支持我的微信公众号，这里为大家推送更多更快的文章。

小马学编程