JS五子棋之人机对战

JavaScript实现人机大战五子棋9*9

文章目录

1. 效果图
2. UI篇
3. AI篇
4. 参考视频

1.效果图

先来看看最终实现的效果吧！

胜利显示：

2.UI篇

主要是使用canvas绘制棋盘以及棋子

canvas绘制棋盘

for(var i=0;i<9;i++)
 {
 		//横线
 		//开始一条路径，移动到位置 (24 + i *50, 24), 创建到达位置( 24 + i *50, 426 )的一条线：
        context.moveTo(24 + i *50, 24);
        context.lineTo(24 + i *50, 426);
        context.stroke(); //加上这个才能绘制
        //纵线
        context.moveTo(24, 24 + i *50);
        context.lineTo(426, 24 + i * 50);
        context.stroke();
}

canvas绘制棋子部分代码

var oneStep=function(i,j,me)//i，j表示棋盘索引，me表示黑棋或白棋
{
//画棋子
context.beginPath();
context.arc(24+i*50,24+j*50,15,0,2*Math.PI);
context.closePath();
var gradient = context.createRadialGradient(24 + i * 50 + 2, 24 + j * 50 - 2, 13, 24 + i * 50 + 2, 24 + j * 50 - 2, 0);//实现渐变颜色
if(me)//黑棋颜色
{
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
}
else{
gradient.addColorStop(0,"#D1D1D1");
gradient.addColorStop(1,"#F9F9F9");
}
context.fillStyle=gradient;
context.fill();
}

3.AI篇

思路：
赢法数组：使用三维数组记录五子棋所有赢法；
赢法的统计数组：使用一维数组记录每种赢法；
判断胜负根据赢法的统计数组，如果某一种赢法达到5颗子，那么某一方也就胜利
AI落子规则根据赢法的统计数组来进行加分，如果实现5颗子的可能性越大就进行加分

部分代码：

var computerAI=function()
{
 	var myScore=[];
 	var computerScore=[];
 	var max=0;//保存最高分数
 	var u=0,v=0;//保存最高分数点的坐标
 	for(var i=0;i<9;i++)//初始化
 	{
 		myScore[i]=[];
 		computerScore[i]=[];
 		for(var j=0;j<9;j++)
 		{
 			myScore[i][j]=0;
 			computerScore[i][j]=0;
 		}
 	}
 	// 通过赢法统计数组为两个二维数组分别计分
 	for(var i=0;i<9;i++)
 	{
 		for(var j=0;j<9;j++)
 		{
 			if(chessBoard[i][j]==0)
 			{
 				for(var k=0;k<count;k++)
 				{
 					if(wins[i][j][k])
 					{
 						if(myWin[k]==1)
 						{
 							myScore[i][j]+=200;
 						}else if(myWin[k]==2)
 						{
 							myScore[i][j]+=400;	
 						}else if(myWin[k]==3)
 						{
 							myScore[i][j]+=2000;	
 						}else if(myWin[k]==4)
 						{
 							myScore[i][j]+=10000;	
 						}

 						if(computerWin[k]==1)
 						{
 							computerScore[i][j]+=220;
 						}else if(computerScore[k]==2)
 						{
 							computerScore[i][j]+=420;
 						}else if(computerScore[k]==3)
 						{
 							computerScore[i][j]+=2100;
 						}else if(computerScore[k]==4)
 						{
 							computerScore[i][j]+=20000;
 						}
 					}
 				}
 				// 如果玩家(i,j)处比目前最优的分数大，则落子在(i,j)处

 				if(myScore[i][j]>max)
 				{
 					max=myScore[i][j];
 					u=i;
 					v=j;
 				}
 				// 如果玩家(i,j)处和目前最优分数一样大，则比较电脑在该位置和预落子的位置的分数
 				else if(myScore[i][j]==max){
 					if(computerScore[i][j]>computerScore[u][v]){
 						u=i;
 						v=j;
 					}
 				}
 				// 如果电脑(i,j)处比目前最优的分数大，则落子在(i,j)处
 				if(computerScore[i][j]>max)
 				{
 					max=computerScore[i][j];
 					u=i;
 					v=j;
 				}
// 如果电脑(i,j)处和目前最优分数一样大，则比较玩家在该位置和预落子的位置的分数
 				else if(computerScore[i][j]==max){
 					if(myScore[i][j]>myScore[u][v]){
 						u=i;
 						v=j;
 					}
 				}
 			}
 		}
 	}
 	oneStep(u,v,false);
 	chessBoard[u][v]=2;//表示计算机在此处落子
 	for(var k=0;k<count;k++)
   {
		if(wins[u][v][k])
		{
			computerWin[k]++;
			myWin[k]=6;
			if (computerWin[k] == 5)
			 {
			setTimeout(function(){
			window.alert("计算机赢了");
			},0);
			over = true;
		}
		}
	}
	if(!over)
	{	
		me=!me;
	}
}

4.参考视频

UI篇
AI篇
原视频是15 * 15 的棋盘，我自己修改成了 9 * 9
github项目源代码
欢迎大家参考指摘