在开始新的内容之前，我们先优化一下上一次代码。我们看图中的代码
图1
发现（1）加载图片和（2）加载关卡（level）是有一定先后顺序的，先加载图片，再加载关卡，在完成关卡加载后，才将图片显示在浏览器中，这是我们不希望的。
为了更好理解，我们分别在这两个加载处添加输出语句。
图2
我们看一看在 chrome 浏览器中 console 输出
图3
由于加载的速度很快，可能不容易看出先后效果来，那么我们可以添加一些延时函数来延迟加载时间，以便清楚第看出效果来。
图5
图6
如上图我们分别给加载图片和加载level添加延时方法。
如果您亲手试一试，就会发现 3 秒 完成图片加载后，再等 3 秒加载完 level 后才能看到图片显示在浏览器中。实际上加载图片和加载关卡不应该有先后顺序，应该是并行加载图片和关卡。
那么我新建一个加载背景sprite方法，然后将loadImage 放入方法中作为 promise 返回
图7
我们可以用 es6 提供的 Promise 的 all方法实现“加载图片”和“加载关卡”并行。
图8
调整好代码，在此启动后会发现在 3 秒后画面就出现在浏览器上。
好的。我们继续向下进行，现在来添加 mario 到我们屏幕上。
准备一张图片，我们先将这个 mario （蓝圈中）渲染到屏幕上，暂时还不考虑动画。
图9
将刚刚创建的 loadBackgroundSprites 方法复制一份，将函数名修改为 loadMarioSprites 用于加载 mario 图片。修改内容如下图。
图11
然后将 mario 的 sprite 渲染到屏幕上
图12
哇，mario 已经显示到屏幕上，
图15
不过 mario 好像还不完整，我们尝试调整方法 define 的 x, y
图16
但是还是无法精确显示出 mario 来，因为不是每个图片都是符合我们预想的规范（width 和 height 倍数）。我们需要调整 define 方法（用于定于图块位置的方法）我们添加两个参数 width height ，修改函数的代码。这样我们便可精确的确定出图块的位置。
但是 ground 和 sky define 就会报错，因为他们仅给出三个参数（name,x,y)
为了兼容，我们为 spriteSheet 添加 defineTile 方法（适配器模式）
我们看调整后结果，sky 和 ground 并没有变化。那么现在我们来处理 mario。
最后我们还需再次调整一下代码将 loadMarioSprites 和 loadBackgroundSprites 分离到文件 sprites.js 中。让代码看起来更优雅。
Mario
网友评论