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

小精靈冒險(xiǎn) 是 Learn Pixi.js 一書中最后一個(gè)案例。點(diǎn)擊屏幕讓小精靈飛起來，小精靈上升時(shí)，會(huì)拍打翅膀，并且會(huì)有小星星產(chǎn)生。如果她撞到柱子上，她會(huì)爆炸成一堆小星星。幫助她通過15個(gè)柱子的間隙到達(dá)終點(diǎn)，界面會(huì)顯示一個(gè)巨大 Finish 標(biāo)志。

試玩一下

下載源碼

下來讓我們看看怎么制作這個(gè)游戲的吧！

還記得 學(xué)習(xí) PixiJS — 視覺效果 一文中提到的視差效果嗎？小精靈冒險(xiǎn)的背景是使用視差效果做的，也就是背景比前景移動(dòng)的速度慢一些，使得背景看上去好像距離更遠(yuǎn)。

為了制作天空背景，我們使用無縫的512 x 512的云圖像。圖像是紋理貼圖集中的一幀，名為 clouds.png，如下圖所示。

在程序的 setup 函數(shù)中，使用 clouds.png 幀創(chuàng)建一個(gè)名為 sky 的平鋪精靈 。

sky = new TilingSprite(
    id["clouds.png"],
    renderer.view.width,
    renderer.view.height
);
stage.addChild(sky);

在游戲循環(huán)中，通過減小平鋪精靈（ sky） 的 tilePosition.x 值，使其向左移動(dòng)。

sky.tilePosition.x -= 1;

這樣就實(shí)現(xiàn)了背景的無限滾動(dòng)了！

游戲中有15根柱子，想要通關(guān)，小精靈必須通過這些柱子。每5根柱子，頂部和底部之間的間隙會(huì)變得更窄。前5個(gè)柱子有四塊的??間隙，接下來的5根柱子有三塊的間隙，后5根柱子有兩塊的間隙。隨著小精靈飛得更遠(yuǎn)，游戲也變得越來越困難。每根柱子的間隙的確切位置是隨機(jī)的，并且每次玩游戲時(shí)都是不同的。而每個(gè)柱子與柱子間隔384像素，下圖顯示了它們彼此相鄰時(shí)的樣子。

每根柱子的頂部和底部之間的間隙逐漸變窄，你可以看到間隙從左側(cè)的四塊空間逐漸變窄到右側(cè)的兩塊空間。

構(gòu)成柱子的所有塊都在一個(gè)名為 blocks 的容器中。

blocks = new Container();
stage.addChild(blocks);

創(chuàng)建15根柱子需要兩層 for 循環(huán)，外層循環(huán)運(yùn)行15次，一次創(chuàng)建一根柱子。內(nèi)層循環(huán)運(yùn)行8次，每次都會(huì)判斷是否要在柱子上加入1個(gè)綠色塊。不過只有在不是隨機(jī)間隙范圍內(nèi)時(shí)，才會(huì)添加綠色塊。外層循環(huán)每運(yùn)行5次，柱子與柱子的間隙的大小就會(huì)縮小1。

//柱子之間的初始間隙
let gapSize = 4;
//柱子的數(shù)量
let numberOfPillars = 15;
//循環(huán)15次，形成15根柱子
for (let i = 0; i < numberOfPillars; i++) {
    //隨機(jī)確定單個(gè)柱子的間隙
    let startGapNumber = randomInt(0, 8 - gapSize);
    //每隔五根柱子就減少一個(gè)間隙 
    if (i > 0 && i % 5 === 0) gapSize -= 1;
    //如果不在柱子的間隙內(nèi)，就創(chuàng)建一個(gè)塊放入柱子
    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;
        }
    }
    //創(chuàng)建柱子之后，在添加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 容器最后會(huì)添加到舞臺(tái)上，小精靈如果能堅(jiān)持到最后，就能看見它。

如果 finish 精靈位于屏幕外時(shí)，每次游戲循環(huán)在play 函數(shù)中都會(huì)將 blocks 容器向左移動(dòng)2像素。

if (finish.getGlobalPosition().x > 256) {
    blocks.x -= 2;
}

當(dāng) finish 精靈滾動(dòng)到畫布的中心時(shí)， blocks 容器將停止移動(dòng)。要注意，代碼使用 finish 精靈的全局坐標(biāo)的 x 位置來檢測(cè)它是否在畫布區(qū)域內(nèi)。因?yàn)槿肿鴺?biāo)是相對(duì)于畫布而不是父容器，所以它們對(duì)于在畫布上找到嵌套精靈的位置非常有用。

