devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【前端】AI五子棋游戏186行

作者：从前慢现在也慢 | 2024-04-19 13:52:47

赞

踩

【前端】AI五子棋游戏186行

这个来源于网上，不过代码改了不少，减少了些代码便于学习。 

  1. <!DOCTYPE html>
  2. <html>
  3.     <body>
  4.         <h3>AI五子棋游戏</h3>
  5.         <canvas id="chess" width="450px" height="450px"></canvas>
  6.         <script>
  7.             var chressBord = []; //棋盘			
  8.             var wins = [];  //存放所有5个棋子在一条线上所有可能性，第一维存放y, 第二维存放x，第三维存放当前的可能性编号
  9.             var count = 0; //赢法总数量
  10.             var myWin = []; //我们赢法的统计数组
  11.             var computerWin = []; //计算机赢法的统计数组
  12.             var chess = document.getElementById("chess");
  13.             var context = chess.getContext('2d');
  14.  
  15.             for(var i = 0; i < 15; i++)
  16. 			{
  17.                 chressBord[i] = [];
  18.                 wins[i] = [];
  19.                 for(var j = 0; j < 15; j++)
  20. 				{
  21.                     chressBord[i][j] = 0;
  22.                     wins[i][j] = [];
  23.                 }
  24.             }
  25. 			
  26.             //横线赢法
  27.             for(var i = 0; i < 15; i++)
  28.                 for(var j = 0; j < 11; j++,count++)
  29.                     for(var k = 0; k < 5; k++)
  30.                         wins[i][j+k][count] = true;
  31. 			
  32.             //竖线赢法
  33.             for(var i = 0; i < 15; i++)
  34.                 for(var j = 0; j < 11; j++,count++)
  35.                     for(var k = 0; k < 5; k++)
  36.                         wins[j+k][i][count] = true;
  37. 			
  38.             //正斜线赢法
  39.             for(var i = 0; i < 11; i++)
  40.                 for(var j = 0; j < 11; j++,count++)
  41.                     for(var k = 0; k < 5; k++)
  42.                         wins[i+k][j+k][count] = true;
  43. 			
  44.             //反斜线赢法
  45.             for(var i = 0; i < 11; i++)  
  46.                 for(var j = 14; j > 3; j--,count++)
  47.                     for(var k = 0; k < 5; k++)
  48.                         wins[i+k][j-k][count] = true;
  49. 			
  50.             for(var i = 0; i < count; i++)
  51. 			{
  52.                 myWin[i] = 0; //这个数组很精髓，记录下棋后我方每一个位置在每种赢法的得分
  53.                 computerWin[i] = 0;
  54.             }
  55.             
  56.             chess.onclick = function(e) // 我，下棋
  57. 			{
  58.                 var i = Math.floor(e.offsetX / 30);
  59.                 var j = Math.floor(e.offsetY / 30);
  60.                 if(chressBord[i][j] == 0)
  61. 				{
  62.                     MoveStep(i,j,"red", 1, myWin);
  63.                     computerAI();
  64.                 }         
  65.             }
  66. 			
  67.             // 计算机下棋，找玩家最容易赢的位置或者电脑最容易赢的位置
  68.             var computerAI = function ()
  69. 			{
  70.                 var myScore = [];
  71.                 var computerScore = [];
  72.                 var max = 0;
  73.                 var u = 0, v = 0;
  74.                 for(var i = 0; i < 15; i++)
  75. 				{
  76.                     myScore[i] = [];
  77.                     computerScore[i] = [];
  78.                     for(var j = 0; j < 15; j++)
  79. 					{
  80.                         myScore[i][j] = 0;
  81.                         computerScore[i][j] = 0;
  82.                     }
  83.                 }
  84. 				
  85. 				//找落子赢的概率最大坐标
  86.                 for(var i = 0; i < 15; i++)
  87. 				{
  88.                     for(var j = 0; j < 15; j++)
  89. 					{						
  90. 						for(var k = 0; k < count; k++) //遍历到i,j这个坐标时，计算谁的得分更高
  91. 						{
  92. 							if(chressBord[i][j] != 0 || !wins[i][j][k]) //当前i,j坐标还没落子
  93. 								continue;
  94. 							
  95. 							switch(myWin[k])
  96. 							{
  97. 								case 1: myScore[i][j] += 200; break;
  98. 								case 2: myScore[i][j] += 400; break;
  99. 								case 3: myScore[i][j] += 2000; break;
  100. 								case 4: myScore[i][j] += 10000; break;
  101. 							}
  102. 							
  103. 							switch(computerWin[k])
  104. 							{
  105. 								case 1: computerScore[i][j] += 220; break;
  106. 								case 2: computerScore[i][j] += 420; break;
  107. 								case 3: computerScore[i][j] += 2100; break;
  108. 								case 4: computerScore[i][j] += 20000; break;
  109. 							}
  110. 						}
  111. 						
  112. 						if(myScore[i][j] > max) //如果玩家落子的分数多，就替换
  113. 						{
  114. 							max  = myScore[i][j];
  115. 							u = i;
  116. 							v = j;
  117. 						}
  118. 						else if(myScore[i][j] == max)  //如果玩家落子的分数跟原来最多分数一样多
  119. 						{
  120. 							if(computerScore[i][j] > computerScore[u][v]) //如果电脑在i,j落子的分数比u,v的分数多，就替换
  121. 							{
  122. 								u = i;
  123. 								v = j;    
  124. 							}
  125. 						}
  126. 						
  127. 						if(computerScore[i][j] > max) //如果电脑下棋新位置分数比原来的多，就替换
  128. 						{
  129. 							max  = computerScore[i][j];
  130. 							u = i;
  131. 							v = j;
  132. 						}
  133. 						else if(computerScore[i][j] == max) //如果电脑下棋新位置分数跟原来的一样多
  134. 						{
  135. 							if(myScore[i][j] > myScore[u][v]) //如果玩家落子的分数多，就准备把玩家最好的位置占掉
  136. 							{
  137. 								u = i;
  138. 								v = j;    
  139. 							}
  140. 						}
  141.                     }
  142.                 }
  143. 				
  144.                 MoveStep(u,v,"blue", 2, computerWin);
  145.             }
  146. 			
  147. 			var CheckWin = function(i, j, Role, WinArray)
  148. 			{			
  149. 				for(var k = 0; k < count; k++)
  150. 					if(wins[i][j][k]) // 将可能赢的情况都加1
  151. 					{
  152. 						WinArray[k]++;
  153. 						if(WinArray[k] >= 5)
  154. 							alert(Role + ': 恭喜，你赢了！')
  155. 					}
  156. 			}
  157. 			
  158.             //绘画棋盘
  159.             var drawChessBoard = function() 
  160. 			{
  161.                 for(var i = 0; i < 15; i++)
  162. 				{
  163.                     context.moveTo(15 + i * 30 , 15);
  164.                     context.lineTo(15 + i * 30 , 435);
  165.                     context.moveTo(15 , 15 + i * 30);
  166.                     context.lineTo(435 , 15 + i * 30);
  167.                     context.stroke();
  168.                 }
  169.             }
  170. 			
  171.             drawChessBoard(); // 画棋盘
  172.             
  173.             var MoveStep = function(i,j,Role, ID, WinArray) //落子
  174. 			{
  175.                 context.beginPath();
  176.                 context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
  177.                 context.closePath();    
  178.                 context.fillStyle = Role;
  179.                 context.fill(); //填充颜色
  180. 				
  181. 				chressBord[i][j] = ID; //玩家ID棋盘位置占位
  182. 				CheckWin(i,j,Role, WinArray);  //判断是否获胜，这里也很精髓，递归思想
  183.             }
  184.         </script>
  185.     </body>
  186. </html>

