js实现AI五子棋人机大战

 更新时间:2019年12月03日 09:09:06   作者:Aa独角戏   我要评论
这篇文章主要为大家详细介绍了js实现AI五子棋人机大战,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现AI五子棋人机大战的具体代码,供大家参考,具体内容如下

实现原理就是计算五子棋所有赢的种类,利用canvas实现五子棋排版落子。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>五子棋</title>
 
 <style>
  #canvas{
   display: block;
   margin:50px auto;
   box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #b9b9b9;
  }
 </style>
</head>
<body>
 
 <canvas id="canvas" width="450px" height="450px"></canvas>
 
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 
 var me = true; //true黑子, false, 白子
 var over = false;
 var box = []; //全部落子点
 var wins = []; //全部赢的方法 三维数组
 
 for(var i = 0; i< 15 ;i++) {
  box[i] = [];
  wins[i] = [];
  for(var j = 0; j < 15; j++) {
   box[i][j] = 0;
   wins[i][j] = [];
  }
 }
 
 
 var count = 0; //总共赢的数量572种
 //横向
 for(var a = 0; a < 15; a++) {
  for(var b = 0; b < 11;b++) {
   //wins[0][0][0]
   //wins[0][1][0]
   //wins[0][2][0]
   for(var c = 0; c < 5;c++) {
    wins[a][b + c][count] = true;
   }
   count++;
  }
 }
 //纵向
 for(var a = 0; a < 15; a++) {
  for(var b = 0; b < 11;b++) {
   //wins[0][0][0]
   //wins[0][1][0]
   //wins[0][2][0]
   for(var c = 0; c < 5;c++) {
    wins[b + c][a][count] = true;
   }
   count++;
  }
 }
 
 //斜 '\'
 for(var a = 0; a < 11; a++) {
  for(var b = 0; b < 11;b++) {
   //a = 0, b = 10
   //win[0][10]
   //win[1][11]
   for(var c =0; c < 5;c++) {
    wins[a + c][b + c][count] = true;
   }
   count++;
  }
 }
 //反斜 '/'
 for(var a = 0; a < 11; a++) {
  for(var b = 4; b < 15;b++) {
   //a = 0, b = 0
   //win[0][5]
   //win[1][4]
   for(var c =0; c < 5;c++) {
    wins[a + c][b - c][count] = true;
   }
   count++;
  }
 }
 //我方、计算机方总共可以赢的数量,每在某一方式上可以赢的位置下一颗子,myWin[i]++
 //当myWin[i] == 5,说明我方在这个方式上赢的落子已经达到5颗,说明我方已经赢了
 var myWin = []; //
 var computerWin = [];
 for(var i = 0; i < count;i++) {
  myWin[i] = 0;
  computerWin[i] = 0;
 }
 
 //画纵横线条
 function drawLine() {
 
  context.strokeStyle = '#ccc';
  for(var i = 0; i < 15; i++) {
   context.moveTo(15 + 30 * i, 15);
   context.lineTo(15 + 30 * i, 435);
   context.stroke();
 
   context.moveTo(15, 15 + 30 * i);
   context.lineTo(435, 15 + 30 * i);
   context.stroke();
  }
 }
 drawLine()
 
 //走一步,画黑白子,并记录,黑子为1,白子为2
 function oneStep(i, j, me) {
  context.beginPath();
  context.arc(15 + i * 30, 15 + j*30, 13, 0, Math.PI * 2);
  context.closePath();
 
  var gradient = context.createRadialGradient(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');
   box[i][j] = 1;
 
  } else { //白子
   gradient.addColorStop(0, '#D1D1D1');
   gradient.addColorStop(1, '#F9F9F9');
   box[i][j] = 2;
  }
  context.fillStyle = gradient;
  context.fill();
 }
 
 canvas.onclick = function(e) {
  if(over) return;
  if(!me) return;
  var x = Math.floor(e.offsetX/30);
  var y = Math.floor(e.offsetY/30);
  if(box[x][y] == 0) { //判断没有落子
   oneStep(x, y, me);
   
   for(var k = 0; k<count; k++) {//第几种赢法
    if(wins[x][y][k]) {
     myWin[k]++;
     computerWin[k] = 6; //因为我方在这个点上已经落子,所以计算机不可能在这个点上赢,
     if(myWin[k] == 5) {
      console.log('你赢了')
      over = true;
     }
    }
   }
   if(!over) {
    me = !me;
    computerAI();
   }
  }
 }
 
 //计算机
 function computerAI() {
  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(box[i][j] == 0) { //每个空闲点上进行计算分数
     for(var k =0;k<count;k++) { //遍历所有可以赢的,数量
      if(wins[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); //走一步
 
  for(var k = 0; k<count; k++) {//第几种赢法
   if(wins[u][v][k]) {
    computerWin[k]++;
    myWin[k] = 6;
    if(computerWin[k] == 5) {
     console.log('计算机赢了--')
     over = true;
    }
   }
  }
 
  if(!over) {
   me = !me;
  }
 
 } 
 
 
 </script>
 
</body>
</html>

效果图如下

实际操作效果还行,但相比真正ai实现还是有很多不足。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论