在 學(xué)習(xí) PixiJS — 動(dòng)畫精靈 一文中提到了怎么制作動(dòng)畫精靈。

小精靈角色就是使用紋理貼圖集中的3個(gè)幀制作的動(dòng)畫精靈。每個(gè)幀都是小精靈拍打翅膀動(dòng)畫中的一個(gè)圖像。

以下是 setup 函數(shù)中創(chuàng)建小精靈角色的代碼。

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 庫(kù)中的 sprite 方法。這個(gè)方法可以簡(jiǎn)化創(chuàng)建精靈的步驟。

小精靈有了一個(gè)新的屬性，叫做 oldVy， 它用來幫助我們計(jì)算小精靈的垂直速度（vy）。

在 play 函數(shù)中，小精靈的垂直速度（vy）在每幀上都會(huì)減去0.05，使小精靈下落。

pixie.vy -= 0.05;
pixie.y -= pixie.vy;

玩家可以通過點(diǎn)擊畫布上的任何位置來讓小精靈飛行。這是通過為指針對(duì)象指定 tap 方法來完成的，指針對(duì)象在 學(xué)習(xí) PixiJS — 交互工具 這篇文章中已經(jīng)講的很清楚了。每次點(diǎn)擊都會(huì)使小精靈的垂直速度（vy）增加1.5，將她向上推。以下是 setup 函數(shù)中的代碼，它生成指針對(duì)象并指定 tap 方法。

pointer = t.makePointer();
pointer.tap = () => {
    pixie.vy += 1.5;
};

產(chǎn)生的小星星就是在 學(xué)習(xí) PixiJS — 粒子效果 一文只提到的粒子。

當(dāng)小精靈拍打翅膀時(shí)，會(huì)產(chǎn)生一些五彩的小星星。小星星的產(chǎn)生會(huì)約束在2.4到3.6之間的角度，因此它們會(huì)被發(fā)射到小精靈左側(cè)的錐形內(nèi)，如下圖所示。

產(chǎn)生的小星星可能是紫色，粉紅色，綠色，或黃色，每個(gè)小星星都是多帶帶的一個(gè)幀。

正如 學(xué)習(xí) PixiJS — 粒子效果 一文中使用的 粒子效果庫(kù)（Dust），有一個(gè) create 方法，如果一個(gè)精靈包含多個(gè)幀，它將在精靈上隨機(jī)顯示一個(gè)幀。使用這個(gè)方法，首先要定義要用于制作粒子的紋理圖集幀數(shù)組。

dustFrames = [
    id["pink.png"],
    id["yellow.png"],
    id["green.png"],
    id["violet.png"]
];

接下來，將這個(gè)數(shù)組作為參數(shù)傳給 create 方法，然后再把 create 方法當(dāng)做參數(shù)傳給粒子發(fā)射器方法（emitter ），以下是關(guān)鍵代碼：

//創(chuàng)建一個(gè)Dust實(shí)例
d = new Dust(PIXI);

//創(chuàng)建粒子發(fā)射器
particleStream = d.emitter(
    300, //時(shí)間間隔
    () => d.create( 
        pixie.x + 8, //x 坐標(biāo)
        pixie.y + pixie.height / 2, //y 坐標(biāo)
        () => u.sprite(dustFrames), //粒子精靈
        stage, //父容器
        3, //粒子數(shù)
        0, //重力
        true, //隨機(jī)間隔
        2.4, 3.6, //最小，最大角度
        18, 24, //最小，最大尺寸
        2, 3, //最小，最大速度
        0.005, 0.01, //最小，最大比例速度
        0.005, 0.01, //最小，最大alpha速度
        0.05, 0.1 //最小，最大旋轉(zhuǎn)速度
    )
);

現(xiàn)在就有一個(gè)名為 particleStream 的粒子發(fā)射器。只需調(diào)用其 play 方法就可以開始發(fā)射粒子，產(chǎn)生小星星了。

particleStream.play();

當(dāng)小精靈上升時(shí)，她會(huì)拍打翅膀，產(chǎn)生五彩的小星星。當(dāng)她下落時(shí)，她停止拍打翅膀，并且停止產(chǎn)生小星星，但我們?cè)趺粗浪窍蛏线€是向下飛行呢？

我們必須找到當(dāng)前幀和前一幀之間的速度差異。如果她當(dāng)前的速度大于她以前的速度，她就會(huì)上升。如果小于，并且當(dāng)前速度小于零，那么她就會(huì)下落。代碼將當(dāng)前幀中的小精靈的 vy 值存儲(chǔ)在 oldVy 屬性中。在下一次游戲循環(huán)時(shí)，通過比較這兩個(gè)屬性就可以知道是上升還是下落了。以下是關(guān)鍵代碼：

