微信小程序五子棋游戏板 重置 游戏实现方法[带演示源代码下载]

本文介绍了微信小程序五子棋游戏的棋盘、重置和游戏的实现方法。分享给大家参考，如下：

演示下载

五子棋游戏，后悔棋DEMO

翻译

分析

1.使用微信小程序的画布制作五子棋；2.确定棋盘的大小和遍数；3.画一个棋盘——根据棋盘的宽高和网格数计算间距，同时保存坐标点；4.黑边和白边-定义一个布尔变量来表示它们各自的身份；5.重置棋盘-重新开始；6.通过判断现在的棋手，在后悔棋的时候做出改变。

画棋盘

draw line(arr){ arr . foreach(current={ this . CTX . setfillstyle(this . line color)；this . CTX . BeginPath()；this . CTX . line width=1；this.ctx.moveTo(当前[0]。x，当前[0]。y)；for(var I=1；一.当前长度；i ) { this.ctx.lineTo(当前[i]。x，当前[i]。y)；} this . CTX . stroke()；this . CTX . closepath()；this . CTX . draw(true)；});} draw棋盘(){ //每个网格的宽度和高度var everyLen=this.everyLen//标记坐标的数量var count=0；//保存垂直方向的坐标var arrY=[]；//双循环计算每个坐标的水平和垂直坐标(var I=0；i=this.typei ){ var arr=[]，arr 0=[]；for(var j=0；j=this.typej ){计数；arr . push({ y : this . margin I * everyLen，x: this.margin j * everyLen，points :j，pointY: i，index : count })；arr 0 . push({ x : th . margin I * everylen，y : th . margin j * everylen })}//空画布this.ctx.clearrect (0，0，this.width，this . height)；//保存水平和垂直坐标this . everypoint . push(arr)；arry . push(arr 0)；}//画水平线this . draw line(this . EveryPoint)；//绘制垂直线this . draw line(arrY)；}绘制当前单击坐标的棋子

//获取当前点击位置的坐标getPosition(e){ return { x : e . touch[0].触摸[0]，x，y : e .y }；} //将当前坐标和棋盘坐标数组对比，找到精确坐标checkPoint(arr，po){ for(var I=0；我这个。this . EveryPoint . LengTii){ for(var j=0；每一点.长度；j){ if(数学。ABS(这个。每一点.每个点数学y - po.y) this.everyLen/2){ //将棋盘精确坐标保存到当前持棋方数组由…改编推(这个。每一点[I][j])；//同时删除棋盘坐标数组的该值，表示当前位置已经存在棋子每一点。拼接(j，1)；打破；} } } } //绘制当前坐标棋子这个。CTX。setfillstyle(颜色)；这个。CTX。begin path()；this.ctx.arc(opts.x，opts.y，this.r，0，Math .PI * 2，真);这个。CTX。close path()；这个。CTX。fill()；这个。CTX。画(真)；} drawLastPoint(类型){ //判断是黑方持棋还是白方持棋，进行绘制棋子if(type=='AI'){ this .AIPoint.forEach((current，index)={ this.drawCle(current，' # 000000 ')；});} else { this。我的观点。foreach((current，index)={ this.drawCle(current，' # ffffff ')；});} }这个。佩奇。changettouchstart=function(e){//判断游戏是否开始如果（自我. START_GAME){ //获取当前坐标var newPo=self。get position(e)；//获取棋盘精确坐标if(！自我。布尔莱赛尔夫。boolmy){ self。检查点(自我。mypoint，新po)；} else if (self.boolAI！自我。boolmy){ self。检查点(自我.AIPoint，NewPo)；} } }这个。佩奇。changeTouchend=函数(e){ if(self .START_GAME) { //绘制棋子if(！自我。布尔莱赛尔夫。boolmy){ self。boolai=！self . booleaself . boolmy=！self.boolMyself。绘制最后一点(“采购订单”)；//判断白棋是否五子胜利如果(自我。我的观点。长度=5个自我。检查赢家(自我。mypoint)){ wx。显示吐司({ title : '白棋胜利!'});自我. START _ GAME=false } } else if(self . boolai！self.boolMy) { self.boolAI=！self . booleaself . boolmy=！self.boolMyself。画出最后一点(“AI”)；//判断黑棋是否五子胜利如果（自我艾点。长度=5个自我。支票获得者(自我.AIPoint)){ wx。ShowToast({ title : '黑棋胜利!'});自我START _ GAME=false} } } }五子棋胜利方判断

五子棋胜利就是横向、纵向、45度斜线方向、135度斜线方向连成五个颜色相同的棋子，为了更加清楚的表示，我将四个方向的判断做四个函数处理。

横向检查(arr，po){//横向检查var len=arr。长度-1；定义变量计数=1;//东for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ){ if(arr[j]).pointX==po.pointX - i arr[j].PointY==po。PointY){ count；} } } if (count==this .CHISE _ LEN){ 0返回true} //西for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX i arr[j].PointY==po。PointY){ count；} } } if (count==this .CHISE _ LEN){ 0返回真实} }人像(arr，po){//纵向检查var len=arr。长度-1；定义变量计数=1;//南for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX arr[j].pointY==po。pointY-I){ count；} } } if (count==this .CHISE _ LEN){ 0返回true} //北for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX arr[j].PointY==po。PointY I){ count；} } } if (count==this .CHISE _ LEN){ 0返回true} } checkNortheast(arr，po){//45度var len=arr。长度-1；定义变量计数=1;//西南for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX - i arr[j].pointY==po。pointY-I){ count；} } } if (count==this .CHISE _ LEN){ 0返回true} //东北for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX i arr[j].PointY==po。PointY I){ count；} } } if (count==this .CHISE _ LEN){ 0返回真实} }西北(arr，po){//135度var len=arr。长度-1；定义变量计数=1;//西北for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX - i arr[j].PointY==po。PointY I){ count；} } } if (count==this .CHISE _ LEN){ 0返回true} //东南for(var I=1；我喜欢这个. CHESS _ LENI){ for(var j=0；j lenj ) { if (arr[j]).pointX==po.pointX i arr[j].pointY==po。pointY-I){ count；} } } if (count==this .CHISE _ LEN){ 0返回true } } CheckWinner(arr){ var CurrentPo=arr[arr。长度-1]；var win 1=这个。检查遍历(arr，CurrentPo)；var win 2=这个。支票人像(arr，CurrentPo)；var win 3=这个。支票东北(arr，当前po)；var win 4=这个。支票西北(arr，当前po)；如果(win 1 | | win 2 | | win 3 | | win 4){返回true} else {返回false} }重置棋盘

重新匹配bard(){ this。佩奇。setdata({ Ishide : false })；这个。init()；}这个。佩奇。更改重置=功能(e){ self。重新匹配bard()；}注意

1.绘制棋盘前必须清空帆布，方便最后的重新开始和重置棋盘；2.对当前棋子的坐标四个方向的判断，采用的原始坐标而不是计算后的绘制坐标；3.在判断持棋人时，各自采用一个值，方便添加悔棋功能。

只是实现了简单的对下五子棋功能，后续添加悔棋、记分、记时等功能！

同时向判断胜利的函数可以合并为一进行优化！

希望本文所述对大家微信小程序开发有所帮助。