cocos五子棋小游戏

五子棋开发 1. 准备好开发资源 棋盘棋子 文字 2. 将资源图片背景依次添加，首先是整个页面的背景图片节点bg 然后是添加棋盘图片节点board bg，在棋盘图片节点下创建一个空节点board 在空节点board下将整个区域大小Size更改为550，550并且将锚点Anchor设置为0，0左下角 确定最初始的棋子坐标 3. 创建两个预制节点 dot（存放触摸点）和piece（显示棋子图片） dot是生成棋盘上触摸点用的 所以不需要显示节点后面可以将透明度Opacity更改为0 piece节点是用来将dot图片显示为棋子图片的 5. 创建脚本： Board脚本：是存放游戏的逻辑 查找棋子当前位置是否有棋子存在，放置有空的也判断成功getHaveQiZi 判断是否五连子lu 生成坐标棋盘getBoardPos 添加dot触摸点initTouchDots 换肤功能hfBtn 放置棋子功能putChess 查看当前位置是否可以 下棋check 统计下棋步数gainCount 游戏结束gameOver 显示战绩records 存储战绩recordss 重新加载游戏onBtnAgain update 游戏成功gameSuccessfulText 倒计时countDownTime 播放下棋音效playDownAudio 播放下棋背景音乐playBGMAudio 移动棋子位置实现动画效果actionYD 黑棋白棋加分scores 生成黑棋动画预制spawnAnimRoot 生成白棋动画预制 spawnAnimRoots 获取当前页面时间hqTime Piece脚本：用来放置棋子 棋子放置时显示黑白子图片 换肤按钮btn 设置棋子放入黑白棋图片setPic 更改皮肤模式changeSkin 设置棋子放入水果图片setPicHF 设置下标setXY 获取下标getXY 获取换肤节点getHuanFu TouchDot脚本：设置点击事件 点击方法下棋子传值x y i j 在onLoad添加点击事件 点击事件onTouchStart 设置下标值setXY 下入棋子initBoard SetAudio脚本： 设置声音控制 弹窗页面动画展示show_tc 隐藏页面动画hide_tc 播放下棋音效playDownAudio 关闭下棋音效stopDownAudio 播放下棋音乐playBGMAudio 关闭下棋音乐stopBGMAudio Bar脚本：进度条展示 在onLoad中设置计时器 进度条减少changeProgressBar One脚本： 存放图片1 当计时器达到最后一秒展示图片 动画一的播放actionOne 计时器countDownTime Two脚本： 存放图片2 当计时器达到最后两秒展示图片 动画二的播放actionOne 计时器countDownTime Three脚本： 存放图片3 当计时器达到最后三秒展示图片播放音效 动画三的播放actionOne 计时器countDownTime 播放最后三秒音效playDownAudio ScoreAnim脚本：播放黑棋动画 播放动画reuse 销毁动画despawn ScoreAnims脚本：播放黑棋动画 播放动画reuse 销毁动画despawn Win脚本：战绩弹窗展示隐藏 展示show_tc 隐藏hide_tc 6. 创建脚本Board （1）在onLoad方法中进行初始化操作 调用倒计时方法 this.countDownTime() 禁止显示fps cc.debug.setDisplayStats(false); 初始化水平线数量 const hLines = 21 初始化垂直线数量 const vLines = 21 初始化每块区域宽高 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(); 初始化游戏累计步数条件 this.tiaoJian = false; 初始化重新加载按钮隐藏 this.btnAgain.active = false; 初始化游戏步数 this.count = 1; 初始化棋子得分数 this.hei = 0;this.bai = 0; 初始化战绩得分时间 this.today = '' 初始化记录棋盘数组中有几个棋子 this.sum = 1; 初始化棋盘上已经下棋的棋子坐标、颜色值、下标数组 this.putChess = []； 初始化五连子数组this.resultTab = []; 初始化倒计时 this.time = 60; 初始化四条线路 横线this.luHTab=[cc.v2(0,0),cc.v2(1,0),cc.v2(2,0),cc.v2(3,0),cc.v2(4,0)....] 竖线this.luSTab=[cc.v2(0,0),cc.v2(0,1),cc.v2(0,2),cc.v2(0,3),cc.v2(0,4)....] 正斜线this.luZXTab=[cc.v2(0,4),cc.v2(1,3),cc.v2(2,2),cc.v2(3,1),cc.v2(4,0)....] 反斜线this.luHTab=[cc.v2(0,16),cc.v2(1,17),cc.v2(2,18),cc.v2(3,19),cc.v2(4,20)....] 调用背景音乐 this.playBGMAudio(); 初始化换肤按钮控制变量this.flag = 0; 初始化存放棋子节点数组 this.pic = []; 初始化黑白分数数组this.scoreHW = []; 初始化动画 this.currentAnimRoot = null; 初始化动画节点 this.scorePool = new cc.NodePool('ScoreAnim'); （2）getHaveQiZi方法 ：因为需要判断当前棋子下标是否有棋子所以需要传入两个参数给方法，创建一个变量have用来判断是否有棋子存在，利用for循环遍历棋盘数组this.boardPosArray，因为该数组中有一个参数1代表有棋子 0代表没有棋子 利用if语句去判断如果存在将下标值赋值给另外的变量用来做比较 如果传入的两个值与循环到数组中的下标一样则将have更改为true 最后返回have （3）getBoardPos方法：利用水平线垂直线 通过for双循环的方法生成棋盘和棋盘坐标 let两个变量x,y存放坐标值 最后将生成的坐标、标记点、下标 push到数组this.boardPosArray中 ，注意下标 i j的位置要和思维逻辑一样 一条横线上y坐标不变和下标中的y也就是j 不能变的 竖线上x坐标不变 正斜 i+j == i+1 + j+1 反斜上i-j = i+1 - j+1. （4）initTouchDots方法：利用for循环遍历棋盘数组this.boardPosArray 棋盘有多少个点就要有多少个触摸点dot 创建变量touchDot = cc.instantiate(this.touchDotPrefab); 复制预制节点dot给变量touchDot 设置节点透明度不显示 touchDot.opacity = 0；在每一个循环到的节点上添加dot预制节点 this.node.addChild(touchDot); 将每一个touchDot节点与TouchDot脚本建立联系 touchDot.getComponent('TouchDot').initBoard(this); 把当前的节点传入到TouchDot脚本中的initBoard内方便下入棋子 调用TouchDot脚本中的setXY方法 从其中接收到设置的函数下标i j 并将i j的值给到棋盘数组boardPosArray 在Board脚本中与TouchDot建立联系 getComponent().方法 （touchDot.getComponent('TouchDot').setXY(this.boardPosArray[i][3],this.boardPosArray[i][4])）; 最后利用数组设置二维坐标值 touchDot.setPosition(this.boardPosArray[i][0], this.boardPosArray[i][1]) （5）putPiece方法：首先先判断下这个点是否已经有棋子 利用check方法做if判断 如果有直接返回 如果没有则复制预制资源给到变量piece 在当前节点下添加棋子预制节点this.node.addChild(piece); 设置棋子的坐标位置piece.setPosition(x, y); 利用getComponent方法获取到Piece脚本中的setXY方法下的i j下标值 piece.getComponent("Piece").setXY(i,j); 将棋子节点push到数组this.pic中存放棋子节点 将当前下棋方赋值给全局变量mycp myCP= this.currentPlayer;， 调用播放下棋音效方法 this.playDownAudio()， 最后判断下currentPlayer下棋方是谁 如果是黑则换为白 再利用if语句更改this.currentPlayer当前棋子为黑则下一个改为白色，将获取到的当前棋子坐标 下标颜色值全部push到数组putChess里面存放起来。 调用方法lu进行每下一个棋子就去这四条路中判断是否存在五连子 this.lu(this.luHTab); this.lu(this.luSTab); this.lu(this.luZXTab); this.lu(this.luFXTab); （6）check方法：判断当前是否可以下棋子 传入下入棋子的坐标值x，y 循环判断棋盘数组this.boardPosArray 再用if语句 先判断当前位置节点坐标是否与棋盘数组中的xy坐标一