在开始新的内容之前, 我们先优化一下上一次代码. 我们看图中的代码
图 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 中. 让代码看起来更优雅.
来源: http://www.jianshu.com/p/294a78289970