上传
当前位置：棋牌网 > 1.8网页游戏 > HTML5实现人工智能中国象棋网页小游戏
大资源网

HTML5实现人工智能中国象棋网页小游戏

作者:大资源网

HTML5中国象棋网页小游戏源码分享，HTML5+js实现中国象棋网页小游戏。人工智能网页象棋小游戏。游戏背景为木板，页面默认显示较小，可通过换肤变大棋盘。象棋游戏包括新手、中级、大师水平，可以悔棋，同时显示AI搜索结果，提示最佳走法。进入游戏后请选择你要对战的水平HTML5实现人工智能中国象棋网页小游戏-棋牌网

HTML5中国象棋网页小游戏源码分享，HTML5+js实现中国象棋网页小游戏。人工智能网页象棋小游戏。游戏背景为木板，页面默认显示较小，可通过换肤变大棋盘。象棋游戏包括新手、中级、大师水平，可以悔棋，同时显示AI搜索结果，提示最佳走法。

1、html页面代码

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
  5. <title>HTML5实现中国象棋网页小游戏 – bokequ.com</title>
  6. <link href=“css/zzsc.css” type=“text/css” rel=“stylesheet” />
  7. </head>
  8. <body>
  9. <div class=“box” id=“box”>
  10. <div class=“chess_left”>
  11. <canvas id=“chess”>对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！</canvas>
  12. <audio src=“audio/click.wav” id=“clickAudio” preload=“auto”></audio>
  13. <!–<audio src=”audio/check.wav” id=”checkAudio” preload=”auto”></audio>–>
  14. <audio src=“audio/select.wav” id=“selectAudio” preload=“auto”></audio>
  15. <div>
  16. <div class=“bn_box” id=“bnBox”>
  17. <input type=“button” name=“offensivePlay” id=“tyroPlay” value=“新手水平” />
  18. <input type=“button” name=“offensivePlay” id=“superPlay” value=“中级水平” />
  19. <input type=“button” name=“button” id=“” value=“大师水平” disabled />
  20. <!–
  21. <input type=”button” name=”offensivePlay” id=”offensivePlay” value=”先手开始” />
  22. <input type=”button” name=”defensivePlay” id=”defensivePlay” value=”后手开始” />
  23. –>
  24. <input type=“button” name=“regret” id=“regretBn” value=“悔棋” />
  25. <input type=“button” name=“billBn” id=“billBn” value=“棋谱” class=“bn_box” />
  26. <input type=“button” name=“stypeBn” id=“stypeBn” value=“换肤” />
  27. </div>
  28. </div>
  29. </div>
  30. <div class=“chess_right” id=“chessRight”>
  31. <select name=“billList” id=“billList”>
  32. </select>
  33. <ol id=“billBox” class=“bill_box”>
  34. </ol>
  35. </div>
  36. <div id=“moveInfo” class=“move_info”> </div>
  37. </div>
  38. <script src=“js/common.js”></script>
  39. <script src=“js/play.js”></script>
  40. <script src=“js/AI.js”></script>
  41. <script src=“js/bill.js”></script>
  42. <script src=“js/gambit.js”></script>
  43. <div style=“text–align:center;clear:both“>
  44. <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器</p>
  45. </div>
  46. </body>
  47. </html>

