通信工程网站建设/郑州网络运营培训

简介使用cocos creator2.x版本制作的拼图游戏, 移动图块, 还原最终的样子

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

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

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

  const { ccclass, property } = cc._decorator;@ccclassexport class Piece extends cc.Component { @property({ type: cc.Texture2D }) private texture: cc.Texture2D = null; public oriCol: number; public oriRow: number; public curCol: number; public curRow: number; public isBlank: boolean; public get isRight() { return this.curCol === this.oriCol && this.curRow === this.oriRow; } public init(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 = new cc.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// @executeInEditModeexport class PuzzleBoard extends cc.Component { @property(cc.Prefab) private piecePrefab: cc.Prefab = null; @property(cc.Integer) private colNum: number = 5; @property(cc.Integer) private colSpace: number = 5; private colWidth: number = 0; private pieceMap: Array; private blankPiece: Piece = null; private puzzleScene: PuzzleScene = null; init(puzzleScene: PuzzleScene) { this.puzzleScene = puzzleScene; this.addListeners(); } public reset(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 = 0; x < this.colNum; x++) { this.pieceMap[x] = []; for (let y = 0; y < this.colNum; y++) { 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(); } private shuffle() { for (let i = 0; i < 1000; i++) { let nearPieces = this.getNearPieces(this.blankPiece); let n = Math.floor(Math.random() * nearPieces.length); this.exchangeTwoPiece(this.blankPiece, nearPieces[n]); } } private onBoadTouch(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); } public movePiece(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); return true; } } return false; } public judgeWin(): boolean { for (let x = 0; x < this.colNum; x++) { for (let y = 0; y < this.colNum; y++) { if(!this.pieceMap[x][y].isRight) { return false; } } } this.blankPiece.node.active = true; return true; } private getNearPieces(piece: Piece): Array { let nearPieces = []; if (piece.curCol > 0) { // left nearPieces.push(this.pieceMap[piece.curCol - 1][piece.curRow]); } if (piece.curCol < this.colNum - 1) { // right 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 < this.colNum - 1) { // top nearPieces.push(this.pieceMap[piece.curCol][piece.curRow + 1]); } return nearPieces; } public exchangeTwoPiece(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]; } private addListeners() { this.node.on(cc.Node.EventType.TOUCH_END, this.onBoadTouch, this); } private removeListeners() { }} 

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

作者：Rainy_Night