附原来的代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>AI五子棋游戏</title>
  6.         <style type='text/css'>
  7.             canvas {
  8.                 display: block;
  9.                 margin: 50px auto;
  10.                 box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
  11.                 cursor: pointer;
  12.             }
  13.             .btn-wrap { 
  14.                 display: flex; 
  15.                 flex-direction: row; 
  16.                 justify-content:center;
  17.             }
  18.             .btn-wrap div { 
  19.                 margin: 0 10px;
  20.             }
  21.             div>span {
  22.                 display: inline-block;
  23.                 padding: 10px 20px;
  24.                 color: #fff;
  25.                 background-color: #EE82EE;
  26.                 border-radius: 5px;
  27.                 cursor: pointer;
  28.             }
  29.             div.unable span { 
  30.                 background: #D6D6D4; 
  31.                 color: #adacaa;
  32.             }
  33.             #result-wrap {text-align: center;}
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <h3 id="result-wrap">AI五子棋</h3>
  38.         <canvas id="chess" width="450px" height="450px"></canvas>
  39.         <div class="btn-wrap">
  40.             <div id='restart' class="restart">
  41.                 <span>重新开始</span>
  42.             </div>
  43.             <div id='goback' class="goback unable">
  44.                 <span>悔棋</span>
  45.             </div>
  46.             <div id='return' class="return unable">
  47.                 <span>撤销悔棋</span>
  48.             </div>
  49.         </div>
  50.         <script type="text/javascript" charset="utf-8">
  51.             var over = false;
  52.             var me = true; //我
  53.             var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
  54.             var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
  55.             var _myWin = [], _compWin = []; //记录我，计算机赢的情况
  56.             var backAble = false, returnAble = false; 
  57.             var resultTxt = document.getElementById('result-wrap');
  58.             var chressBord = [];//棋盘
  59.             for(var i = 0; i < 15; i++){
  60.                 chressBord[i] = [];
  61.                 for(var j = 0; j < 15; j++){
  62.                     chressBord[i][j] = 0;
  63.                 }
  64.             }
  65.             //赢法的统计数组
  66.             var myWin = [];
  67.             var computerWin = [];
  68.             //赢法数组
  69.             var wins = [];
  70.             for(var i = 0; i < 15; i++){
  71.                 wins[i] = [];
  72.                 for(var j = 0; j < 15; j++){
  73.                     wins[i][j] = [];
  74.                 }
  75.             }
  76.             var count = 0; //赢法总数
  77.             //横线赢法
  78.             for(var i = 0; i < 15; i++){
  79.                 for(var j = 0; j < 11; j++){
  80.                     for(var k = 0; k < 5; k++){
  81.                         wins[i][j+k][count] = true;
  82.                     }
  83.                     count++;
  84.                 }
  85.             }
  86.             //竖线赢法
  87.             for(var i = 0; i < 15; i++){
  88.                 for(var j = 0; j < 11; j++){
  89.                     for(var k = 0; k < 5; k++){
  90.                         wins[j+k][i][count] = true;
  91.                     }
  92.                     count++;
  93.                 }
  94.             }
  95.             //正斜线赢法
  96.             for(var i = 0; i < 11; i++){
  97.                 for(var j = 0; j < 11; j++){
  98.                     for(var k = 0; k < 5; k++){
  99.                         wins[i+k][j+k][count] = true;
  100.                     }
  101.                     count++;
  102.                 }
  103.             }
  104.             //反斜线赢法
  105.             for(var i = 0; i < 11; i++){ 
  106.                 for(var j = 14; j > 3; j--){
  107.                     for(var k = 0; k < 5; k++){
  108.                         wins[i+k][j-k][count] = true;
  109.                     }
  110.                     count++;
  111.                 }
  112.             }
  113.             // debugger;
  114.             for(var i = 0; i < count; i++){
  115.                 myWin[i] = 0;
  116.                 _myWin[i] = 0;
  117.                 computerWin[i] = 0;
  118.                 _compWin[i] = 0;
  119.             }
  120.             var chess = document.getElementById("chess");
  121.             var context = chess.getContext('2d');
  122.             context.strokeStyle = '#bfbfbf'; //边框颜色
  123.             var backbtn = document.getElementById("goback");
  124.             var returnbtn = document.getElementById("return");
  125.             window.onload = function(){
  126.                 drawChessBoard(); // 画棋盘
  127.             }
  128.             document.getElementById("restart").onclick = function(){
  129.                 window.location.reload();
  130.             }
  131.             // 我，下棋
  132.             chess.onclick = function(e){
  133.                 if(over){
  134.                     return;
  135.                 }
  136.                 if(!me){
  137.                     return;
  138.                 }
  139.                 // 悔棋功能可用
  140.                 backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
  141.                 var x = e.offsetX;
  142.                 var y = e.offsetY;
  143.                 var i = Math.floor(x / 30);
  144.                 var j = Math.floor(y / 30);
  145.                 _nowi = i;
  146.                 _nowj = j;
  147.                 if(chressBord[i][j] == 0){
  148.                     oneStep(i,j,me);
  149.                     chressBord[i][j] = 1; //我，已占位置        
  150.                                 
  151.                     for(var k = 0; k < count; k++){ // 将可能赢的情况都加1
  152.                         if(wins[i][j][k]){
  153.                             // debugger;
  154.                             myWin[k]++;
  155.                             _compWin[k] = computerWin[k];
  156.                             computerWin[k] = 6;//这个位置对方不可能赢了
  157.                             if(myWin[k] == 5){
  158.                                 // window.alert('你赢了');
  159.                                 resultTxt.innerHTML = '恭喜，你赢了！';
  160.                                 over = true;
  161.                             }
  162.                         }
  163.                     }
  164.                     if(!over){
  165.                         me = !me;
  166.                         computerAI();
  167.                     }
  168.                 }         
  169.             }
  170.             // 悔棋
  171.             backbtn.onclick = function(e){
  172.                 if(!backAble) { return;}
  173.                 over = false;
  174.                 me = true;
  175.                 // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
  176.                 // 撤销悔棋功能可用
  177.                 returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
  178.                 // 我，悔棋
  179.                 chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
  180.                 minusStep(_nowi, _nowj); //销毁棋子                                  
  181.                 for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
  182.                     if(wins[_nowi][_nowj][k]){
  183.                         myWin[k]--;
  184.                         computerWin[k] = _compWin[k];//这个位置对方可能赢
  185.                     }
  186.                 }
  187.                 // 计算机相应的悔棋
  188.                 chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
  189.                 minusStep(_compi, _compj); //销毁棋子                                  
  190.                 for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
  191.                     if(wins[_compi][_compj][k]){
  192.                         computerWin[k]--;
  193.                         myWin[k] = _myWin[i];//这个位置对方可能赢
  194.                     }
  195.                 }
  196.                 resultTxt.innerHTML = '--益智五子棋--';
  197.                 returnAble = true;
  198.                 backAble = false;
  199.             }
  200.             // 撤销悔棋
  201.             returnbtn.onclick = function(e){
  202.                 if(!returnAble) { return; }
  203.                    // 我，撤销悔棋
  204.                 chressBord[_nowi][_nowj] = 1; //我，已占位置 
  205.                 oneStep(_nowi,_nowj,me);                              
  206.                 for(var k = 0; k < count; k++){ 
  207.                     if(wins[_nowi][_nowj][k]){
  208.                         myWin[k]++;
  209.                         _compWin[k] = computerWin[k];
  210.                         computerWin[k] = 6;//这个位置对方不可能赢
  211.                     }
  212.                     if(myWin[k] == 5){
  213.                         resultTxt.innerHTML = '恭喜，你赢了！';
  214.                         over = true;
  215.                     }
  216.                 }
  217.                 // 计算机撤销相应的悔棋
  218.                 chressBord[_compi][_compj] = 2; //计算机，已占位置   
  219.                 oneStep(_compi,_compj,false);                               
  220.                 for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
  221.                     if(wins[_compi][_compj][k]){
  222.                         computerWin[k]++;
  223.                         _myWin[k] = myWin[k];
  224.                         myWin[k] = 6;//这个位置对方不可能赢
  225.                     }
  226.                     if(computerWin[k] == 5){
  227.                         resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
  228.                         over = true;
  229.                     }
  230.                 }
  231.                 returnbtn.className += ' '+ 'unable';
  232.                 returnAble = false;
  233.                 backAble = true;
  234.             }
  235.             // 计算机下棋
  236.             var computerAI = function (){
  237.                 var myScore = [];
  238.                 var computerScore = [];
  239.                 var max = 0;
  240.                 var u = 0, v = 0;
  241.                 for(var i = 0; i < 15; i++){
  242.                     myScore[i] = [];
  243.                     computerScore[i] = [];
  244.                     for(var j = 0; j < 15; j++){
  245.                         myScore[i][j] = 0;
  246.                         computerScore[i][j] = 0;
  247.                     }
  248.                 }
  249.                 for(var i = 0; i < 15; i++){
  250.                     for(var j = 0; j < 15; j++){
  251.                         if(chressBord[i][j] == 0){
  252.                             for(var k = 0; k < count; k++){
  253.                                 if(wins[i][j][k]){
  254.                                     if(myWin[k] == 1){
  255.                                         myScore[i][j] += 200;
  256.                                     }else if(myWin[k] == 2){
  257.                                         myScore[i][j] += 400;
  258.                                     }else if(myWin[k] == 3){
  259.                                         myScore[i][j] += 2000;
  260.                                     }else if(myWin[k] == 4){
  261.                                         myScore[i][j] += 10000;
  262.                                     }
  263.                                     
  264.                                     if(computerWin[k] == 1){
  265.                                         computerScore[i][j] += 220;
  266.                                     }else if(computerWin[k] == 2){
  267.                                         computerScore[i][j] += 420;
  268.                                     }else if(computerWin[k] == 3){
  269.                                         computerScore[i][j] += 2100;
  270.                                     }else if(computerWin[k] == 4){
  271.                                         computerScore[i][j] += 20000;
  272.                                     }                        
  273.                                 }
  274.                             }
  275.                             
  276.                             if(myScore[i][j] > max){
  277.                                 max  = myScore[i][j];
  278.                                 u = i;
  279.                                 v = j;
  280.                             }else if(myScore[i][j] == max){
  281.                                 if(computerScore[i][j] > computerScore[u][v]){
  282.                                     u = i;
  283.                                     v = j;    
  284.                                 }
  285.                             }
  286.                             
  287.                             if(computerScore[i][j] > max){
  288.                                 max  = computerScore[i][j];
  289.                                 u = i;
  290.                                 v = j;
  291.                             }else if(computerScore[i][j] == max){
  292.                                 if(myScore[i][j] > myScore[u][v]){
  293.                                     u = i;
  294.                                     v = j;    
  295.                                 }
  296.                             }
  297.                             
  298.                         }
  299.                     }
  300.                 }
  301.                 _compi = u;
  302.                 _compj = v;
  303.                 oneStep(u,v,false);
  304.                 chressBord[u][v] = 2;  //计算机占据位置
  305.                 for(var k = 0; k < count; k++){
  306.                     if(wins[u][v][k]){
  307.                         computerWin[k]++;
  308.                         _myWin[k] = myWin[k];
  309.                         myWin[k] = 6;//这个位置对方不可能赢了
  310.                         if(computerWin[k] == 5){
  311.                             resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
  312.                             over = true;
  313.                         }
  314.                     }
  315.                 }
  316.                 if(!over){
  317.                     me = !me;
  318.                 }
  319.                 backAble = true;
  320.                 returnAble = false;
  321.                 var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
  322.                 if(!hasClass) {
  323.                     returnbtn.className += ' ' + 'unable';
  324.                 }
  325.             }
  326.             //绘画棋盘
  327.             var drawChessBoard = function() {
  328.                 for(var i = 0; i < 15; i++){
  329.                     context.moveTo(15 + i * 30 , 15);
  330.                     context.lineTo(15 + i * 30 , 435);
  331.                     context.stroke();
  332.                     context.moveTo(15 , 15 + i * 30);
  333.                     context.lineTo(435 , 15 + i * 30);
  334.                     context.stroke();
  335.                 }
  336.             }
  337.             //画棋子
  338.             var oneStep = function(i,j,me) {
  339.                 context.beginPath();
  340.                 context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
  341.                 context.closePath();
  342.                 //渐变
  343.                 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
  344.                 if(me){
  345.                     gradient.addColorStop(0,'#0a0a0a');
  346.                     gradient.addColorStop(1,'#636766');
  347.                 }else{
  348.                     gradient.addColorStop(0,'#d1d1d1');
  349.                     gradient.addColorStop(1,'#f9f9f9');
  350.                 }
  351.                 context.fillStyle = gradient;
  352.                 context.fill();
  353.             }
  354.             //销毁棋子
  355.             var minusStep = function(i,j) {
  356.                 //擦除该圆
  357.                 context.clearRect((i) * 30, (j) * 30, 30, 30);
  358.                 // 重画该圆周围的格子
  359.                 context.beginPath();
  360.                 context.moveTo(15+i*30 , j*30);
  361.                 context.lineTo(15+i*30 , j*30 + 30);
  362.                 context.moveTo(i*30, j*30+15);
  363.                 context.lineTo((i+1)*30 , j*30+15);
  364.     
  365.                 context.stroke();
  366.             }
  367.         </script>
  368.     </body>
  369. </html>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号