我们首先创建一个棋盘，是一个画布，我们可以在上面画出棋盘
CSS给棋盘阴影，我们可以看出棋盘大致轮廓。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>五子棋</title>
		<style type="text/css">
			#chess{
				margin: auto;
				display: block;
				box-shadow: 5px 5px 5px #808080,-2px -2px 2px #D5D5D5;
				cursor:pointer ;
			}
		</style>
	</head>
	<body>
		<h3 align="center">益智五子棋</h3>
		<canvas id="chess" width="450px" height="450px"></canvas>
		</div>
	</body>
</html>

VHDL五子棋图像识别 五子棋html_i++


``

现在我们需要一个画笔，以下的代码均是在script中。

我们画的是一个15*15的棋盘，通过for循环来让画笔划线

//画布画笔
		var chess = document.getElementById("chess");
		var context = chess.getContext("2d"); //context可以看作画笔
		context.strokeStyle="#bfbfbf";              //画笔的颜色
		
		//加载棋盘
		window.onload = function(){               //页面加载完成事件
			for(var i=0;i<15;i++){
		    
			context.moveTo(15,15+30*i);          //横线（x，y）起始点
			context.lineTo(435,15+30*i);           //横线（x，y）终止点
			context.stroke();                              //画一条线
			
			context.moveTo(15+30*i,15);           //竖线
			context.lineTo(15+30*i,435);
			context.stroke();
			}
			
		}

VHDL五子棋图像识别 五子棋html_i++_02


可以看到我们的棋盘已经OK了

接下来就是要让棋盘上可以有下棋的效果

chess.onclick=function(e){
			
			var i =(e.offsetX/30)|0;   //得到点击的x坐标
			var j = (e.offsetY/30)|0;  //得到点击的y坐标
			
			var x=i;
			var y=j;
		   
		    oneStep(x,y,true); 
		}
		  //这里player true为玩家   false为电脑（下面会写）
		function oneStep(x,y,player){
			var color;
			context.beginPath();                              //开始画圆
		    context.arc(15+30*x,15+30*y,13,0,2*Math.PI)       //（x,y,半径，起始点，终止点2*PI即360度）
		    context.closePath();                              //结束画圆
		    
		    if(player){
		    	color="black";                                //玩家是黑色
		    }else{
		    	color="red";                                  //电脑是红色
		    }
		    
		    context.fillStyle=color;                         //设置填充色
		    context.fill();                                  //填充颜色
		}

点击棋盘已经可以下棋了

VHDL五子棋图像识别 五子棋html_VHDL五子棋图像识别_03


电脑如何落子呢，我们这里的想法是首先给电脑遍历所有的赢法，由于棋盘上的每个子所占的赢的情况是多样的，所有我们这里不仅需要x，y来记录棋子的位置，还需要多加一维count来记录这是哪种胜利情况下的棋子，即用三维数组来统计赢法。

//赢法数组
		var wins = [];
		for(var i=0;i<15;i++){                   //定义三维数组
			wins[i]=[];
			for(var j=0;j<15;j++){
				wins[i][j]=[];
			}
		}
		var count = 0;                          //（x，y）在的赢法种类
		//横线能赢情况      
		for(var x=0;x<11;x++){                            
			for(var y=0;y<15;y++){
				for(var z=0;z<5;z++){           //z代表向后5个字
					wins[x+z][y][count]=true;   //true代表是一种赢法，用count记录下来
				}
				count++;                        //(x,y)在另一个赢法中
			}
		}
		//竖线能赢情况
		for(var x=0;x<15;x++){                  
			for(var y=0;y<11;y++){
				for(var z=0;z<5;z++){           
					wins[x][y+z][count]=true;   
				}
				count++;                        
			}
		}
		//正斜线能赢情况
		for(var x=0;x<11;x++){
			for(var y=0;y<11;y++){
				for(var z=0;z<5;z++){           
					wins[x+z][y+z][count]=true;   
				}
				count++;                        
			}
		}
		//反斜线能赢情况
		for(var x=0;x<11;x++){
			for(var y=4;y<15;y++){
				for(var z=0;z<5;z++){           
					wins[x+z][y-z][count]=true;   
				}
				count++;                        
			}
		}

还有，下过棋的地方不能在下，我们可以遍历一波棋盘，设置0为没下过，1为已经下了
这样就可以在之后电脑或玩家出发事件时将其值由0变1，通过if判断是否可下

