一、功能模块

先看下现在做完的效果：

线上体验：https://wj 704。github。io/五_游戏。超文本标记语言

主要功能模块为：

1.人机对战功能2.悔棋功能3.撤销悔棋功能

二、代码详解

2.1 人机对战功能实现

从效果图可以看到，棋盘的横竖可以放的位置为15*15,通过帆布画棋盘：

//绘画棋盘var draw棋盘=function(){ for(var I=0；i 15i ){ context.moveTo(15 i * 30，15)；context.lineTo(15 i * 30，435)；语境。笔画()；context.moveTo(15，15 I * 30)；context.lineTo(435，15 I * 30)；语境。笔画()；} }知道格子数后，我们先看五子棋有多少种赢法：

//赢法数组var wins=[]；for(var I=0；I 15I){ wins[I]=[]；for(var j=0；歼15;j){ wins[I][j]=[]；} } var计数=0;//赢法总数//横线赢法for(var I=0；I(15I){ for(var j=0；歼11;j){ for(var k=0；K5；k){ wins[I][j k][count]=true；}计数；} } //竖线赢法for(var I=0；I(15I){ for(var j=0；歼11;j){ for(var k=0；K5；k){ wins[j k][I][count]=true；}计数；} } //正斜线赢法for(var I=0；I(11I){ for(var j=0；歼11;j){ for(var k=0；K5；k){ wins[I k][j k][count]=true；}计数；} } //反斜线赢法for(var I=0；I(11I){ for(var j=14；JBOY3乐队；j-){ for(var k=0；K5；k){ wins[I k][j-k][count]=true；}计数；} }根据赢法总数定义分别保存计算机和人赢法的数组：

for(var I=0；我数；I){ MyWin[I]=0；_ MyWin[I]=0；计算机Win[I]=0；_ CompWin[I]=0；}然后就是人开始下棋：

//我，下棋国际象棋。onclick=function(e){ if(over){//游戏结束返回；} if(！me){ return；} var x=e . offsetxvar y=e . offsetyvar I=数学。楼层(x/30)；var j=数学。楼层(y/30)；_ nowi=I；_ nowj=j；if(chressBord[I][j]==0){ one step(I，j，me)；chressBord[I][j]=1；//我，已占位置for(var k=0；k计数；k ){ //将可能赢的情况都加1 if(wins[I][j][k]){ MyWin[k]；_ CompWin[k]=ComputeWin[k]；//为悔棋做准备计算机win[k]=6；//这个位置对方不可能赢了if(myWin[k]==5){ resulttxt。innerhtml='恭喜，你赢了!'；over=true} } } if(！结束){ me=！我；computerAI()；} } //悔棋功能可用替换（新的regexp('(\s|^)unable(\s|$)'),' ')；}oneStep()方法为落子，要在棋盘上画一个棋子：

//画棋子var oneStep=function(i，j，me){ //调试器；语境。begin path()；context.arc(15 i * 30，15 j * 30，13，0，2 * Math .PI)；//画圆语境。close path()；//渐变var渐变=上下文。createradialgradient(15 i * 30 2，15 j * 30 - 2，13，15 i * 30 2，15 j * 30 - 2，0)；if(me){ gradient.addColorStop(0 '，# 0a0a0a ')；gradient.addColorStop(1，' # 636766 ')；}else{ gradient.addColorStop(0，' # D1D1 ')；gradient.addColorStop(1 '，# F9 F9 F9} context.fillStyle=渐变；语境。fill()；}接着看计算机怎么下棋，具体看computerAI()方法：

//计算机下棋var computerAI=function(){ var myScore=[]；var计算机得分=[]；var max=0；var u=0，v=0；for(var I=0；I 15I){ myScore[I]=[]；电脑评分[I]=[]；for(var j=0；歼15;j){ myScore[I][j]=0；计算机得分[I][j]=0；} } for(var I=0；I(15I){ for(var j=0；歼15;j){ if(chressBord[I][j]==0){ for(var k=0；k计数；k){ if(wins[I][j][k]){ if(myWin[k]==1){ my core[I][j]=200；} else if(MyWin[k]==2){ MyCore[I][j]=400；} else if(MyWin[k]==3){ MyCore[I][j]=2000；} else if(MyWin[k]==4){ MyCore[I][j]=10000；} if(电脑赢[k]==1){电脑得分[I][j]=220；} else if(电脑赢[k]==2){电脑得分[I][j]=420；} else if(电脑赢[k]==3){电脑得分[I][j]=2100；} else if(电脑赢[k]==4){电脑得分[I][j]=20000；} } } if(MyScore[I][j]max){ max=MyScore[I][j]；u=I；v=j；} else if(myScore[I][j]==max){ if(computer score[I][j]computer score[u][v]){ u=I；v=j；} } if(电脑评分[I][j]max){ max=电脑评分[I][j]；u=I；v=j；} else if(电脑评分[I][j]==max){ if(myScore[I][j]myScore[u][v]){ u=I；v=j；} } } } } _ compi=u；_ compj=v；oneStep(u，v，false)；chressBord[u][v]=2；//计算机占据位置for(var k=0；k计数；k){ if(wins[u][v][k]){ computer win[k]；_ MyWin[k]=MyWin[k]；myWin[k]=6；//这个位置对方不可能赢了如果(计算机win[k]==5){ result txt。innerhtml='o()o，计算机赢了，继续加油哦!'；over=true} } } if(！结束){ me=！我；} }根据相应的权重，计算出计算机应该落子的位置。

