Cocos creator制作了一个简单的拼图。
先来分析一下这个游戏的一些关键点，1，如何把一个完整的图片分割成3*3 5*5的小图片，而这些小图片要能存储自己的位置信息，还有一些其他的属性，比如2，如何表示小图片集合的位置，用什么数据结构保存，如何让图片逻辑对应数据逻辑3，如何判断游戏结束？
上图是游戏的场景结构。可以看到2.x版本和1.x版本有一些区别。最突出的是增加了一个默认的carmera节点，我会在其他帖子里详细介绍，这里就不多说了？
首先我们来解决第一个问题，如何把一个大图剪成小图，让这个小图保存一些属性值。首先，让我们创建一个新脚本puzzlePiece.ts。
const{ ccclass，property } = cc。_ decorator
@ccclass
exportclassPieceextendscc。组件{
@property({
类型:cc。Texture2D
})
privatetexture: ccTexture2D = null
publicoriCol:编号；
publicoriRow:编号；
publiccurCol:数字；
public currow:number；
publicisBlank:布尔型；
publicgetisRight(){
return this . curcol = = = this . oricol & amp；& ampthis . currow = = = this . orirow；
}
publicinit(col: number，row: number，colNum: number，colWidth: number){
this.oriCol = col
this.oriRow = row
this.curCol = col
this.curRow = row
let sprite = this . node . add component(cc。雪碧)；
//setRect升级到2.0后无效。
// sprite.spriteFrame = new cc。sprite frame(this . texture)；
//let rect = sprite . sprite frame . get rect()；
设rect = cc.rect(0，0，this.texture.width，this . texture . height)；
设new rect width = rect . width/colNum；
设new rect height = rect . height/colNum；
设newRectX = col * newRectWidth
设new recty =(colNum-row-1)* new rect height；
设newRect = cc.rect(newRectX，newRectY，newRectWidth，new rect height)；
//sprite . sprite frame . set rect(new rect)；
sprite.spriteFrame =newcc。SpriteFrame(this.texture，new rect)；
this . node . width = col width；
this . node . height = col width；
this . is blank = this . oricol = = = colNum-1 & amp；& ampthis . orirow = = = 0；
if(this.isBlank) {
this . node . active = false；
}
}
}
把缩略图想象成一个类，用texture保存图片的纹理，然后通过newcc.spriteframe (this.texture，new rect)；获取矩形区域的纹理，这样可以把一幅大图剪成小图，添加几个属性，保存位置等信息。
然后解决第二个问题，可以采用二维数组的数据结构来保存数据信息私有pieceMap:Array；把切好的小图片一张一张地保存起来，然后随机移动(为了保证图片可以还原，我的方法是按照游戏中规定的移动方式随机移动一个正确放置的小图片数组1000次)，这样图片就可以还原了。
从“”导入{ Piece }。/puzzle piece "；
从“”导入{ PuzzleScene }。/puzzle scene "；
const{ ccclass，property，executeInEditMode } = cc。_ decorator
@ccclass
// @executeInEditMode
exportclassPuzzleBoardextendscc。组件{
@property(cc。预制)
privatepieprefab:cc。Prefab = null
@property(cc。整数)
private colnum:number = 5；
@property(cc。整数)
private colspace:number = 5；
private col width:number = 0；
privateepiemap:Array；
privateblankcpiece:Piece = null；
private puzzle scene:puzzle scene = null；
init(puzzleScene: PuzzleScene) {
this . puzzle scene = puzzle scene；
this . add listeners()；
}
publicreset(colNum？:数字){
this.colNum = colNum
this . col width =(this . node . width-this . colspace *(this . colnum+1))/this . colnum；
this . node . remove all children()；
this . piece map =[]；
for(设x = 0；x
this . piece map[x]=[]；
for(设y = 0；y
设piece node = cc . instantiate(this . piece prefab)；
this . node . addchild(piece node)；
piece node . x = x *(this . col width+this . colspace)+this . colspace；
piece node . y = y *(this . col width+this . colspace)+this . colspace；
this . Piece map[x][y]= Piece node . get component(Piece)；
this.pieceMap[x][y]。init(x，y，this.colNum，this . col width)；
if(this.pieceMap[x][y]。isBlank) {
this . blank piece = this . piece map[x][y]；
}
}
}
this . shuffle()；
}
私人洗牌(){
for(设I = 0；我& lt1000;i++) {
let near pieces = this . getnearpieces(this . blank piece)；
设n = math . floor(math . random()* near pieces . length)；
this . exchange two pice(this . blank piece，near pieces[n])；
}
}
privateonBoadTouch(事件:cc。Event.EventTouch){
let world pos = event . get location()；
设local pos = this . node . converttnodespaar(world pos)；
设x = math . floor((local pos . x-this . colspace)/(this . col width+this . colspace))；
设y = math . floor((local pos . y-this . colspace)/(this . col width+this . colspace))；
this . puzzle scene . onboardtouch(x，y)；
}
publicmovePiece(x，y):boolean{
let piece = this . piece map[x][y]；
let near pieces = this . getnearpieces(piece)；
对于(让近件的近件){
if(nearPiece.isBlank) {
this . exchange two pice(piece，near piece)；
returntrue
}
}
返回false；
}
publicjudgeWin():boolean{
for(设x = 0；x
for(设y = 0；y
如果(！this.pieceMap[x][y]。isRight) {
返回false；
}
}
}
this . blank piece . node . active = true；
returntrue
}
privategetNearPieces(Piece:Piece):Array {
设near pieces =[]；
if(piece . curcol & gt；0) {// left
near pieces . push(this . piece map[piece . curcol-1][piece . currow])；
}
if(piece.curCol
near pieces . push(this . piece map[piece . curcol+1][piece . currow])；
}
if(piece . currow & gt；0) {//底部
near pieces . push(this . piece map[piece . curcol][piece . currow-1])；
}
如果(件.当前
near pieces . push(this . piece map[piece . curcol][piece . currow+1])；
}
returnnearPieces
}
publixchangetwopice(Piece 1:Piece，piece2: Piece){
this . piece map[piece 2 . curcol][piece 2 . currow]= piece 1；
this . piece map[piece 1 . curcol][piece 1 . currow]= piece 2；
[piece1.curCol，piece2.curCol] = [piece2.curCol，piece 1 . curcol]；
[piece1.curRow，piece2.curRow] = [piece2.curRow，piece 1 . currow]；
[piece1.node.position，piece 2 . node . position]=[piece 2 . node . position，piece 1 . node . position]；
}
privateaddslients(){
this.node.on(cc。Node.EventType.TOUCH_END，this.onBoadTouch，this)；
}
privateremoveListeners(){
}
}
要解决第三个问题，这个其实很简单，因为我们已经在thumbnail类中保存了缩略图本身的位置信息，每次移动图片只需要遍历一个二维数组来判断是否在正确的位置，结束游戏？点击链接加入群聊cocos/unity exchange群。
声明:本文发表目的在于传递更多知识，以供交流学习。如来源标注有误或侵犯您的合法权益，请持权属证明与我们联系，我们将及时更正删除。谢谢你。