//如果她上升，則拍打翅膀并產(chǎn)生五彩的小星星
if (pixie.vy > pixie.oldVy) {
    if (!pixie.animating) {
        pixie.playAnimation();
        if (pixie.visible && !particleStream.playing) {
            particleStream.play();
        }
    }
}
//如果她往下落，停止拍打翅膀，展示第一幀，并停止產(chǎn)生五彩的小星星
if (pixie.vy < 0 && pixie.oldVy > 0) {
    if (pixie.animating) pixie.stopAnimation();
    pixie.show(0);
    if (particleStream.playing) particleStream.stop();
}
//存儲(chǔ)小精靈的當(dāng)前vy值，以便我們可以在下一幀中使用它來確定小精靈是否改變了方向
pixie.oldVy = pixie.vy;

當(dāng)小精靈撞到柱子時(shí)，她會(huì)爆炸成一堆小星星，如下圖所示。

實(shí)現(xiàn)這個(gè)效果需要使用 學(xué)習(xí) PixiJS — 碰撞檢測(cè) 一文中提到的 Bump 庫(kù)中的 hitTestRectangle 方法。在代碼中遍歷 blocks.children 數(shù)組，檢測(cè)每個(gè)塊和小精靈之間的碰撞。如果 hitTestRectangle 方法返回 true ，則退出循環(huán)，表示小精靈碰撞到柱子了。

//小精靈碰撞到柱子時(shí)，pixieVsBlock 為 true
let pixieVsBlock = blocks.children.some(block => {
    return b.hitTestRectangle(pixie, block, true);
});

使用 some 循環(huán)，一旦找到一個(gè)等于 true 的值，循環(huán)就會(huì)退出，這樣可以避免多余的檢測(cè)。

小精靈是 舞臺(tái)（stage ） 的子級(jí)，但每個(gè) block 都是 blocks 容器的子級(jí)，這意味著它們不使用相同的局部坐標(biāo)。所以 hitTestRectangle 方法的第三個(gè)參數(shù)必須為 true，以便強(qiáng)制 hitTestRectangle 方法使用全局坐標(biāo)進(jìn)行碰撞檢測(cè)。

如果 pixieVsBlock 為 true，并且當(dāng)前小精靈可見，則運(yùn)行小精靈爆炸成一堆小星星的代碼。它使小精靈變的不可見，并產(chǎn)生粒子爆炸效果，而且在延遲3秒后調(diào)用游戲的 reset 函數(shù)，重置游戲。以下是在 play 函數(shù)中的代碼：

if (pixieVsBlock && pixie.visible) {
    //讓小精靈變得不可見
    pixie.visible = false;
    //制作爆炸小星星效果
    d.create(
        pixie.centerX, pixie.centerY, //x 和 y 坐標(biāo)
        () => u.sprite(dustFrames), //粒子精靈
        stage, //父容器
        20, //粒子數(shù)
        0, //重力
        false, //隨機(jī)間隔
        0, 6.28, //最小角度，最大角度
        16, 32, //最小尺寸，最大尺寸
        1, 3 //最小速度，最大速度
    );

    //停止粒子發(fā)射器
    particleStream.stop();
    //等待3秒，然后重置游戲
    wait(3000).then(() => reset());
}

學(xué)習(xí) PixiJS — 補(bǔ)間動(dòng)畫 這篇文章中介紹了 wait 函數(shù) 。

如果小精靈碰撞到柱子，則在3秒鐘延遲后重置游戲。游戲的 reset 函數(shù)通過將小精靈和塊重新定位到其初始位置，并使小精靈再次可見來實(shí)現(xiàn)此功能。

function reset() {
    pixie.visible = true;
    pixie.y = 32;
    particleStream.play();
    blocks.x = 0;
}

以上就是如何實(shí)現(xiàn) 小精靈冒險(xiǎn) 這個(gè)游戲的全部了，游戲中需要的各種東西，在前面幾篇文章中都有提到。如果遇到什么不明白的東西，可以看看前面的幾篇文章。
而這個(gè)小游戲還有許多小細(xì)節(jié)可以去實(shí)現(xiàn)，比如增加玩家的分?jǐn)?shù)，增加開始游戲的按鈕，增加一些場(chǎng)景過渡，增加音效 等等，這些你都可以嘗試自己實(shí)現(xiàn)下。

上一篇 學(xué)習(xí) PixiJS — 交互工具