共计 4992 个字符，预计需要花费 13 分钟才能阅读完成。
说明
小精灵冒险 是 Learn Pixi.js 一书中最后一个案例。点击屏幕让小精灵飞起来，小精灵上升时，会拍打翅膀，并且会有小星星产生。如果她撞到柱子上，她会爆炸成一堆小星星。帮助她通过 15 个柱子的间隙到达终点，界面会显示一个巨大 Finish 标志。
试玩一下
下载源码
下来让我们看看怎么制作这个游戏的吧！
创建滚动背景
还记得 学习 PixiJS — 视觉效果 一文中提到的视差效果吗？小精灵冒险的背景是使用视差效果做的，也就是背景比前景移动的速度慢一些，使得背景看上去好像距离更远。
为了制作天空背景，我们使用无缝的 512 x 512 的云图像。图像是纹理贴图集中的一帧，名为 clouds.png，如下图所示。
在程序的 setup 函数中，使用 clouds.png 帧创建一个名为 sky 的平铺精灵。
sky = new TilingSprite(
id[“clouds.png”],
renderer.view.width,
renderer.view.height
);
stage.addChild(sky);
在游戏循环中，通过减小平铺精灵（sky）的 tilePosition.x 值，使其向左移动。
sky.tilePosition.x -= 1;
这样就实现了背景的无限滚动了！
创建一个柱子
游戏中有 15 根柱子，想要通关，小精灵必须通过这些柱子。每 5 根柱子，顶部和底部之间的间隙会变得更窄。前 5 个柱子有四块的间隙，接下来的 5 根柱子有三块的间隙，后 5 根柱子有两块的间隙。随着小精灵飞得更远，游戏也变得越来越困难。每根柱子的间隙的确切位置是随机的，并且每次玩游戏时都是不同的。而每个柱子与柱子间隔 384 像素，下图显示了它们彼此相邻时的样子。
每根柱子的顶部和底部之间的间隙逐渐变窄，你可以看到间隙从左侧的四块空间逐渐变窄到右侧的两块空间。
构成柱子的所有块都在一个名为 blocks 的容器中。
blocks = new Container();
stage.addChild(blocks);
创建 15 根柱子需要两层 for 循环，外层循环运行 15 次，一次创建一根柱子。内层循环运行 8 次，每次都会判断是否要在柱子上加入 1 个绿色块。不过只有在不是随机间隙范围内时，才会添加绿色块。外层循环每运行 5 次，柱子与柱子的间隙的大小就会缩小 1。
// 柱子之间的初始间隙
let gapSize = 4;
// 柱子的数量
let numberOfPillars = 15;
// 循环 15 次，形成 15 根柱子
for (let i = 0; i < numberOfPillars; i++) {
// 随机确定单个柱子的间隙
let startGapNumber = randomInt(0, 8 – gapSize);
// 每隔五根柱子就减少一个间隙
if (i > 0 && i % 5 === 0) gapSize -= 1;
// 如果不在柱子的间隙内，就创建一个块放入柱子
for (let j = 0; j < 8; j++) {
if (j < startGapNumber || j > startGapNumber + gapSize – 1) {
let block = u.sprite(id[“greenBlock.png”]);
blocks.addChild(block);
// 每根柱子之间间隔 384 像素，第一根柱子的 x 位置为 512
block.x = (i * 384) + 512;
block.y = j * 64;
}
}
// 创建柱子之后，在添加 finish 图像
if (i === numberOfPillars – 1) {
finish = u.sprite(id[“finish.png”]);
blocks.addChild(finish);
finish.x = (i * 384) + 896;
finish.y = 192;
}
}
代码的最后一部分将 finish 精灵添加到 blocks 容器中，blocks 容器最后会添加到舞台上，小精灵如果能坚持到最后，就能看见它。
如果 finish 精灵位于屏幕外时，每次游戏循环在 play 函数中都会将 blocks 容器向左移动 2 像素。
if (finish.getGlobalPosition().x > 256) {
blocks.x -= 2;
}
当 finish 精灵滚动到画布的中心时，blocks 容器将停止移动。要注意，代码使用 finish 精灵的全局坐标的 x 位置来检测它是否在画布区域内。因为全局坐标是相对于画布而不是父容器，所以它们对于在画布上找到嵌套精灵的位置非常有用。
制作会飞的小精灵
在 学习 PixiJS — 动画精灵 一文中提到了怎么制作动画精灵。
小精灵角色就是使用纹理贴图集中的 3 个帧制作的动画精灵。每个帧都是小精灵拍打翅膀动画中的一个图像。
以下是 setup 函数中创建小精灵角色的代码。
let pixieFrames = [
id[“0.png”],
id[“1.png”],
id[“2.png”]
];
pixie = u.sprite(pixieFrames);
stage.addChild(pixie);
pixie.fps = 24;
pixie.position.set(232, 32);
pixie.vy = 0;
pixie.oldVy = 0;
你可以看到前面的代码使用了 SpriteUtilities 库中的 sprite 方法。这个方法可以简化创建精灵的步骤。
小精灵有了一个新的属性，叫做 oldVy，它用来帮助我们计算小精灵的垂直速度（vy）。
在 play 函数中，小精灵的垂直速度（vy）在每帧上都会减去 0.05，使小精灵下落。
pixie.vy -= 0.05;
pixie.y -= pixie.vy;
玩家可以通过点击画布上的任何位置来让小精灵飞行。这是通过为指针对象指定 tap 方法来完成的，指针对象在 学习 PixiJS — 交互工具 这篇文章中已经讲的很清楚了。每次点击都会使小精灵的垂直速度（vy）增加 1.5，将她向上推。以下是 setup 函数中的代码，它生成指针对象并指定 tap 方法。
pointer = t.makePointer();
pointer.tap = () => {
pixie.vy += 1.5;
};
产生五彩的小星星
产生的小星星就是在 学习 PixiJS — 粒子效果 一文只提到的粒子。
当小精灵拍打翅膀时，会产生一些五彩的小星星。小星星的产生会约束在 2.4 到 3.6 之间的角度，因此它们会被发射到小精灵左侧的锥形内，如下图所示。
产生的小星星可能是紫色，粉红色，绿色，或黄色，每个小星星都是单独的一个帧。
正如 学习 PixiJS — 粒子效果 一文中使用的 粒子效果库（Dust），有一个 create 方法，如果一个精灵包含多个帧，它将在精灵上随机显示一个帧。使用这个方法，首先要定义要用于制作粒子的纹理图集帧数组。
dustFrames = [
id[“pink.png”],
id[“yellow.png”],
id[“green.png”],
id[“violet.png”]
];
接下来，将这个数组作为参数传给 create 方法，然后再把 create 方法当做参数传给粒子发射器方法（emitter），以下是关键代码：
// 创建一个 Dust 实例
d = new Dust(PIXI);
// 创建粒子发射器
particleStream = d.emitter(
300, // 时间间隔
() => d.create(
pixie.x + 8, //x 坐标
pixie.y + pixie.height / 2, //y 坐标
() => u.sprite(dustFrames), // 粒子精灵
stage, // 父容器
3, // 粒子数
0, // 重力
true, // 随机间隔
2.4, 3.6, // 最小，最大角度
18, 24, // 最小，最大尺寸
2, 3, // 最小，最大速度
0.005, 0.01, // 最小，最大比例速度
0.005, 0.01, // 最小，最大 alpha 速度
0.05, 0.1 // 最小，最大旋转速度
)
);
现在就有一个名为 particleStream 的粒子发射器。只需调用其 play 方法就可以开始发射粒子，产生小星星了。
particleStream.play();
判断小精灵是上升还是下降
当小精灵上升时，她会拍打翅膀，产生五彩的小星星。当她下落时，她停止拍打翅膀，并且停止产生小星星，但我们怎么知道她是向上还是向下飞行呢？
我们必须找到当前帧和前一帧之间的速度差异。如果她当前的速度大于她以前的速度，她就会上升。如果小于，并且当前速度小于零，那么她就会下落。代码将当前帧中的小精灵的 vy 值存储在 oldVy 属性中。在下一次游戏循环时，通过比较这两个属性就可以知道是上升还是下落了。以下是关键代码：
// 如果她上升，则拍打翅膀并产生五彩的小星星
if (pixie.vy > pixie.oldVy) {
if (!pixie.animating) {
pixie.playAnimation();
if (pixie.visible && !particleStream.playing) {
particleStream.play();
}
}
}
// 如果她往下落，停止拍打翅膀，展示第一帧，并停止产生五彩的小星星
if (pixie.vy < 0 && pixie.oldVy > 0) {
if (pixie.animating) pixie.stopAnimation();
pixie.show(0);
if (particleStream.playing) particleStream.stop();
}
// 存储小精灵的当前 vy 值，以便我们可以在下一帧中使用它来确定小精灵是否改变了方向
pixie.oldVy = pixie.vy;
小精灵与柱子发生碰撞
当小精灵撞到柱子时，她会爆炸成一堆小星星，如下图所示。
实现这个效果需要使用 学习 PixiJS — 碰撞检测 一文中提到的 Bump 库中的 hitTestRectangle 方法。在代码中遍历 blocks.children 数组，检测每个块和小精灵之间的碰撞。如果 hitTestRectangle 方法返回 true，则退出循环，表示小精灵碰撞到柱子了。
// 小精灵碰撞到柱子时，pixieVsBlock 为 true
let pixieVsBlock = blocks.children.some(block => {
return b.hitTestRectangle(pixie, block, true);
});
使用 some 循环，一旦找到一个等于 true 的值，循环就会退出，这样可以避免多余的检测。
小精灵是 舞台（stage）的子级，但每个 block 都是 blocks 容器的子级，这意味着它们不使用相同的局部坐标。所以 hitTestRectangle 方法的第三个参数必须为 true，以便强制 hitTestRectangle 方法使用全局坐标进行碰撞检测。
如果 pixieVsBlock 为 true，并且当前小精灵可见，则运行小精灵爆炸成一堆小星星的代码。它使小精灵变的不可见，并产生粒子爆炸效果，而且在延迟 3 秒后调用游戏的 reset 函数，重置游戏。以下是在 play 函数中的代码：
if (pixieVsBlock && pixie.visible) {
// 让小精灵变得不可见
pixie.visible = false;
// 制作爆炸小星星效果
d.create(
pixie.centerX, pixie.centerY, //x 和 y 坐标
() => u.sprite(dustFrames), // 粒子精灵
stage, // 父容器
20, // 粒子数
0, // 重力
false, // 随机间隔
0, 6.28, // 最小角度，最大角度
16, 32, // 最小尺寸，最大尺寸
1, 3 // 最小速度，最大速度
);
// 停止粒子发射器
particleStream.stop();
// 等待 3 秒，然后重置游戏
wait(3000).then(() => reset());
}
学习 PixiJS — 补间动画 这篇文章中介绍了 wait 函数。
重置游戏
如果小精灵碰撞到柱子，则在 3 秒钟延迟后重置游戏。游戏的 reset 函数通过将小精灵和块重新定位到其初始位置，并使小精灵再次可见来实现此功能。
function reset() {
pixie.visible = true;
pixie.y = 32;
particleStream.play();
blocks.x = 0;
}
总结
以上就是如何实现 小精灵冒险 这个游戏的全部了，游戏中需要的各种东西，在前面几篇文章中都有提到。如果遇到什么不明白的东西，可以看看前面的几篇文章。而这个小游戏还有许多小细节可以去实现，比如增加玩家的分数，增加开始游戏的按钮，增加一些场景过渡，增加音效 等等，这些你都可以尝试自己实现下。