棋类游戏中的棋子摆放逻辑

创建节点

代码编写

其实要点就一句话：我们看到的不应是棋盘，而是坐标。

现在通过下面的五子棋(或围棋)实例来看下如何理解这句话。

运行效果如下：

Cocos Creator版本：2.2.2

后台回复"棋"，获取该项目完整文件。

创建节点

1. bg为Sprite类型节点，作为场景背景。

2. board bg也是Sprite类型节点，作为棋盘背景。

3. board虽然为空节点，但是非常关键，因为棋子都是添加到这个节点上的。它的大小应等于棋盘上可落子区域大小：

为方便开发，我们可以将该节点的锚点设置为(0, 0)，那么对棋子来说左下角就是坐标原点了。

4. dot预制也会添加到board节点上。棋盘上有多少个点，就会有多少个预制。每个预制都会进行触摸监听，玩家点击到哪个dot，那么我们就在相应的dot位置上放一个棋子。

5. piece预制用来当做棋子。

代码编写

首先我们新建一个Board.js脚本，添加属性并编写onLoad方法内容：

// Board.js
properties: {piecePrefab: cc.Prefab,                  // 棋子预制touchDotPrefab: cc.Prefab                // 触摸点预制
},// LIFE-CYCLE CALLBACKS:onLoad () {cc.debug.setDisplayStats(false);const hLines = 15;                       // 水平线数量const vLines = 15;                       // 垂直线数量this.blockWidth = (this.node.width / (vLines-1)).toFixed(2);     // 每块区域的宽度this.blockHeight = (this.node.height / (hLines-1)).toFixed(2);   // 每块区域的高度this.boardPosArray = [];                 // 棋盘上所有点的坐标this.getBoardPos(hLines, vLines);       this.currentPlayer = 'BLACK';            // 当前着步方this.initTouchDots();                    // 添加所有触摸点
},

1. hLines和vLines常量用来保存棋盘上的水平线和垂直线数量，五子棋(围棋)的棋盘是一个正方形，所以横竖线数量相等，都为15。

2. 既然已经知道了可落子区域的总大小和横竖线数量，那么我们就可以求出每块小区域的大小了。

3. boardPosArray数组用来存储棋盘上各个点的坐标。而获取各个点的坐标就在getBoardPos方法中：

// Board.js
getBoardPos(hLines, vLines) {          for (let i=0; i<hLines; i++) {for (let j=0; j<vLines; j++) {let x = j*this.blockWidth;let y = i*this.blockHeight;this.boardPosArray.push([x, y, '0']);}}
},

boardPosArray数组的每个元素包含一个x坐标，一个y坐标以及用来判断当前位置是否存在棋子的标识，初始化时都是'0'。

4. currentPlayer变量用来存储当前的着步方。

5. initTouches用来添加触摸点，方法编写如下：

// Board.js
initTouchDots() {for (let i=0; i<this.boardPosArray.length; i++) {let touchDot = cc.instantiate(this.touchDotPrefab);touchDot.opacity = 0;this.node.addChild(touchDot);touchDot.getComponent('TouchDot').initBoard(this);touchDot.setPosition(this.boardPosArray[i][0], this.boardPosArray[i][1])}
},

触摸点是不能被看到的，所以透明度需要设为0。笔者这里给大家看下没有设置为透明时的样子：

该预制上挂着的TouchDot.js脚本编写如下：

// TouchDot.js
cc.Class({extends: cc.Component,properties: {},// LIFE-CYCLE CALLBACKS:onLoad () {this.node.on('touchstart', this.onTouchStart, this);},initBoard(board) {this.board = board;},onTouchStart() {this.board.putPiece(this.node.x, this.node.y);}
});

initBoard方法用于获取Board.js脚本实例。在onTouchStart方法中我们调用Board.js中的putPiece方法直接将棋子放置到该触摸点的位置。

putPiece方法编写如下：

// Board.js
putPiece(x, y) {// 放置棋子，并更新着步方xxlet is_ok = this.check(x.toFixed(2), y.toFixed(2));               if (!is_ok)return;let piece = cc.instantiate(this.piecePrefab);this.node.addChild(piece);piece.getComponent('Piece').setPic(this.currentPlayer);piece.width = this.blockWidth*0.9;piece.height = this.blockHeight*0.9;piece.setPosition(x, y)if (this.currentPlayer == 'BLACK') {this.currentPlayer = 'WHITE';}else {this.currentPlayer = 'BLACK';}
},

在该方法中，我们首先要调用check方法判断当前位置是否已经有棋子了，如果没有那么就在该位置上放一个棋子，放置完毕则更改着步方。

