摘要：說明小精靈冒險是一書中最后一個案例。在游戲循環中，通過減小平鋪精靈的值，使其向左移動。如果方法返回，則退出循環，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。

小精靈冒險 是 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;
}

以上就是如何實現 小精靈冒險 這個游戲的全部了，游戲中需要的各種東西，在前面幾篇文章中都有提到。如果遇到什么不明白的東西，可以看看前面的幾篇文章。
而這個小游戲還有許多小細節可以去實現，比如增加玩家的分數，增加開始游戲的按鈕，增加一些場景過渡，增加音效 等等，這些你都可以嘗試自己實現下。

上一篇 學習 PixiJS — 交互工具