【Cocos Creator 實戰】05 - 如何判斷拼圖完成（勝利）

繼續繼續。

上一篇地址：【Cocos Creator 實戰】04 - 如何給拼圖加上吸附效果

概覽

主要內容

來看看今天要做的內容：

• 如何判斷拼圖遊戲已經結束（勝利）

來看看將要實現的效果：

項目資源

• 項目地址：https://github.com/BottleMan/Bottle-s-Jigsaw/tree/05_checkwin
• 演示地址：點擊前往

推薦大家先把項目 clone 到本地，然後參考着代碼來看本篇文章。
我的每篇文章會對應一個分支，大家直接看對應的分支就可以，master 對應的是最新的內容，會整合各個分支。
演示地址也是對應每篇文章獨立部署的。

開搞

勝利規則

1、我們還是先標記出每塊拼圖的位置，同時給每塊拼圖編號

2、無論拼圖的位置怎麼變化，如果想要最終結果是完整的話，那麼每塊拼圖的相對位置一定是固定的，即如圖中顯示

3、所以我們可以總結出來下面的規律

        let conditions = [
            {x: 270, y: 0}, // 2-1
            {x: 270, y: 0}, // 3-2
            {x: 270 * (-2), y: -180}, // 4-3
            {x: 270, y: 0}, // 5-4
            {x: 270, y: 0}, // 6-5
            {x: 270 * (-2), y: -180}, // 7-6
            {x: 270, y: 0}, // 8-7
            {x: 270, y: 0}, // 9-8
        ];

上面的每一個元素表示兩個拼圖的相對位置，比如第一個 {x: 270, y: 0} 表示編號2的拼圖在編號1的拼圖的 (x+270, y+0) 位置，下面的其他元素同樣的道理。

至於編號問題，我們當時在初始化的時候就是按照 1-9 的順序初始化的，所以，itemManager.items 中的元素就是按照 1-9 的順序的拼圖節點，直接拿來用就可以。

和上一篇文章說的吸附一樣哈，勝利的規則不是隻有一個，大家可以開動自己聰明的小腦瓜殼子，一定可以想到比我這個更科學的方法。

核心代碼

1、修改 item-manager.js，增加檢查結束方法 checkWin

    checkWin() {
        let conditions = [
            {x: 270, y: 0}, // 2-1
            {x: 270, y: 0}, // 3-2
            {x: 270 * (-2), y: -180}, // 4-3
            {x: 270, y: 0}, // 5-4
            {x: 270, y: 0}, // 6-5
            {x: 270 * (-2), y: -180}, // 7-6
            {x: 270, y: 0}, // 8-7
            {x: 270, y: 0}, // 9-8
        ];

        let j = 0;
        for (let i = 0; i < this.items.length - 1; i++) {
            let thisPos = this.items[i].node.position;
            let nextPos = this.items[i + 1].node.position;
            if (Math.abs(nextPos.x - thisPos.x - conditions[j].x) > 5) return;
            if (Math.abs(nextPos.y - thisPos.y - conditions[j].y) > 5) return;

            j++;
        }

        alert('YOU WIN!!!');
    }

其實核心代碼就這一塊，但是由於代碼有點亂，我們再簡單整理一下之前的代碼。

2、吸附動畫完成時，回調 checkWin 方法

還記得我們上一篇文章的移動動作吧：

let action = cc.moveTo(0.1, targetVec);
node.runAction(action);

我們將他簡單修改一下，這次使用 cc.sequence 來執行動作

let finished = cc.callFunc(this.checkWin, this);
let action = cc.moveTo(0.1, targetVec);
let seq = cc.sequence(action, finished);
node.runAction(seq);

3、簡單講解一下 cc.sequence（順序動作）

cc.sequence 順序動作可以讓一系列子動作按順序一個個執行，例如：

 // 讓節點左右來回移動
 var seq = cc.sequence(cc.moveBy(0.5, 200, 0), cc.moveBy(0.5, -200, 0));
 node.runAction(seq);

好了，我們再回過頭看第二條，cc.sequence(action, finished) 就表示先執行一個 moveTo 的動作，再執行 finished 回調。

簡單吧。

總結

知識點

1、設計一套判斷拼圖結束的規則
2、cc.sequence 順序動作的簡單實用

下一步

這篇的內容比較少哈，本來想就 cc.sequence 多講點示例的，但是發現目前還用不上，等後面用上的時候再說吧。

到目前爲止，關於 Cocos Creator 基本的內容其實都講的差不多了，真的，你別不信，就會這些東西，你上手絕對沒問題了，等遇到想要解決的問題的時候，直接網上衝浪找一下解決方案就可以了。

後面文章可能節奏也會更快一點，基礎的東西直接越過不講了，不然我這文章得寫一輩子。

下面的內容就是豐富豐富界面元素吧，畢竟現在進來就是拼圖也太簡陋了，對不住我們世界上最好的拼圖遊戲的名頭。

下一篇地址：【Cocos Creator 實戰】06 - 如何給拼圖遊戲添加計時器