HarmonyOS - 方舟开发框架ArkUI基于JSAPI实现五子棋游戏

点击play放下棋子时，传入棋子当前位置。play(e){//对于数组中的数据修改，请使用splice方法实现数据绑定变化this.arr.splice(e,1,'1');}上面代码传入1，然后点击显示黑棋，看看会发生什么。当然，到了这里还不够，还需要做交换动作。黑棋走完再走白棋，经过的位置不许再走棋。data中定义holder为当前棋子持有者：1：存放黑棋，默认黑棋先走。-1：存放白色棋子。play(e){if(this.arr[e]=='1'||this.arr[e]=='-1'){console.log('这里已经有棋了');返回假；}//数组中的数据修改，请使用splice方法实现数据绑定变化this.arr.splice(e,1,this.holder);//交易所移动this.holder=this.holder=='1'?'-1':'1';},3.计算胜路我们都知道，要赢棋，必须有5个相同颜色的棋子连成一条线，包括横、竖、斜、斜向左和斜向右四种。那我们就得把这些方法分开，一个一个计算统计。通过上面的序号，我们不难发现几条规律。1、横胜棋的方式横胜棋的方式是五颗棋子每对相差一个值，所以每一个相邻的棋子都是+1和-1的过程。2、纵胜法纵胜法是上下连连。我们知道一排只有15个格子，每个棋子的值相差15个，所以相邻棋子之间有一个+15和-15的过程。3、观察左对角线方向不难发现每对棋子+14和-14的区别。4、右对角线方向也可以看出，每个相邻棋子的差值是+16和16。4、实现棋子胜负的计算。通过上面的对比，是不是瞬间觉得没有那么难了呢？我们只需要计算每一局棋的序号和前一局棋的序号即可。只有五个符合条件的棋子，你就赢得了比赛。实现思路：以黑棋和横棋为例，通过递归算法，计算+1||中是否有黑棋的记录5.如果没有，你还没有赢。如果是5次，则表示您赢了。实现代码如下：//id：当前棋子的序号d：计算方式，例如横为+1和-1，arr为序号累加的结果。计算（id，d，arr）{id=parseInt（id）；if(this.arr[id+d]&&this.arr[id+d]==this.holder){arr.push(id);这个.compute(id+d,d,arr);}else{arr.push(id);}},判断是否获胜的方法：//判断是否获胜getResult(arr){if(arr.length>5){console.log(this.holder+'WinChess');//this.holder为当前下棋的定义方//累计清零arr.length=0;}else{//累计清零arr.长度=0；}}，每次点击下棋，都会调用统计累计次数的方法和计算胜负棋的方法。//横赢方法this.compute(e,1,this.arr1);//arr1是一个明确定义的累积时间数组this.compute(e,-1,this.arr1);this.getResult(this.arr1);结合上面的计算方法，我们其他的棋胜法也可以这样计算。//点击下棋methodplay(e){if(this.isEnd)return;如果（this.arr[e]=='1'||this.arr[e]=='-1'）{控制台。log('这里已经有棋了');返回假；}//数组中的数据修改，请使用splice方法影响数据绑定变化this.arr.splice(e,1,this.holder);//横向win方法this.compute(e,1,this.arr1);this.compute(e,-1,this.arr1);this.getResult(this.arr1);//垂直获胜方法this.compute(e,15,this.arr1);this.compute(e,-15,this.arr1);this.getResult(this.arr1);//右斜取胜法this.compute(e,14,this.arr1);this.compute(e,-14,this.arr1);this.getResult(this.arr1);//左斜取胜法this.compute(e,16,this.arr1);this.compute(e,-16,this.arr1);this.getResult(this.arr1);//交易所移动this.holder=this.holder=='1'?'-1':'1';下面来看看效果吧。是这里吗？不，还没有结束。这里仍然存在一些错误。比如我们水平移动的时候，我们计算两块之间有没有+1和-1的关系，但是如果两块都是14，那15呢？这时候线已经变了，显然不能成立，但是计算结果的方式是成立的。所以我们要解决这个问题，包括倾斜。5.优化计算方法其实无非就是两种结果。一种是绕线。当+1时，换行到第一列值，-1时，换行到最后一列值。然后我们把第一列和最后一列分开拉出来比较。第一列是否存在+1、-14、+16的值，存在则不累加。最后一列是否存在-1、+14、-16处的值，存在则不累加。这里为什么没有+15和-15呢，因为垂直方向不存在这个问题。让我们用代码来实现它。//id:就是原来的id+d，d:就是计算方法。scree(id,d){if((d==1&&this.colOne.indexOf(id)>-1)||(d==-1&&this.colEnd.indexOf(id)>-1)||(d==14&&this.colEnd.indexOf(id)>-1)||(d==-14&&this.colOne.indexOf(id)>-1)||(d==16&&this.colOne.indexOf(id)>-1)||(d==-16&&this.colEnd.indexOf(id)>-1)){返回假；}returntrue;}，最后我们加上这个判断条件可以是this.scree(id+d,d)。计算（id，d，arr）{id=parseInt（id）；if(this.arr[id+d]&&this.arr[id+d]==this.holder&&this.scree(id+d,d)){arr.push(id);this.compute(id+d,d,arr);}else{arr.push(id);}}，最终效果的源码地址：https://gitee.com/yango520/gobang总结该方法是使用div+css+js实现的双人对战游戏。在使用css的时候，发现和web端的属性相比，还是少了很多。比如在画棋盘的时候，想用::before和::after选择器来画，但是发现目前没有这个属性，想画一个弧形高光的好看的棋子，我想用内阴影来实现，但是内阴影还不支持。不过相信后面会更新，让web前端开发上手HarmonyOSJSAPI会容易很多。更多信息请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com