数据结构方面，由于AS并不支持真正的多维数组，你可以用数组的数组来存放N*N的方块:
var num:Number=10
var blocks:Array=new Array()
var count:Number=0
for(var i:Number=0i<numi++){
var row:Array=new Array()
for(var j:Number=0j<numj++){
row.push(count++)
}
blocks.push(row)
}
function randomMove(rowIndex:Number,colIndex:Number){
..
}
Good Luck
编写拼图按钮的监听器类，该类为主类的内部类。在actionPerformed()方法中，首先获得空白按钮和被单击按钮的所在行和列，
然后判断这两个按钮是否相邻，如果相邻则将被单击按钮显示的图片移动到空白按钮上，并令被单击按钮显示空白图片，以及将在类中声明的空白按钮对象设置为被单击的按钮对象
思路就这样，我给你个示例代码，你参考参考哦：
class ImgButtonAction implements ActionListener {
public void actionPerformed(ActionEvent e) {
String emptyName = emptyButton.getName()
char emptyRow = emptyName.charAt(0)
char emptyCol = emptyName.charAt(1)
JButton clickButton = (JButton) e.getSource()
String clickName =clickButton.getName()
char clickRow = clickName.charAt(0)
char clickCol = clickName.charAt(1)
if(Math.abs(clickRow - emptyRow) + Math.abs(clickCol - emptyCol) == 1) {
emptyButton.setIcon(clickButton.getIcon())
clickButton.setIcon(new ImageIcon("img/00.jpg"))
emptyButton = clickButton
}
}
}
大概就这样了
希望对你有帮助哈
简介使用cocos creator2.x版本制作的拼图游戏, 移动图块, 还原最终的样子
开始, 我们分析一下这个游戏的几个要点 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交流群】
声明 ：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢
