• 中国象棋(人机)


    欢迎来到程序小院

    中国象棋

    1. 玩法:
    2. 鼠标左键点击选中棋子,再点击位置进行下棋,可以进行悔棋,重新开始操作,棋盘右侧有AI分析,帮助你进一步提升棋艺,快去下棋吧^^。

    开始游戏icon-default.png?t=N7T8https://www.ormcc.com/play/gameStart/181

    图片

    html

    1. <div class="box" id="box">
    2.             <div class="chess_left">
    3.                 <audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
    4.                 <audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
    5.                 <div  class="game-side">
    6.                     <div class="bn_box" id="bnBox">
    7.                         <input type="button" name="offensivePlay" id="tyroPlay" class="button game-side-span" value="初级" />
    8.                         <input type="button" name="offensivePlay" id="superPlay" class="button game-side-span" value="高级" />
    9.                         <input type="button" name="regret" id="regretBn" class="button game-side-span" value="悔棋" />
    10.                         <input type="button" name="billBn" id="billBn" value="重新开始" class="button game-side-span" class="bn_box" />
    11.                     </div>
    12.                 </div>
    13.                 <div id="moveInfo" class="move_info"> </div>
    14.                 <canvas id="chess"></canvas>
    15.             </div>
    16.             <div class="chess_right" id="chessRight">
    17.             </div>
    18.         </div>

    css

    1. .game-side{
    2.     margin20px auto;
    3.     text-align: center;
    4. }
    5. .game-side button{
    6.     margin:0 20px;
    7. }
    8. .game-side-span{
    9.     border1px solid #eee;
    10.     padding2px 5px;
    11.     border-radius3px;
    12.     font-size12px;
    13.     margin:0 10px;
    14.     background:#eee;
    15.     cursor:pointer;
    16. }
    17. #box,#chess{
    18.     margin0 auto;
    19. }
    20. #moveInfo{
    21.     position: absolute;
    22.     margin-left530px;
    23.     margin-top: -20px;
    24.     color#4a4a4a;
    25. }
    26. #moveInfo h3{
    27.     font-size18px;
    28.     font-weight: bold;
    29. }

    js

    1. //悔棋
    2. play.regret = function (){
    3.  var map  = com.arr2Clone(com.initMap);
    4.  //初始化所有棋子
    5.  for (var i=0; i<map.length; i++){
    6.   for (var n=0; n<map[i].length; n++){
    7.    var key = map[i][n];
    8.    if (key){
    9.     com.mans[key].x=n;
    10.     com.mans[key].y=i;
    11.     com.mans[key].isShow = true;
    12.    }
    13.   }
    14.  }
    15.  var pace= play.pace;
    16.  pace.pop();
    17.  pace.pop();
    18.  
    19.  for (var i=0; i<pace.length; i++){
    20.   var p= pace[i].split("")
    21.   var x = parseInt(p[0], 10);
    22.   var y = parseInt(p[1], 10);
    23.   var newX = parseInt(p[2], 10);
    24.   var newY = parseInt(p[3], 10);
    25.   var key=map[y][x];
    26.   //try{
    27.   
    28.   var cMan=map[newY][newX];
    29.   if (cMan) com.mans[map[newY][newX]].isShow = false;
    30.   com.mans[key].x = newX;
    31.   com.mans[key].y = newY;
    32.   map[newY][newX] = key;
    33.   delete map[y][x];
    34.   if (i==pace.length-1){
    35.    com.showPane(newX ,newY,x,y) 
    36.   }
    37.   //} catch (e){
    38.   // com.show()
    39.   // z([key,p,pace,map])
    40.    
    41.   // }
    42.  }
    43.  play.map = map;
    44.  play.my=1;
    45.  play.isPlay=true;
    46.  com.show();
    47. }
    48. //点击棋盘事件
    49. play.clickCanvas = function (e){
    50.  if (!play.isPlay) return false;
    51.  var key = play.getClickMan(e);
    52.  var point = play.getClickPoint(e);
    53.  
    54.  var x = point.x;
    55.  var y = point.y;
    56.  
    57.  if (key){
    58.   play.clickMan(key,x,y); 
    59.  }else {
    60.   play.clickPoint(x,y); 
    61.  }
    62.  play.isFoul = play.checkFoul();//检测是不是长将
    63. }
    64. //点击棋子,两种情况,选中或者吃子
    65. play.clickMan = function (key,x,y){
    66.  var man = com.mans[key];
    67.  //吃子
    68.  if (play.nowManKey&&play.nowManKey != key && man.my != com.mans[play.nowManKey ].my){
    69.   //man为被吃掉的棋子
    70.   if (play.indexOfPs(com.mans[play.nowManKey].ps,[x,y])){
    71.    man.isShow = false;
    72.    var pace=com.mans[play.nowManKey].x+""+com.mans[play.nowManKey].y
    73.    //z(bill.createMove(play.map,man.x,man.y,x,y))
    74.    delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
    75.    play.map[y][x] = play.nowManKey;
    76.    com.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)
    77.    com.mans[play.nowManKey].x = x;
    78.    com.mans[play.nowManKey].y = y;
    79.    com.mans[play.nowManKey].alpha = 1
    80.    
    81.    play.pace.push(pace+x+y);
    82.    play.nowManKey = false;
    83.    com.pane.isShow = false;
    84.    com.dot.dots = [];
    85.    com.show()
    86.    com.get("clickAudio").play();
    87.    setTimeout("play.AIPlay()",500);
    88.    if (key == "j0") play.showWin (-1);
    89.    if (key == "J0") play.showWin (1);
    90.   }
    91.  // 选中棋子
    92.  }else{
    93.   if (man.my===1){
    94.    if (com.mans[play.nowManKey]) com.mans[play.nowManKey].alpha = 1 ;
    95.    man.alpha = 0.6;
    96.    com.pane.isShow = false;
    97.    play.nowManKey = key;
    98.    com.mans[key].ps = com.mans[key].bl(); //获得所有能着点
    99.    com.dot.dots = com.mans[key].ps
    100.    com.show();
    101.    //com.get("selectAudio").start(0);
    102.    console.log(com.get("selectAudio"))
    103.    //com.get("selectAudio").play();
    104.   }
    105.  }
    106. }
    107. //点击着点
    108. play.clickPoint = function (x,y){
    109.  var key=play.nowManKey;
    110.  var man=com.mans[key];
    111.  if (play.nowManKey){
    112.   if (play.indexOfPs(com.mans[key].ps,[x,y])){
    113.    var pace=man.x+""+man.y
    114.    //z(bill.createMove(play.map,man.x,man.y,x,y))
    115.    delete play.map[man.y][man.x];
    116.    play.map[y][x] = key;
    117.    com.showPane(man.x ,man.y,x,y)
    118.    man.x = x;
    119.    man.y = y;
    120.    man.alpha = 1;
    121.    play.pace.push(pace+x+y);
    122.    play.nowManKey = false;
    123.    com.dot.dots = [];
    124.    com.show();
    125.    console.log(com.get("selectAudio"))
    126.    //com.get("clickAudio").play();
    127.    setTimeout("play.AIPlay()",500);
    128.   }else{
    129.    //alert("不能这么走哦!"
    130.   }
    131.  }
    132.  
    133. }

    源码

    需要源码请关注添加好友哦^ ^

    转载:欢迎来到本站,转载请注明文章出处https://ormcc.com/

    图片

  • 相关阅读:
    ElasticSearch系列-索引原理与数据读写流程详解
    Touch命令使用指南:创建、更新和修改文件时间戳
    动态域名解析
    [USB 3.0 报错]-高手必看!BIOS 设置中的 xHCI 模式以及 USB 2.0/3.0 的万能 Windows 驱动
    想要精通算法和SQL的成长之路 - 加油站
    猿创征文 | 使用Jquery封装的AJAX请求数据
    微信小程序开发前准备
    Linux命令万字总结,带你实现基础Linux命令自由
    信息学奥赛一本通:1309:【例1.6】回文数(Noip1999)
    Jetpack Compose学习(8)——State及remeber
  • 原文地址:https://blog.csdn.net/qq_16659821/article/details/133764083