【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 - 如何给拼图游戏添加计时器