HTML+js实现简单的五子棋

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



	
		
		五子棋
		
	
	
		

益智五子棋

HTML+js实现简单的五子棋_第1张图片
``
现在我们需要一个画笔,以下的代码均是在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();
			}
			
		}
	

HTML+js实现简单的五子棋_第2张图片
可以看到我们的棋盘已经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();                                  //填充颜色
		}

点击棋盘已经可以下棋了
HTML+js实现简单的五子棋_第3张图片
电脑如何落子呢,我们这里的想法是首先给电脑遍历所有的赢法,由于棋盘上的每个子所占的赢的情况是多样的,所有我们这里不仅需要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

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

//玩家点击下棋
		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

大家应该可以看到上面已经调了电脑下棋的方法了,接下来就是电脑。
没错,电脑需要判断玩家的棋是否要赢了,应需要判断自己的棋是否要赢了,我们这里设置了权值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;imax){          //循环判断最大权值
					    	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

到此电脑人就写好了,整理以上的代码,你的五子棋也可以跑起来
最后看一下预览图。
HTML+js实现简单的五子棋_第4张图片

你可能感兴趣的:(HTML+js实现简单的五子棋)