下面我给你个游戏思路吧...

拼图这个

一,游戏思路是很简单的...

每个碎片都有一个有序号.每移动一次都检测一下所有的碎片是否都按有序号排列.是就过关...原理就这么简单...

打个比方: 我把一张图 打散成N片....每一片都有一个序号,比如:1,2,3

当用户移动一下 就检测是否所有的碎片已按序号排好,排好就过关...

二,技术思路:(以下我写的是伪代码,比如:(obj.style.width/n),那肯定得不到结果的,因为obj.style.width是个字符串.应该是:parseInt(obj.style.width)/n

1,打散图片,如何打散碎片呢?

这个其实可以用JS做一个FOR循环 ,为正张图片铺上等大小的格子(div).当然你会用(obj.style.width/n)这样计算.每一个格当前的 div[i].obj.offsetTop-img.offsetTop ,div[i].offsetLeft-img.offsetLeft..这时按照这个可以为每一个碎片DIV加上一个background-image:url(xxx)position:x,y当然 这里的x,y你应该知道是什么了吧..这样就把图片打散到每个格子里了..

2,如何移动.这个不用我说了吧.当然是做DIV碎片的时候 多做一个出来,而且是空白的,也就是没背景的..

3,打乱.这个也很简单,执行一次随机 随机地把它们的位置调换就行了...

作为一个游戏,我只能为你提供思路到这了...一整套的思路

开始, 我们分析一下这个游戏的几个要点 1, 是如何将一张完整的图片分成3*3 5*5个小图, 并且这些小图要可以保存自己的位置信息, 等一些属性 2, 是如何表示小图合集的位置, 用什么数据结构保存, 且怎么让图片逻辑, 与数据逻辑对应 3, 是如何判断游戏结束 

上图是游戏的场景结构, 可以看到2.x版本和1.x版本有一些区别, 最突出的就是新增了一个默认的carmera结点 这个我会在别的帖子内仔细介绍, 这里不再多说 

首先我们解决第一个问题, 如何将一个大图切成一个个小图, 并让这个小图保存一些属性值, 我们先新建一个脚本, puzzlePiece.ts, 

const{ ccclass, property } = cc._decorator

@ccclass

exportclassPieceextendscc.Component{

@property({

type: cc.Texture2D

})

privatetexture: cc.Texture2D =null

publicoriCol: number

publicoriRow: number

publiccurCol: number

publiccurRow: number

publicisBlank:boolean

publicgetisRight(){

returnthis.curCol ===this.oriCol &&this.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.addComponent(cc.Sprite)

// 升级2.0后setRect失效

// sprite.spriteFrame = new cc.SpriteFrame(this.texture)

// let rect = sprite.spriteFrame.getRect()

let rect = cc.rect(0,0,this.texture.width,this.texture.height)

let newRectWidth = rect.width / colNum

let newRectHeight = rect.height / colNum

let newRectX = col * newRectWidth

let newRectY = (colNum - row -1) * newRectHeight

let newRect = cc.rect(newRectX, newRectY, newRectWidth, newRectHeight)

// sprite.spriteFrame.setRect(newRect)

sprite.spriteFrame =newcc.SpriteFrame(this.texture, newRect)

this.node.width = colWidth

this.node.height = colWidth

this.isBlank =this.oriCol === colNum -1&&this.oriRow ===0

if(this.isBlank) {

this.node.active =false

}

}

}

将小图看做一个类, 使用texture保存图片纹理,在通过new cc.SpriteFrame(this.texture, newRect)获取某一个矩形区域内的纹理, 这样就可以把一张大图切成一张张小图, 并添加几个属性, 保存位置和其他的信息 

那么开始解决第二个问题, 我们可以采取二维数组的数据结构保存数据信息private pieceMap: Array讲一个个切好的小图保存在内, 然后随机移动(为了保证图片可以还原, 我采取的方法是将一个正确摆放好的小图数组, 按照游戏规定的移动方式随机移动1000次), 这样图片一定可以被还原

import{ Piece } from"./PuzzlePiece"

import{ PuzzleScene } from"./PuzzleScene"

const{ ccclass, property, executeInEditMode } = cc._decorator

@ccclass

// @executeInEditMode

exportclassPuzzleBoardextendscc.Component{

@property(cc.Prefab)

privatepiecePrefab: cc.Prefab =null

@property(cc.Integer)

privatecolNum: number =5

@property(cc.Integer)

privatecolSpace: number =5

privatecolWidth: number =0

privatepieceMap: Array

privateblankPiece: Piece =null

privatepuzzleScene: PuzzleScene =null

init(puzzleScene: PuzzleScene) {

this.puzzleScene = puzzleScene

this.addListeners()

}

publicreset(colNum?: number){

this.colNum = colNum

this.colWidth = (this.node.width -this.colSpace * (this.colNum +1)) /this.colNum

this.node.removeAllChildren()

this.pieceMap = []

for(let x =0x

this.pieceMap[x] = []

for(let y =0y

let pieceNode = cc.instantiate(this.piecePrefab)

this.node.addChild(pieceNode)

pieceNode.x = x * (this.colWidth +this.colSpace) +this.colSpace

pieceNode.y = y * (this.colWidth +this.colSpace) +this.colSpace

this.pieceMap[x][y] = pieceNode.getComponent(Piece)

this.pieceMap[x][y].init(x, y,this.colNum,this.colWidth)

if(this.pieceMap[x][y].isBlank) {

this.blankPiece =this.pieceMap[x][y]

}

}

}

this.shuffle()

}

privateshuffle(){

for(let i =0i <1000i++) {

let nearPieces =this.getNearPieces(this.blankPiece)

let n = Math.floor(Math.random() * nearPieces.length)

this.exchangeTwoPiece(this.blankPiece, nearPieces[n])

}

}

privateonBoadTouch(event: cc.Event.EventTouch){

let worldPos = event.getLocation()

let localPos =this.node.convertToNodeSpaceAR(worldPos)

let x = Math.floor((localPos.x -this.colSpace) / (this.colWidth +this.colSpace))

let y = Math.floor((localPos.y -this.colSpace) / (this.colWidth +this.colSpace))

this.puzzleScene.onBoardTouch(x, y)

}

publicmovePiece(x, y):boolean{

let piece =this.pieceMap[x][y]

let nearPieces =this.getNearPieces(piece)

for(let nearPiece of nearPieces) {

if(nearPiece.isBlank) {

this.exchangeTwoPiece(piece, nearPiece)

returntrue

}

}

returnfalse

}

publicjudgeWin():boolean{

for(let x =0x

for(let y =0y

if(!this.pieceMap[x][y].isRight) {

returnfalse

}

}

}

this.blankPiece.node.active =true

returntrue

}

privategetNearPieces(piece: Piece): Array {

let nearPieces = []

if(piece.curCol >0) {// left

nearPieces.push(this.pieceMap[piece.curCol -1][piece.curRow])

}

if(piece.curCol

nearPieces.push(this.pieceMap[piece.curCol +1][piece.curRow])

}

if(piece.curRow >0) {// bottom

nearPieces.push(this.pieceMap[piece.curCol][piece.curRow -1])

}

if(piece.curRow

nearPieces.push(this.pieceMap[piece.curCol][piece.curRow +1])

}

returnnearPieces

}

publicexchangeTwoPiece(piece1: Piece, piece2: Piece){

this.pieceMap[piece2.curCol][piece2.curRow] = piece1

this.pieceMap[piece1.curCol][piece1.curRow] = piece2

[piece1.curCol, piece2.curCol] = [piece2.curCol, piece1.curCol]

[piece1.curRow, piece2.curRow] = [piece2.curRow, piece1.curRow]

[piece1.node.position, piece2.node.position] = [piece2.node.position, piece1.node.position]

}

privateaddListeners(){

this.node.on(cc.Node.EventType.TOUCH_END,this.onBoadTouch,this)

}

privateremoveListeners(){

}

}

解决第三个问题, 其实这个很简单, 因为我们已经在小图类中保存了小图本身的位置信息, 我们只需要,每次移动图片 都遍历一个二维数组判断其是否在正确的位置, 判断成功, 结束游戏  点击链接加入群聊【cocos/unity交流群】

声明 ：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