小游戏开发 Mario (2)

上一节的核心和难点都在 SpriteSheet 这个类上，这里就再解释一下这个类，便于大家理清思路。首先（class）类的概念是在 es6 中引入的，之前 javascript 只是保留了 class 这个关键字，并没有提供 class。我们需要通过各种各样的方式来实现类，感兴趣可以自己搜集一下资料。大概有 7 8 种吧。

SpriteSheet 的构造函数中，我们定义一个 map 集合，我们将图块（小块）和图片的名称以键值对的形式保存起来，以便于我们可以根据图块名称来获取图块。构造函数接受三个参数，图片（从该图片中获取图片）以及要获取的块图的大小。

SpriteSheet 类提供了两个方法 define 和 draw

1. define 根据  x 和 y(要获取的块图在图片中位置）来获取图块（以buffer形式保存图块信息）然后将获

取的块图按名称保存在 map 中。

2. draw 方法，会根据图块名称将块图画在传入画布 contex 的 x, y 位置。

结束今天课程的最终效果

由于现在所有 js 代码都在 main.js 这个文件中，这样文件体积会随着开发变得越来越大，不便于管理，所以我们需要 SheetScript 和 loadImage 分离到一个独立的文件中。这样代码就显得清晰有调理。

创建一个 SpriteSheet.js 文件，然后将 SpriteSheet 这个类的代码剪切到这个文件，我们还需要将 SpriteSheet 向外提供，便于其他js文件使用，我们用 export default 将 Spritesheet 类提供给外部。有关 export default 和 export 大家可以上网搜索相关资料学习

图1

同样的方法，我们将 loadImage 方法提取到 loades.js 文件中

图2

然后在 main.js 中，将他们 SpriteShee.js 和 loader.js 导入后便可使用。

图

添加 sky 图块，然后将图块绘制到画布上看效果

图

通过每个整个画布。遍历 x 和 y 将图块一个一个绘制到画布上，最终绘制出天空的背景。

这里 25 和 14 是 16 （在构造函数定义尺寸 16）倍数，所以我们需要 x 上乘以 16.

我们为 spriteSheet 类添加 drawTile 方法，来绘制图块

在 main.js 中调用刚刚添加好的 drawTile 方法，这样代码看上去就清晰多了.

同样的方法，将地面绘制到画布上看效果

到现在为止我已经达到今天预期效果，但是我们还需要整理一下代码

首先在目录下创建 levels/1-1.json 文件

在 json 的 backgrounds 中保存我们如何绘制背景信息，我们需要读取信息来绘制背景

创建好 json 文件后，在 loaders.js 添加一个加载 level 的 loadLevel 方法。

然后在 main.js 将其引用，看一下是否成功导入 json

在 main.js 中创建一个 drawBackground 方法来绘制背景

通过读取 level json 文件后，获取 background 对象 {tile:"sky",ranges:[]}读取这个格式中 ranges 图块坐标信息来一个一个绘制图块

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