五子棋

来源：互联网发布：淘宝网顾老师太极鞋编辑：程序博客网时间：2024/04/30 09:55

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.onload=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.onclick= 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;}

0 0