2、部分js代码

  1. /*! qq一叶孤舟 */
  2. var AI = AI||{};
  3. AI.historyTable = {}; //历史表
  4. //人工智能初始化
  5. AI.init = function(pace){
  6. var bill = AI.historyBill || com.gambit; //开局库
  7. if (bill.length){
  8. var len=pace.length;
  9. var arr=[];
  10. //先搜索棋谱
  11. for (var i=0;i< bill.length;i++){
  12. if (bill[i].slice(0,len)==pace) {
  13. arr.push(bill[i]);
  14. }
  15. }
  16. if (arr.length){
  17. var inx=Math.floor( Math.random() * arr.length );
  18. AI.historyBill = arr ;
  19. return arr[inx].slice(len,len+4).split(“”);
  20. }else{
  21. AI.historyBill = [] ;
  22. }
  24. }
  25. //如果棋谱里面没有，人工智能开始运作
  26. var initTime = new Date().getTime();
  27. AI.treeDepth=play.depth;
  28. //AI.treeDepth=4;
  30. AI.number=0;
  31. AI.setHistoryTable.lenght = 0
  32.  
  33. var val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);
  34. //var val = AI.iterativeSearch(com.arr2Clone(play.map),play.my)
  35. if (!val||val.value==-8888) {
  36. AI.treeDepth=2;
  37. val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);
  38. }
  39. //var val = AI.iterativeSearch(com.arr2Clone(play.map),play.my);
  40. if (val&&val.value!=-8888) {
  41. var man = play.mans[val.key];
  42. var nowTime= new Date().getTime();
  43. com.get(“moveInfo”).innerHTML=‘<h3>AI搜索结果：</h3>最佳着法：’+
  44. com.createMove(com.arr2Clone(play.map),man.x,man.y,val.x,val.y)+
  45. ‘<br />搜索深度：’+AI.treeDepth+‘<br />搜索分支：’+
  46. AI.number+‘个 <br />最佳着法评估：’+
  47. val.value+‘分’+
  48. ‘ <br />搜索用时：’+
  49. (nowTime–initTime)+‘毫秒’
  50. return [man.x,man.y,val.x,val.y]
  51. }else {
  52. return false;
  53. }
  54. }
  55. //迭代加深搜索着法
  56. AI.iterativeSearch = function (map, my){
  57. var timeOut=100;
  58. var initDepth = 1;
  59. var maxDepth = 8;
  60. AI.treeDepth=0;
  61. var initTime = new Date().getTime();
  62. var val = {};
  63. for (var i=initDepth; i<=maxDepth; i++){
  64. var nowTime= new Date().getTime();
  65. AI.treeDepth=i;
  66. AI.aotuDepth=i;
  67. var val = AI.getAlphaBeta(-99999, 99999, AI.treeDepth , map ,my)
  68. if (nowTime–initTime > timeOut){
  69. return val;
  70. }
  71. }
  72. return false;
  73. }
  74.  
  75. //取得棋盘上所有棋子
  76. AI.getMapAllMan = function (map, my){
  77. var mans=[];
  78. for (var i=0; i<map.length; i++){
  79. for (var n=0; n<map[i].length; n++){
  80. var key = map[i][n];
  81. if (key && play.mans[key].my == my){
  82. play.mans[key].x = n;
  83. play.mans[key].y = i;
  84. mans.push(play.mans[key])
  85. }
  86. }
  87. }
  88. return mans;
  89. }
  90.  
  91. /*
  92. //取得棋谱所有己方棋子的着法
  93. AI.getMoves = function (map, my, txtMap){
  94. var highMores = []; //优先级高的着法
  95. var manArr = AI.getMapAllMan (map, my);
  96. var moves = [];
  97. var history=AI.historyTable[txtMap];
  98. for (var i=0; i<manArr.length; i++){
  99. var man = manArr[i];
  100. var val=man.bl(map);
  101. for (var n=0; n<val.length; n++){
  102. if (history){
  103. highMores.push([man.x,man.y,val[n][0],val[n][1],man.key])
  104. }else{
  105. moves.push([man.x,man.y,val[n][0],val[n][1],man.key])
  106. }
  107. }
  108. }
  109. return highMores.concat(moves);
  110. }
  111. */
  112. //取得棋谱所有己方棋子的着法
  113. AI.getMoves = function (map, my){
  114. var manArr = AI.getMapAllMan (map, my);
  115. var moves = [];
  116. var foul=play.isFoul;
  117. for (var i=0; i<manArr.length; i++){
  118. var man = manArr[i];
  119. var val=man.bl(map);
  121. for (var n=0; n<val.length; n++){
  122. var x=man.x;
  123. var y=man.y;
  124. var newX=val[n][0];
  125. var newY=val[n][1];
  126. //如果不是长将着法
  127. if (foul[0]!=x || foul[1]!=y || foul[2]!=newX || foul[3]!=newY ){
  128. moves.push([x,y,newX,newY,man.key])
  129. }
  130. }
  131. }
  132. return moves;
  133. }
  134. //A:当前棋手value/B:对手value/depth：层级
  135. AI.getAlphaBeta = function (A, B, depth, map ,my) {
  136. //var txtMap= map.join();
  137. //var history=AI.historyTable[txtMap];
  138. // if (history && history.depth >= AI.treeDepth-depth+1){
  139. // return history.value*my;
  140. //}
  141. if (depth == 0) {
  142. return {“value”:AI.evaluate(map , my)}; //局面评价函数;
  143. 　 }
  144. 　 var moves = AI.getMoves(map , my ); //生成全部走法;
  145. 　 //这里排序以后会增加效率
  146.  
  147. for (var i=0; i < moves.length; i++) {
  150. 　　 //走这个走法;
  151. var move= moves[i];
  152. var key = move[4];
  153. var oldX= move[0];
  154. var oldY= move[1];
  155. var newX= move[2];
  156. var newY= move[3];
  157. var clearKey = map[ newY ][ newX ]||“”;
  158.  
  159. map[ newY ][ newX ] = key;
  160. delete map[ oldY ][ oldX ];
  161. play.mans[key].x = newX;
  162. play.mans[key].y = newY;
  164. 　　if (clearKey==“j0”||clearKey==“J0”) {//被吃老将,撤消这个走法;
  165. play.mans[key] .x = oldX;
  166. play.mans[key] .y = oldY;
  167. map[ oldY ][ oldX ] = key;
  168. delete map[ newY ][ newX ];
  169. if (clearKey){
  170. map[ newY ][ newX ] = clearKey;
  171. // play.mans[ clearKey ].isShow = false;
  172. }
  173.  
  174. return {“key”:key,“x”:newX,“y”:newY,“value”:8888};
  175. //return rootKey;
  176. 　　}else {
  177. 　　 var val = –AI.getAlphaBeta(-B, –A, depth – 1, map , –my).value;
  178. //val = val || val.value;
  180. 　　 //撤消这个走法;　
  181. play.mans[key] .x = oldX;
  182. play.mans[key] .y = oldY;
  183. map[ oldY ][ oldX ] = key;
  184. delete map[ newY ][ newX ];
  185. if (clearKey){
  186. map[ newY ][ newX ] = clearKey;
  187. //play.mans[ clearKey ].isShow = true;
  188. }
  189. 　　 if (val >= B) {
  190. //将这个走法记录到历史表中;
  191. //AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,B,my);
  192. return {“key”:key,“x”:newX,“y”:newY,“value”:B};
  193. }
  194. if (val > A) {
  195. 　　　　 A = val; //设置最佳走法;
  196. if (AI.treeDepth == depth) var rootKey={“key”:key,“x”:newX,“y”:newY,“value”:A};
  197. }
  198. }
  199. 　 }
  200. //将这个走法记录到历史表中;
  201. //AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,A,my);
  202. if (AI.treeDepth == depth) {//已经递归回根了
  203. if (!rootKey){
  204. //AI没有最佳走法，说明AI被将死了，返回false
  205. return false;
  206. }else{
  207. //这个就是最佳走法;
  208. return rootKey;
  209. }
  210. }
  211. 　return {“key”:key,“x”:newX,“y”:newY,“value”:A};
  212. }
  213.  
  214. //奖着法记录到历史表
  215. AI.setHistoryTable = function (txtMap,depth,value,my){
  216. AI.setHistoryTable.lenght ++;
  217. AI.historyTable[txtMap] = {depth:depth,value:value}
  218. }
  219.  
  220. //评估棋局 取得棋盘双方棋子价值差
  221. AI.evaluate = function (map,my){
  222. var val=0;
  223. for (var i=0; i<map.length; i++){
  224. for (var n=0; n<map[i].length; n++){
  225. var key = map[i][n];
  226. if (key){
  227. val += play.mans[key].value[i][n] * play.mans[key].my;
  228. }
  229. }
  230. }
  231. //val+=Math.floor( Math.random() * 10); //让AI走棋增加随机元素
  232. //com.show()
  233. //z(val*my)
  234. AI.number++;
  235. return val*my;
  236. }
  237.  
  238. //评估棋局 取得棋盘双方棋子价值差
  239. AI.evaluate1 = function (map,my){
  240. var val=0;
  241. for (var i in play.mans){
  242. var man=play.mans[i];
  243. if (man.isShow){
  244. val += man.value[man.y][man.x] * man.my;
  245. }
  246. }
  247. //val+=Math.floor( Math.random() * 10); //让AI走棋增加随机元素
  248. //com.show()
  249. //z(val*my)
  250. AI.number++;
  251. return val*my;
  252. }
  • 3554稳定运行(天)
  • 1会员总数(位)
  • 28195资源总数(个)
  • 0 本周更新(个)
  • 0今日发布(个)

目前已经有 1 位会员加入