JavaScript实现一个带AI的井字棋游戏源码
网络 2018-06-11 1241
这篇文章主要介绍了基于JavaScript实现一个带AI的井字棋游戏源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
最近有一门课结束了，需要做一个井字棋的游戏，我用JavaScript写了一个。首先界面应该问题不大，用html稍微写一下就可以。主要是人机对弈时的ai算法，如何使电脑方聪明起来，是值得思考一下的。开始游戏后，由玩家先行。那么站在计算机的角度，可以对多种情况进行分析，并按照重要程度赋予权值。
情况如下：
1、同一排（行。列。对角线）有且只有两个棋子，并且都是自己的，只要再进一步就能获胜，那么剩下的那个位置权值最高，优先级最大。赋予一级权值。
2、同一排（行。列。对角线）有且只有两个棋子，并且都是对方的（也就是玩家的），只要再进一步，玩家就会成功，所以“我”要堵住，剩下的那个位置赋予二级权值。
3、因为电脑方后行，如果聪明点，需要一直堵玩家方，所以当一排只有一个棋，且是玩家的棋子，那么该排其他位置的权值设为三级。
4、四级权值：一排只有己方（电脑方）的棋子。
5、五级权限：同排没有棋子，包括对方和己方。
实现的时候，每个位置的棋子，可以用二维数组full表示，每个位置的权值大小也用一个二维数组val来表示。玩家方下完后，调用AI方的函数，AI方行棋前，先更新一下权值，然后选出权值最大的位置落子（最优解）。无论是ai还是玩家方，每次落子后都要判断有没有产生输赢。用alert（）函数输出结果。
为了表示权值的大小，规定按照一级到五级顺序，依次加 10000、1000、10、5、3
注：由于可能要提交源码，我没有分离出css样式和js文件，不过最好还是分开写更规范。如有不足之处，欢迎批评指正。
源码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 | <html> <head> <meta charset="utf-8"> <title>井字棋</title> <script> //定义全局变量 var full=[[0,0,0],[0,0,0],[0,0,0]];//0表示null，1表示我下的，2表示电脑下的 var val=[[1,1,1],[1,1,1],[1,1,1]];//表示每个位置的权值 function judge(){ //检测是否有人赢 //行 for(var i=0;i<3;i++){ if(full[i][0]==full[i][1]&&full[i][1]==full[i][2]&&full[i][0]!=0){ if(full[i][0]==1){ window.alert("you win!"); return true; } else { window.alert("you lose"); return true; } } } //列 for(var i=0;i<3;i++){ if(full[0][i]==full[1][i]&&full[1][i]==full[2][i]&&full[0][i]!=0){ if(full[0][i]==1){ window.alert("you win!"); return true; } else { window.alert("you lose"); return true; } } } //主对角线 if(full[0][0]==full[1][1]&&full[1][1]==full[2][2]&&full[0][0]!=0){ if(full[0][0]==1){ window.alert("you win!"); return true; } else { window.alert("you lose"); return true; } } if(full[0][2]==full[1][1]&&full[2][0]==full[1][1]&&full[0][2]!=0){ if(full[0][2]==1){ window.alert("you win!"); return true; } else { window.alert("you lose"); return true; } } for(var i=0;i<3;i++){ for(var j=0;j<3;j++){ if(full[i][j]==0) return false;//说明还没结束 if(i==2&&j==2) {window.alert("平局！"); return true; } } } return false;//无结果 } function bn(i,j){ //如果已经下过，则无效 if(full[i][j]!=0){ return 0; }else{ //没下过 full[i][j]=1; num1=(i*3+j+1)+""; document.getElementById(num1).value="X"; if(judge()==true){ return; } ai();//切换 } } //重置权值： function resetValue(){ for(var i=0;i<3;i++){ for(var j=0;j<3;j++){ if(full[i][j]!=0) val[i][j]=0; else{ //看行和列： //最高权值 if(((full[0][j]+full[1][j]+full[2][j])==4)&&(full[0][j]*full[1][j]*full[2][j])==0 &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1) val[i][j]=val[i][j]+10000; if(((full[i][0]+full[i][1]+full[i][2])==4)&&(full[i][0]*full[i][1]*full[i][2])==0 &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1) val[i][j]=val[i][j]+10000; //次级权值 if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0 &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0) val[i][j]=val[i][j]+1000; if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0 &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0) val[i][j]=val[i][j]+1000; //三级权值（一排只有一个X） if(((full[0][j]+full[1][j]+full[2][j])==1)&&(full[0][j]*full[1][j]*full[2][j])==0 &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0) val[i][j]=val[i][j]+10; if(((full[i][0]+full[i][1]+full[i][2])==1)&&(full[i][0]*full[i][1]*full[i][2])==0 &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0) val[i][j]=val[i][j]+10; //四级权值（一排只有一个O） if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0 &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==1) val[i][j]=val[i][j]+5; if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0 &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==1) val[i][j]=val[i][j]+5; //五级权限（该行没有X或O） if(((full[0][j]+full[1][j]+full[2][j])==0)&&(full[0][j]*full[1][j]*full[2][j])==0 &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1) val[i][j]=val[i][j]+2; if(((full[i][0]+full[i][1]+full[i][2])==0)&&(full[i][0]*full[i][1]*full[i][2])==0 &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1) val[i][j]=val[i][j]+2; //主对角线：同上 if((i==0&&j==0)||(i==2&&j==2)||(i==1&&j==1)){ if(((full[0][0]+full[1][1]+full[2][2])==4)&&(full[0][0]*full[1][1]*full[2][2])==0 &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1) val[i][j]=val[i][j]+10000; //次级权值 if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0 &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0) val[i][j]=val[i][j]+1000; //三级权值（一排只有一个X） if(((full[0][0]+full[1][1]+full[2][2])==1)&&(full[0][0]*full[1][1]*full[2][2])==0 &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0) val[i][j]=val[i][j]+10; //四级权值（一排只有一个O） if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0 &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==1) val[i][j]=val[i][j]+5; //五级权值（该行没有X或O） if(((full[0][0]+full[1][1]+full[2][2])==0)&&(full[0][0]*full[1][1]*full[2][2])==0 &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1) val[i][j]=val[i][j]+2; } //副对角线(同上) if((i==0&&j==2)||(i==2&&j==0)||(i==1&&j==1)){ //一级 if(((full[0][2]+full[1][1]+full[2][0])==4)&&(full[0][2]*full[1][1]*full[2][0])==0 &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1) val[i][j]=val[i][j]+10000; //二级 if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0 &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0) val[i][j]=val[i][j]+1000; //三级权值（一排只有一个X） if(((full[0][2]+full[1][1]+full[2][0])==1)&&(full[0][2]*full[1][1]*full[2][0])==0 &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0) val[i][j]=val[i][j]+10; //四级权值（一排只有一个O） if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0 &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==1) val[i][j]=val[i][j]+5; //五级权值（该行没有X或O） if(((full[0][2]+full[1][1]+full[2][0])==0)&&(full[0][2]*full[1][1]*full[2][0])==0 &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1) val[i][j]=val[i][j]+2; } } } } } function ai(){ if(judge()==true){ return; } //挑选权值最大的 resetValue(); var mi=0,mj=0,temp=0; for(var i=0;i<3;i++) for(var j=0;j<3;j++){ if(val[i][j]>temp){ temp=val[i][j]; mi=i; mj=j; } } full[mi][mj]=2; num1=(mi*3+mj+1)+""; document.getElementById(num1).value="O"; if(judge()==true){ return; } } function lose(){ window.alert("you lose"); location.reload(); } </script> </head> <body> <h1 align=center> 井字棋</h1> <table border=2px bordercolor="blue"width="300"height="300" style="font-size:50 " align=center> <tr> <td><input type="button" id="1" Style="width:100px;height:100px;" value=" " onclick="bn(0,0)"/></td> <td><input type="button" id="2" Style="width:100px;height:100px;" value=" " onclick="bn(0,1)"/></td> <td><input type="button" id="3" Style="width:100px;height:100px;" value=" " onclick="bn(0,2)"/></td> </tr> <tr> <td><input type="button" id="4" Style="width:100px;height:100px;" value=" " onclick="bn(1,0)"/></td> <td><input type="button" id="5" Style="width:100px;height:100px;" value=" " onclick="bn(1,1)"/></td> <td><input type="button" id="6" Style="width:100px;height:100px;" value=" " onclick="bn(1,2)"/></td> </tr> <tr > <td><input type="button" id="7" Style="width:100px;height:100px;" value=" " onclick="bn(2,0)"/></td> <td><input type="button" id="8" Style="width:100px;height:100px;" value=" " onclick="bn(2,1)"/></td> <td><input type="button" id="9" Style="width:100px;height:100px;" value=" " onclick="bn(2,2)"/></td> </tr> </table> <div ><input type="button" style="position:relative;left:500px;top:5px;width:100px;height:50px;" value="重新开始" onclick="location.reload() "/> <input type="button" style="position:relative;left:550px;top:5px;width:100px;height:50px;" value="认 输" onclick="lose()"/> </div> <body> </html> |
总结
以上所述是小编给大家介绍的JavaScript实现一个带AI的井字棋游戏源码，希望对大家有所帮助
下一篇：JS实现520 表白简单代码
