文章目录

概览
- 主要内容
- 项目资源
开搞
- 胜利规则
- 核心代码
总结
- 知识点
- 下一步

继续继续。

上一篇地址：【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 - 如何给拼图游戏添加计时器

【Cocos Creator 实战】05 - 如何判断拼图完成（胜利）相关推荐

【Cocos Creator 实战】02 - 给拼图游戏加上音乐和音效
文章目录概览主要内容项目资源开搞使用 AudioSource 播放(静态) 使用 AudioEngine 播放(静态 + 动态) 静态播放动态播放 AudioSource 和 AudioE ...
【Cocos Creator 实战】03 - 如何「拿起」拼图游戏的每块图片
文章目录概览主要内容项目资源开搞什么是 zIndex 关于 zIndex 的注意事项需求分析核心代码效果总结知识点下一步好了,书接上回,继续给我们的拼图游戏添枝加叶. 上一篇地 ...
【Cocos Creator 实战】06 - 如何给拼图游戏添加计时器
文章目录概览主要内容项目资源开搞项目结构字体如何控制节点的显示&隐藏如何设置节点的相对位置 & 自动大小 & 对齐策略如何防止节点的点击穿透如何倒计时总结 ...
【Cocos Creator 实战教程(2)】——天天酷跑(动画、动作相关)
转载请保留原文链接,个人公众号:xinshouit(新手程序员),欢迎关注准备工作把背景图拉长,很长很长的那种....一会我们要让它滑动起来背景动画为背景节点添加滚动动画现在背景就循环滚动起 ...
slider节点透明背景_【Cocos Creator 实战教程(1)】——人机对战五子棋(节点事件相关)...
一.涉及知识点场景切换按钮事件监听节点事件监听节点数组循环中闭包的应用动态更换sprite图片定时器预制资源二.步骤 2.1 准备工作首先,我们要新建一个空白工程,并在资源管理器中 ...
【Cocos Creator 实战教程(1)】——人机对战五子棋(节点事件相关)
整体思路在15*15的棋盘上每一个可下棋子的地方都放置一个"隐形的棋子",当要在某个位置下子时就将该位置的棋子显示出来,在判断输赢逻辑里,我们根据这225个"隐形棋子& ...
【Cocos Creator实战教程(7)】——猴子摘月亮(平台动作，碰撞检测详解)
最后一个寒假说没就没... 话说我等Creator 的物理引擎等了好久好久,终于......还是没等到...... 我们今天就用碰撞检测系统和一些算法简单的模拟一下2D平台动作的物理特性吧先来看一下 ...
Cocos Creator实战教程(5)】——打砖块(物理引擎,碰撞检测)
1. 知识点物理引擎碰撞检测 2. 步骤 2.1 准备工作搭一个游戏背景 2.2 小球运动再建一个物理层,用来装游戏里的带有物理属性的东西,设置锚点为左下角 wall:墙//小球碰到就会反弹的 ...
【Cocos Creator实战教程(3)】——TiledMap(瓦片地图)组件
1. 前言瓦片地图是由一张一张的正方形小图片拼接成的地图,例如炸弹人,QQ堂都是非常典型的瓦片游戏.瓦片地图(Tile Map) 不但生成简单,并且可以灵活的用于Cocos2d-x引擎.不论你的游戏 ...

【Cocos Creator 实战】05 - 如何判断拼图完成（胜利）