五子棋两人对战

　　头条创作挑战赛
　　banner
　　这是一个关于五子棋实现的系列文，本文是第1篇。总共会分成两篇文章：五子棋JavaScript实现两人对战：讲解如何实现两人对战，当然你可以自己跟自己玩五子棋JavaScript实现人机对战：讲解如何实现人机对战，着重人机输赢算法
　　当然，本文的两人对战，你找不到第二个玩伴的话，那你可以左手和右手玩功能概览棋盘大小自定义白棋先下不支持悔棋提示当前下棋方（黑子白子）输赢判断
　　代码即文档，读者可在体验地址章节进入码上掘金大屏跟读代码，相信读者能有所收获。
　　读者能来个点赞，那就是对笔者的最大肯定
　　讲解
　　我们制定简单的五子棋规则：在五子棋中，双方各执一个颜色的棋子，空盘开局，交替落子且每次只能落子一枚。如果同种颜色的棋子在横向、竖向或者斜线上有连续五个子，则该颜色棋子的一方获胜。获胜的情况
　　胜利的情况有如下四种：横向情况此时黑子获胜
　　竖向情况此时白子获胜
　　左斜线情况此时白子获胜
　　右斜线情况此时黑子获胜
　　否则，黑白双方打成平手（即平局）。项目的难点
　　1。将canvas上绘制的棋盘和矩阵一一对应
　　体验下代码你就明白了：监听鼠标点击棋盘的位置listenDownChessman（）｛this。checkerboardDom。onclickevent｛let｛offsetX：x，offsetY：y｝const｛width，height｝this。xMath。round（（x15）width）；yMath。round（（y15）height）；if（this。checkerboardMatrix〔x〕〔y〕！undefinedObject。is（this。checkerboardMatrix〔x〕〔y〕，0））｛this。checkerboardMatrix〔x〕〔y〕this。刻画棋子this。drawChessman（｛x，y｝，Object。is（this。role，EnumRoles。BLACK））；this。roleObject。is（this。role，EnumRoles。BLACK）？EnumRoles。WHITE：EnumRoles。BLACK；设置当前执棋if（！this。win）｛游戏中this。setCurrentRole（）；｝else｛游戏结束Object。is（this。role，EnumRoles。BLACK）？this。currentRoleDom。setAttribute（class，chessmanwinwhite）：this。currentRoleDom。setAttribute（class，chessmanwinblack）this。message赢得本场胜利this。setResultMsgHint（）；｝｝｝｝复制代码
　　我们需要获取canvas上相对原点（左上角）的偏移值，计算出在矩阵上对应的位置。然后判断该位置是否已经落子，如果没有落子，则进行棋子的绘制。
　　2。判断输赢
　　在上面获胜情况中我们已经了解。下面我们看看代码实现：methodgameReferee游戏裁判paramcoordinate坐标（x，y）paranrole角色gameReferee（coordinate，role）｛const｛x，y｝if（xundefinedyundefinedroleundefined）连杀的次数letcountContinuous0；x轴的情况constXContinuousthis。checkerboardMatrix。map（xx〔y〕）；y轴的情况constYContinuousthis。checkerboardMatrix〔x〕；constS1Continuous〔〕；constS2Continuous〔〕；this。checkerboardMatrix。forEach（（x，i）｛左斜线constS1Itemx〔y（xi）〕；if（S1Item！undefined）｛S1Continuous。push（S1Item）；｝右斜线constS2Itemx〔y（xi）〕；if（S2Item！undefined）｛S2Continuous。push（S2Item）；｝｝）；当前落棋点所在的X轴Y轴交叉斜轴，只要有能连起来的5个子的角色即有胜者〔XContinuous，YContinuous，S1Continuous，S2Continuous〕。forEach（axis｛if（axis。some（（x，i）axis〔i〕！0axis〔i2〕axis〔i1〕axis〔i1〕axis〔i〕axis〔i〕axis〔i1〕axis〔i1〕axis〔i2〕））｛countContinuous｝｝）；if（countContinuous）｛this。this。checkerboardDom。游戏结束，不允许点击｝｝复制代码
　　上面代码的注释已经讲解得很清楚了。简单来说，我们就是将二维数组分成四种情况处理，将其形成四个一维数组，再对四个一维数组进行判断，如果它们中有连续5个相同的数值，则可判定输赢。
　　比如，在1515的棋盘中，某次落棋后，可得：XContinuous〔0，1，2，2，2，2，2，0，2，1，0，1，1，0，0〕复制代码
　　0代表空，1代表黑子，2代表白子
　　这里XContinuous横轴中就有连续五个白子，则白方获胜。
　　体验地址：五子棋双人模式人机模式JavaScript实现码上掘金五子棋双人模式人机模式JavaScript实现码上掘金
　　赠人玫瑰，手留花香。俺不要玫瑰，只要读者的一个举手之劳的赞逃：）