五子棋

最新推荐文章于 2022-03-17 09:29:26 发布

NeQrhk

最新推荐文章于 2022-03-17 09:29:26 发布

阅读量598

点赞数

分类专栏：前端学习文章标签：游戏实现

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>五子棋</title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
   <canvas id="chess" width="450px" height="450px"></canvas>
</body>
</html>

var chessBoard = [];
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
//为了轮流下棋
var me=true;
var over = false;
//定义赢法的三维数组
var wins = [];
//赢法的统计数组
var myWin = [];
var computerWin = [];
for(var i=0;i<15;i++){
	wins[i]=[];
	for(var j=0;j<15;j++){
	 wins[i][j]=[];
	}
}
//赢法种类count，一共有572种赢法
var count = 0;
//所有横线的赢法
for(var i =0;i<15;i++){
	for(var j=0;j<11;j++){
	   //wins[0][0][0] = true;
	   //wins[0][1][0] = true;
	   //wins[0][2][0] = true;
	   //wins[0][3][0] = true;
	   //wins[0][4][0] = true;
	   //这几个点连起来就是一条线
	   //j++,count++;
        //又是另外一条线
	   for(var k=0;k<5;k++){
	       wins[i][j+k][count]=true;
	   }
	   count++;
	}
}
//所有的竖线
for(var i=0;i<15;i++){
	for(var j=0;j<11;j++){
	   for(var k=0;k<5;k++){
	      wins[j+k][i][count]= true;
	   }
	count++;
	}
}//所有斜线
for(var i=0;i<11;i++){
	for(var j=0;j<11;j++){
	   for(var k=0;k<5;k++){
	       wins[i+k][j+k][count]=true;
	   }
	   count++;
	}
}
//所有反斜线
for(var i=0;i<11;i++){
	for(var j=14;j>3;j--){
	    for(var k=0;k<5;k++){
	      wins[i+k][j-k][count]=true;
	    }
	    count;
	}
}
for(var i=0;i<count;i++){
	myWin[i] = 0;
	computerWin[i]=0;
}
for(var i = 0 ;i<15;i++){
	chessBoard[i]=[];
	for(var j=0;j<15;j++){
	    chessBoard[i][j]=0; //表示没有落子
	}
}
context.strokeStyle = "#BFBFBF";
//canvas画水印
var logo = new Image();
logo.src="image/logo.png";
//图片要有加载的时间
logo.οnlοad=function(){
	context.drawImage(logo,0,0,450,450);
	drawChessBoard();
	oneStep(0,0,true);
	oneStep(1,1,false);
}
//水印完成,到了这里会覆盖了棋盘的交叉线，因为先执行了画线操作
var drawChessBoard = function(){
for(var i=0;i<15;i++){
	context.moveTo(15+i*30,15);
    context.lineTo(15+i*30,435);
     context.stroke();
     context.moveTo(15,15+i*30);
     context.lineTo(435,i*30+15);
    context.stroke();
}
}
var oneStep = function(i,j,me){
   //开始画一个圆
	context.beginPath();
    context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
	context.closePath();
	//渐变对象 传入第一个圆和半径，第二个圆和半径
	var gradient = context.createRadiaGradient(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,"#D1D1D1");
	gradient.addColorStop(1,"#F9F9F9");
	}
	context.fillStyle=gradient;
	context.fill();
	//画一个圆完成
}
chess.οnclick= function(e){
   if(over){
      return;
   }
   if(!me){
   return;
   }
	var x = e.offsetX;
	var y = e.offsetY;
    var i = Math.floor(x/30);
    var j = Math.floor(y/30);
    if(chessBoard[i][j]==0){
       oneStep(i,j,true);
         chessBoard[i][j]=1;  //落黑子为1
    }
    me = !me;
    for(var k = 0;k<count;k++){
       //第k种赢法有子
       if(win[i][j][k]){
             myWin[K]++;
             computerWin[K]=6;//白子不可能赢了
             if(myWin[k] ==5){
                 //这种赢法已经被实现了，
                   window.alert("你赢了");
                   over = true;
             }
       }
    }
    if(!over){
       me=!me;
       conputerAI();
    }
}
//计算机AI算法
var computerAI = function(){
	var myScore = [];
	var computerScore = [];
	var max = 0;//保存最高的分数
	var u=0,v=0;
	for(var i=0;i<15;i++){
	   myScore[i] =[];
	   computerScore[i]=[];
	   for(var j=0;j<15;j++){
	       myScore[i][j]=0;
	       computerScore[i][j]=0;
	   }
	}
	for(var i=0;i<15;i++){
	   for(var j=0;j<15;j++){
	      if(chessBoard[i][j]==0){
	      // 可以落子
	      //遍历了所有的赢法
	        for(var k=0;k<count;k++0){
	              if(win[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(computerWin[k]==2){
                        computerScore[i][j]+=420;
	              }else if(computerWin[k]==3){
                          computerScore[i][j]+=2100;
	              }else if(computerWin[k]==4){
                           computerScore[i][j]+=20000;
	              }
	        }
	        //u,v得分最高的点
	        if(myScore[i][j]>max){
	           max = myScore[i][j];
	           u=i;
	           v=j;
	        }else if(myScore[i][j] == max){
	            if(computerScore[i][j]>computerScore[u][v]){
	               u=i;
	               v=j;
	            }
	        }
	         if(computerScore[i][j]>max){
	           max = computerScore[i][j];
	           u=i;
	           v=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++){
       //第k种赢法有子
       if(win[u][v][k]){
            computerWin[K]++;
             myWin[K]=6;//白子不可能赢了
             if(computerWin[k] ==5){
                 //这种赢法已经被实现了，
                   window.alert("计算机赢了");
                   over = true;
             }
       }
    }
    if(!over){
       me=!me;
    }
}

canvas{
	display: block;
	margin: 50px auto;
	box-shadow: -2px -2px -2px #EFEFEF,5px 5px 5px #ccc;
}

NeQrhk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五子棋

index.html 五子棋 var chessBoard = [];var chess = document.getElementById('chess');var context = chess.getContext('2d');//为了轮流下棋var me=true;var over = false;//定义赢法的三维数
复制链接

扫一扫