2.2 悔棋功能

要提的是，这里暂时只能悔一步棋。悔棋功能主要关键点是：1、销毁刚刚下的棋子；2、将之前不可能赢的状态还原；看下具体的代码：

//悔棋回到TN。onclick=函数(e){ if(！backAble){ return；} over=falseme=true//我，悔棋chressBord[_ nowi][_ nowj]=0；//我，已占位置还原分钟步长(_ nowi，_ nowj)；//销毁棋子for(var k=0；k计数；k ){ //将可能赢的情况都减1 if(wins[_ nowi][_ nowj][k]){ myWin[k]-；计算机Win[k]=_ CompWin[k]；//这个位置对方可能赢} } //计算机相应的悔棋chressBord[_ compi][_ compj]=0；//计算机，已占位置还原分钟步长(_ compi，_ compj)；//销毁棋子for(var k=0；k计数；k ){ //将可能赢的情况都减1 if(wins[_ compi][_ compj][k]){ ComputeWin[k]-；MyWin[k]=_ MyWin[I]；//这个位置对方可能赢} } resulttxt . innerhtml=“-”益智五子棋- ';returnAble=true backable=false//撤销悔棋功能可用返回BTN。类名=返回BTN。类名。替换(新regexp('(\s|^)unable(\s|$)'),')；}稳定步骤()为销毁棋子的方法，我们看下是怎么销毁的。

//销毁棋子var mins step=function(I，j) {//擦除圆context.clearrect ((I) * 30，(j) * 30，30，30)；//围绕圆context.beginPath()重绘网格；context.moveTo(15 i*30，j * 30)；context.lineTo(15 i*30，j * 30 30)；context.moveTo(i*30，j * 30 15)；context.lineTo((i 1)*30，j * 30 15)；context . stroke()；}首先用clearRect()擦除圆，然后围绕圆重画网格，注意对应的位置，折腾了一段时间。

2.3撤销棋悔功能

悔棋后撤销相当于悔棋前恢复状态。代码很简单：

//撤销后悔棋return BTN . onclick=function(e){ if(！returnAble){ return；}//我，取消后悔棋chressBord[_ nowi][_ nowj]=1；//我已经占用了oneStep(_nowi，_nowj，me)；for(var k=0；k计数；k){ if(wins[_ nowi][_ nowj][k]){ myWin[k]；_ CompWin[k]=ComputeWin[k]；computer win[k]=6；//对方不可能在这个位置赢}如果(my win[k]==5){ result txt . innerhtml='恭喜，你赢了！'；over=true} }//电脑取消对应的后悔棋chressBord[_ compi][_ compj]=2；//计算机，占用位置oneStep(_compi，_compj，false)；for(var k=0；k计数；k){ if(wins[_ compi][_ compj][k]){ computer win[k]；_ MyWin[k]=MyWin[k]；myWin[k]=6；//对方不可能在这个位置赢} If(computer win[k]==5){ Result txt。innerhtml=' o() o，电脑赢了，继续欢呼吧！'；over=true} } returnbtn.className='无法'；returnAble=falsebackAble=true}到目前为止，这三个功能完成的比较简单。

三.摘要

五子棋游戏的核心要点是：1。找出赢的方法有多少；2.如何判断自己是否赢了；3.计算机象棋算法。在这里，我们巧妙地利用数组存储获胜法来判断我们是否获胜，并通过权重比较来计算计算机应该下棋的位置。

过程中使用了画布。我以前研究过，虽然已经很久没用了。我查了一些资料，复习了如何画线和画圆，学会了如何画清楚一个圆。然后我们要注意如何用原生Js为元素添加和删除类。

最后把代码放到github上，地址是https://github。com/wj704/wj704。github。io/blob/master/five _ game超文本标记语言

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。