check方法编写如下：

// Board.js
check(x, y) {// 查看当前位置是否可以着步for (let i=0; i<this.boardPosArray.length; i++) {if (x==this.boardPosArray[i][0] && y==this.boardPosArray[i][1]){if (this.boardPosArray[i][2]=='0') {// 可以放置，并更新数组this.boardPosArray[i][2] = '1';return true;}else {// 已有棋子，不可放置return false;}}}
}

其实就是循环boardPosArray数组，判断该位置上是'0'还是'1'，如果是前者，那么表明可以放置。

注：笔者这里的判断只是给大家进行简单进行演示，并不一定符合下棋规则。比如围棋中的某个空位落子后会直接没"气"(也就是说该空位已经被围死了)，那么也不能在这个空位上落子对吧。

棋子预制上挂着的Piece.js脚本编写如下：

// Piece.js
cc.Class({extends: cc.Component,properties: {blackPic: cc.SpriteFrame,whitePic: cc.SpriteFrame},// LIFE-CYCLE CALLBACKS:onLoad () {},setPic(currentPlayer) {if (currentPlayer=='BLACK') {this.node.getComponent(cc.Sprite).spriteFrame = this.blackPic;}else if (currentPlayer=='WHITE') {this.node.getComponent(cc.Sprite).spriteFrame = this.whitePic;}}
});

blackPic和whitePic就是黑白棋子图片，而setPic方法会根据当前的着步方来设置相应的棋子图片。

P.S. 虽然笔者这里用的是五子棋(或围棋)这个例子，但是开发逻辑同样适用于其他棋类，比如象棋。

好，那本节教程就到这，希望大家有所收获~

《Cocos Creator游戏实战》棋类游戏中的棋子摆放逻辑相关推荐

Cocos Creator入门实战：桌球小游戏
Cocos Creator入门实战:桌球小游戏转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/90035153 本篇主要是希望能够通过C ...
Cocos Creator 开发实战——篮球物理游戏
Cocos Creator 开发实战--篮球物理游戏知识点教程基础背景搭建物理系统篮网制作篮球结语 Cocos Creator 开发实战--篮球物理游戏本篇文章教大家实现篮球物理游戏最 ...
Cocos Creator入门实战：桌球小游戏
本文作者:BigBear 多年游戏行业研发经验精通Unreal.CocosCreator游戏引擎参与过多款手游.端游项目的研发 Cocos Creator入门实战:桌球小游戏本篇主要是希望能够通 ...
cocos creator开发微信小游戏(五)贪吃蛇大作战
目录小游戏介绍小游戏cocos creator场景图小游戏部分JS代码开发中碰到的问题工程及说明小游戏介绍贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
Cocos Creator发布微信小游戏包内体积过大问题
1.初识设置微信开发工具和js编辑器 3.5.2 :Cocos Creator perferences 2.Cocos Creator发布微信小游戏包内体积过大问题 2.1 已不可取:搭建本机服务器 ...
用 Cocos Creator 制作平台跳跃游戏
前言平台跳跃类游戏如<超级马里奥><Celeste蔚蓝>等,非常考验玩家的操作和判断,有着非常本真的游戏乐趣.这类游戏乍一看,挺容易做的,但是要做好却不太容易.今天,我将使用 ...
cocos creator实例--实现FlappyBird游戏的基本功能 | 附代码
FlappyBird是早期的早IOS上的一款非常受欢迎的像素游戏. 游戏玩法: 点击屏幕控制小鸟上下飞行:小鸟在飞行的过程中,碰撞到管子就结束游戏,飞过一根管子分数加1: 游戏效果: 实现逻辑介绍: ...
cocos creator 开发浅塘游戏(1) 软件安装
cocos creator 开发浅塘游戏文章目录 cocos creator 开发浅塘游戏一.浅塘游戏二.使用软件 1.cocos creator 2.vs code 一.浅塘游戏浅塘是一款华 ...
cocos creator 横版射击游戏突击对决H5+安卓+IOS三端源码
cocos creator 横版射击游戏突击对决H5+安卓+IOS三端源码,多关卡,开发脚本为js方便扩展和阅读,支持cocos creator2.X版本,完整的源码可直接运营. 源码下载链接 co ...

《Cocos Creator游戏实战》棋类游戏中的棋子摆放逻辑

棋类游戏中的棋子摆放逻辑

创建节点

代码编写

《Cocos Creator游戏实战》棋类游戏中的棋子摆放逻辑相关推荐

最新文章

热门文章