//遍历棋盘，是否有棋子，默认为0没有
		var isChess = []
		for(var i=0;i<15;i++){
			isChess[i]=[];
			for(var j=0;j<15;j++){
				isChess[i][j]=0;
			}
		}

是时候判断一下到什么程度会赢了，我们分别给人或电脑设置赢的事件
刚刚说过，count是棋子（x，y）在的赢法，我们之后就可以判断wins是否为true来知道（x，y）是否在赢法count上了

//人和电脑赢的子占赢法的情况
		var manWin=[];
		var computerWin=[];
		for(var i=0;i<count;i++){
			manWin[i]=0;
			computerWin[i]=0;
		}

那么玩家下棋的部分我们就要改一改了

//玩家点击下棋
		chess.onclick=function(e){
			
			var i =(e.offsetX/30)|0;
			var j = (e.offsetY/30)|0;
			
			var x=i;
			var y=j;
		    if(isChess[x][y]==0){      //是否有棋子，没有下子
		    	isChess[x][y]=1;         //值变一，代表有棋子
		    	oneStep(x,y,true);      //玩家颜色
		    	for(var i=0;i<count;i++){        //遍历赢法
		    		
		    		if(wins[x][y][i]){                //（x，y）在赢法i上 该赢法将赢数加一
		    			manWin[i]++;
		    		}
		    		if(manWin[i]==5){          //为五，赢了
		    			alert("你赢了");
		    		}	
		    	}	
		    	computerPlayerAction();   //玩家下过棋后该电脑下
		    } 
		    
		}

大家应该可以看到上面已经调了电脑下棋的方法了，接下来就是电脑。
没错，电脑需要判断玩家的棋是否要赢了，应需要判断自己的棋是否要赢了，我们这里设置了权值manOfValue和computerOfVAlue来表示他们，电脑遍历棋盘，查找每个空缺在玩家和电脑的赢法上的可能，即计算myWin和computerWin，并将其不同的值付给manOfValue和computerOfVAlue

function computerPlayerAction(){
			var max=0;
			var u=0;                      //电脑棋x坐标
			var v=0;                   //电脑棋y坐标
			
			var manOfValue=[];            //玩家赢的权值
			var computerOfValue=[];     //电脑赢的权值
			
			for(var x=0;x<15;x++){
				manOfValue[x]=[];
				computerOfValue[x]=[];
				for(var y=0;y<15;y++){
					manOfValue[x][y]=0;
					computerOfValue[x][y]=0;
				}
			}
			
			for(var x=0;x<15;x++){
				for(var y=0;y<15;y++){
					if(isChess[x][y]==0){     //查找空白棋
	                
						for(var i=0;i<count;i++){    //遍历count
							if(wins[x][y][i]){
								if(manWin[i]==1)
								{manOfValue[x][y]+=200;}    //给予权值
								else if(manWin[i]==2)
								{manOfValue[x][y]+=400;}
								else if(manWin[i]==3)
								{manOfValue[x][y]+=2000;}
								else if(manWin[i]==4)
								{manOfValue[x][y]+=10000;}
								
								if(computerWin[i]==1)
								{computerOfValue[x][y]+=220;}    //电脑相同条件权值要比玩家高，主要还是自己赢
								else if(computerWin[i]==2)
								{computerOfValue[x][y]+=420;}
								else if(computerWin[i]==3)
								{computerOfValue[x][y]+=2200;}
								else if(computerWin[i]==4)
								{computerOfValue[x][y]+=20000;}
							}	
						}
						
						
					    if(manOfValue[x][y]>max){          //循环判断最大权值
					    	max=manOfValue[x][y];
					    	u=x;
					    	v=y;
					    }
					    if(computerOfValue[x][y]>max){
					    	max=computerOfValue[x][y];
					    	u=x;
					    	v=y;
					    }
						
						
					}	
				}
			}
			
			oneStep(u,v,false);   //电脑判断完成，下棋
			
			isChess[u][v]=1;      //标记已下
			
			for(var i=0;i<count;i++){     //（x，y）在赢法i上 该赢法将赢数加一
				if(wins[u][v][i]){
					computerWin[i]++;
				}
				if(computerWin[i]==5){
					alert("电脑赢了");
				}
			}
			
		}

到此电脑人就写好了，整理以上的代码，你的五子棋也可以跑起来

最后看一下预览图。

VHDL五子棋图像识别 五子棋html_JavaScript_04