js 五子棋算法 html

js的一款五子棋算法

这个五子棋算法是从一篇博客上看的，我解决了当五子棋下到两边时，数组越界的问题。

过程：当一方棋子下到棋盘上时，判断左右，上下，左上右下，左下右上 的本方棋子个数，当为5时游戏结束，一方胜出。

	
	function draw_board(){
		var tmp=document.getElementById('canvas1');

		var canva=tmp.getContext('2d');
		canva.clearRect(0,0,600,600);
		
		for(var i=0;i<=15;i++){
		canva.beginPath();
		canva.fillText(i,30+i*30,15);
		canva.moveTo(30+i*30,30);
		canva.lineTo(30+i*30,480);
		canva.stroke();
		if(i!=0){
		canva.fillText(i,0,30+i*30);
		}
		canva.moveTo(30,30+i*30);
		canva.lineTo(480,30+i*30);
		canva.closePath();
		canva.stroke();
	}
	}
	
	
	function start(){
	var over=false;
	var Chessboard=[];//-1 黑，0无，1白
	var chess_num=0;
	var nownow=0;
	document.getElementById('canvas1').setAttribute("height","500px");
	document.getElementById('canvas1').setAttribute("width","500px");
	var tmp=document.getElementById('canvas1');
	
	var canva=tmp.getContext('2d');
	canva.fillStyle="#000";
	
	for(var i=0;i<=15;i++){
		canva.beginPath();
		
		canva.fillText(i,30+i*30,15);
		canva.moveTo(30+i*30,30);
		canva.lineTo(30+i*30,480);
		canva.stroke();
		if(i!=0){
		canva.fillText(i,0,30+i*30);
		}
		canva.moveTo(30,30+i*30);
		canva.lineTo(480,30+i*30);
		canva.closePath();
		canva.stroke();
	}
	
	//初始化棋盘信息，将二维数组所有项全部初始化为0
	for (var i = -1; i <= 16; i++) {
	Chessboard[i]=[];
	for (var j = -1; j <= 16; j++) {
		Chessboard[i][j]=0;
	}
}

	var now_chess=true;
	
	var drawChess=function(i,j){
		
		canva.beginPath();
		canva.arc(30+i*30,30+j*30,13,0,2*Math.PI,true);
		canva.closePath();
		
		if(now_chess){
		canva.fillStyle="#000000";
		}else{
			canva.fillStyle="#fff";
		}
		canva.fill();
		
	}
	
	$('#canvas1').mousemove(function(e){
	// 悬浮事件

		
	});

	tmp.onclick=function(e){
		if(over){
			window.alert("本轮游戏已经结束了，请刷新浏览器重新开始！");
		}else{
		
		var x=e.offsetX;
		var y=e.offsetY;
		console.log(x+"  "+y);
		var i=Math.floor(x/32);
		var j=Math.floor(y/30);
		
		
		if(Chessboard[i][j]===0){
			if(i>=0&&j>=0&&i<=15&&j<=15){
			drawChess(i,j);
			
			chess_num++;
			if(now_chess){ //黑子
				Chessboard[i][j]=-1;
				nownow=-1;
				now_chess=false;//将下一步棋的颜色进行反转
				
			}else{
				Chessboard[i][j]=1;
				nownow=1;
				now_chess=true;//将下一步棋的颜色进行反转
			}
			console.log(nownow);
			//遍历是否赢
			if(chess_num>9){
				var count1=0;
				var count2=0;
				var count3=0;
				var count4=0;
				console.log(chess_num);
				//横向，参考博客 陶伟基
				for(var cc=i;cc>=0;cc--){
					if(Chessboard[cc][j]!=nownow){
						break;
					}
					count1++;
				}//左
				
				for(var dd=i+1;dd<=15;dd++){
					if(Chessboard[dd][j]!=nownow){
						break;
					}
					count1++;
				}//右
				console.log("横向："+count1);
				
				for(var ee=j;ee>=0;ee--){
					if(Chessboard[i][ee]!=nownow){
						break;
					}
					count2++;
				}//上
				for(var ff=j+1;ff<=15;ff++){
					if(Chessboard[i][ff]!=nownow){
						break;
					}
					count2++;
				}//下
				console.log("竖向："+count2);
				
			
				for(var gg=i,hh=j;gg>=0,hh>=0;gg--,hh--){
					if(Chessboard[gg][hh]!=nownow){
						break;
					}
					count3++;
					
				}//左上,todo 解决越界问题？
				for(var jj=i+1,kk=j+1;jj<=15,kk<=15;jj++,kk++){
					if(Chessboard[jj][kk]!=nownow){
						break;
					}
					count3++;
				}//右下
				console.log("左上右下："+count3);
				
				for(var ll=i,mm=j;ll>=0,mm<=15;ll++,mm--){
					if(Chessboard[ll][mm]!=nownow){
						break;
					}
					count4++;
				}
	
							
				for(var nn=i-1,oo=j+1;nn<=15,oo>=0;nn--,oo++){
					if(Chessboard[nn][oo]!=nownow){
						break;
					}
					count4++;
				}
				console.log("右上左下："+count4);
				
				if(count1>=5||count2>=5||count3>=5||count4>=5){
					if(nownow==-1){
						window.alert("黑棋赢了");
					}else if(nownow==1){
						window.alert("白棋赢了");
						}
					over=true;
				}


				}
			}
			
		}
	}
		}
}

有的地方缩进可能有点问题。写的着急了。

效果可看兰兰想的五子棋网页：
https://lanhaoo.club/lab/game_board33.html