commit

js/CChess.js

@@ -0,0 +1,123 @@
+$().ready(function () {
+  //运行程序
+  LoadGround();
+  putDef();
+  showC();
+  runNow = true;
+});
+function Log(info) {
+  //登录调试
+  if (DeBug) {
+    console.log("DEBUG:" + info);
+  }
+}
+function LogError(info) {
+  //
+  if (DeBug) {
+    console.log("ERROR:" + info);
+  }
+}
+//0空
+//兵1 炮2 车3 马4 相5 士6 将7 红
+//卒-1 炮-2 车-3 马-4 象-5 士-6 帅-7 黑
+var map = [];
+var runNow = false;
+var DeBug = true;
+
+function putDef() {
+  //定义功能函数,调用map集合,让集合中的每个元素对应放置象棋棋子
+  map[0][0] = -3;
+  map[9][0] = 3;
+  map[0][1] = -4;
+  map[9][1] = 4;
+  map[0][2] = -5;
+  map[9][2] = 5;
+  map[0][3] = -6;
+  map[9][3] = 6;
+  map[0][4] = -7;
+  map[9][4] = 7;
+  map[0][5] = -6;
+  map[9][5] = 6;
+  map[0][6] = -5;
+  map[9][6] = 5;
+  map[0][7] = -4;
+  map[9][7] = 4;
+  map[0][8] = -3;
+  map[9][8] = 3;
+
+  map[2][1] = -2;
+  map[7][1] = 2;
+  map[2][7] = -2;
+  map[7][7] = 2;
+  map[3][0] = -1;
+  map[6][0] = 1;
+  map[3][2] = -1;
+  map[6][2] = 1;
+  map[3][4] = -1;
+  map[6][4] = 1;
+  map[3][6] = -1;
+  map[6][6] = 1;
+  map[3][8] = -1;
+  map[6][8] = 1;
+  Log("完成放置默认棋子");
+}
+
+function WhatSpace(y, x) {
+  return map[y][x];
+}
+
+function CanEat(y, x, c) {
+  var cc = 0;
+  if (c == 0) {
+    cc = 1;
+  } else {
+    cc = -1;
+  }
+  return map[y][x] * cc < 0;
+}
+
+//0空
+//兵1 炮2 车3 马4 相5 士6 将7 红
+//卒-1 炮-2 车-3 马-4 象-5 士-6 帅-7 黑
+function WhereCan(y, x, t) {
+  //0可以走 1可以吃
+  var c = 0;
+  if (t <= 0) {
+    c = 1;
+    t *= -1;
+  }
+  var tmap = [];
+  switch (t) {
+    case 1:
+      binMove(tmap, c, y, x);
+      break;
+    case 2:
+      paoMove(tmap, c, y, x);
+      break;
+    case 3:
+      juMove(tmap, c, y, x);
+      break;
+    case 4:
+      maMove(tmap, c, y, x);
+      break;
+    case 5:
+      xiangMove(tmap, c, y, x);
+      break;
+    case 6:
+      shiMove(tmap, c, y, x);
+      break;
+    case 7:
+      JSMove(tmap, c, y, x);
+      break;
+    default:
+      break;
+  }
+  for (var l = 0; l < tmap.length; l++) {
+    if (CanEat(tmap[l][0], tmap[l][1], c)) {
+      tmap[l][2] = 1;
+    } else {
+      tmap[l][2] = 0;
+    }
+  }
+  return tmap;
+}

js/CMoveRule.js

@@ -0,0 +1,353 @@
+// 该js文件中的函数主要是用于控制棋子路径，使其符合象棋的游戏规则，如马走日，象走田等。
+
+// 设置小兵的路径规则
+function binMove(tmap, c, y, x) {
+  //0红 1黑
+  var w;
+  var h = 0;
+  if (c == 0) {
+    w = y < 5;
+    h = -1;
+  } else {
+    w = y > 4;
+    h = 1;
+  }
+  if (w) {
+    if (y + h >= 0 && y + h < map.length) {
+      var t1 = [];
+      t1[0] = y + h;
+      t1[1] = x;
+      tmap.push(t1);
+    }
+    var t2 = [];
+    var t3 = [];
+    t2[0] = y;
+    t3[0] = y;
+    t2[1] = x - 1;
+    t3[1] = x + 1;
+    tmap.push(t2);
+    tmap.push(t3);
+  } else {
+    var t = [];
+    t[0] = y + h;
+    t[1] = x;
+    tmap.push(t);
+  }
+}
+
+// 设置炮直线和竖线移动
+function paoMove(tmap, c, y, x) {
+  paoMove_(tmap, 0, c, y, x);
+  paoMove_(tmap, 1, c, y, x);
+  paoMove_(tmap, 2, c, y, x);
+  paoMove_(tmap, 3, c, y, x);
+}
+
+// 设置炮隔子移动
+function paoMove_(tmap, d, c, y, x) {
+  //0上1左2下3右
+  var q = y,
+    w = x,
+    qi = 0,
+    wi = 0,
+    ci = 0; //ci:0红 1黑
+  if (c == 0) {
+    ci = 1;
+  } else {
+    ci = -1;
+  }
+  var cc;
+  switch (d) {
+    case 0:
+      cc = function (q) {
+        return q >= 0;
+      };
+      qi = -1;
+      break;
+    case 1:
+      cc = function (q, w) {
+        return w >= 0;
+      };
+      wi = -1;
+      break;
+    case 2:
+      cc = function (q) {
+        return q < map.length;
+      };
+      qi = 1;
+      break;
+    case 3:
+      cc = function (q, w) {
+        return w < map.length;
+      };
+      wi = 1;
+      break;
+  }
+  var ce = false;
+  while (true) {
+    if (!cc(q, w)) break;
+    if (q == y && w == x) {
+      q += qi;
+      w += wi;
+      continue;
+    }
+    if (map[q][w] == 0) {
+      if (!ce) {
+        var t = [];
+        t[0] = q;
+        t[1] = w;
+        tmap.push(t);
+      }
+    } else {
+      if (ce) {
+        if (map[q][w] * ci < 0) {
+          var t = [];
+          t[0] = q;
+          t[1] = w;
+          tmap.push(t);
+          ce = false;
+          break;
+        }
+      }
+      ce = true;
+    }
+    q += qi;
+    w += wi;
+  }
+}
+
+// 设置车的路径规则
+function juMove(tmap, c, y, x) {
+  for (var q = y; q >= 0; q--) {
+    if (q == y) continue;
+    if (!fastMove(tmap, c, q, x)) break;
+  }
+  for (var q = x; q >= 0; q--) {
+    if (q == x) continue;
+    if (!fastMove(tmap, c, y, q)) break;
+  }
+  for (var q = y; q < map.length; q++) {
+    if (q == y) continue;
+    if (!fastMove(tmap, c, q, x)) break;
+  }
+  for (var q = x; q < map.length; q++) {
+    if (q == x) continue;
+    if (!fastMove(tmap, c, y, q)) break;
+  }
+}
+
+// 设置车的水平和垂直移动
+function fastMove(tmap, c, y, x) {
+  //c:0红 1黑
+  var ci = 0;
+  if (c == 0) {
+    ci = 1;
+  } else {
+    ci = -1;
+  }
+  if (map[y][x] == 0) {
+    var t = [];
+    t[0] = y;
+    t[1] = x;
+    tmap.push(t);
+    return true;
+  } else {
+    if (map[y][x] * ci < 0) {
+      var t = [];
+      t[0] = y;
+      t[1] = x;
+      tmap.push(t);
+    }
+    return false;
+  }
+}
+
+// 设置马的路径规则
+function maMove(tmap, c, y, x) {
+  function fastMa(tmap, y, x, ys, xs, c) {
+    if (
+      y + ys < map.length &&
+      y + ys >= 0 &&
+      x + xs < map.length &&
+      x + xs >= 0
+    )
+      if (map[y + ys][x + xs] == 0) {
+        var yz = 0,
+          xz = 0;
+        if (ys == 0) {
+          yz = -1;
+        } else {
+          xz = -1;
+        }
+        if (
+          y + ys + ys - yz < map.length &&
+          y + ys + ys - yz >= 0 &&
+          x + xs + xs - xz < map.length &&
+          x + xs + xs - xz >= 0
+        )
+          if (map[y + ys + ys - yz][x + xs + xs - xz] * c <= 0) {
+            var t = [];
+            t[0] = y + ys + ys - yz;
+            t[1] = x + xs + xs - xz;
+            tmap.push(t);
+          }
+        if (
+          y + ys + ys + yz < map.length &&
+          y + ys + ys + yz >= 0 &&
+          x + xs + xs + xz < map.length &&
+          x + xs + xs + xz >= 0
+        )
+          if (map[y + ys + ys + yz][x + xs + xs + xz] * c <= 0) {
+            var t1 = [];
+            t1[0] = y + ys + ys + yz;
+            t1[1] = x + xs + xs + xz;
+            tmap.push(t1);
+          }
+      }
+  }
+  var cc = 0;
+  if (c == 0) {
+    cc = 1;
+  } else {
+    cc = -1;
+  }
+  fastMa(tmap, y, x, -1, 0, cc);
+  fastMa(tmap, y, x, 1, 0, cc);
+  fastMa(tmap, y, x, 0, -1, cc);
+  fastMa(tmap, y, x, 0, 1, cc);
+}
+
+// 设置象的路径规则
+function xiangMove(tmap, c, y, x) {
+  //c:0红 1黑
+  function fastXiang(tmap, y, x, yy, xx, c, cy) {
+    if (
+      y + yy * 2 < map.length &&
+      y + yy * 2 >= 0 &&
+      x + xx * 2 < map.length &&
+      x + xx * 2 >= 0
+    ) {
+      if (cy(y + yy * 2))
+        if (map[y + yy][x + xx] == 0) {
+          if (map[y + yy * 2][x + xx * 2] * c <= 0) {
+            var t = [];
+            t[0] = y + yy * 2;
+            t[1] = x + xx * 2;
+            tmap.push(t);
+          }
+        }
+    }
+  }
+  var cc = 0;
+  if (c == 0) {
+    cc = 1;
+  } else {
+    cc = -1;
+  }
+  var ch;
+  if (c == 0) {
+    ch = function (y) {
+      return y > 4;
+    };
+  } else {
+    ch = function (y) {
+      return y < 5;
+    };
+  }
+  fastXiang(tmap, y, x, 1, 1, cc, ch);
+  fastXiang(tmap, y, x, 1, -1, cc, ch);
+  fastXiang(tmap, y, x, -1, 1, cc, ch);
+  fastXiang(tmap, y, x, -1, -1, cc, ch);
+}
+
+// 设置士的路径规则
+function shiMove(tmap, c, y, x) {
+  //c:0红 1黑
+  function fastShi(tmap, y, x, yy, xx, c, cc) {
+    if (cc(y + yy)) {
+      if (x + xx >= 3 && x + xx <= 5) {
+        if (map[y + yy][x + xx] * c <= 0) {
+          var t = [];
+          t[0] = y + yy;
+          t[1] = x + xx;
+          tmap.push(t);
+        }
+      }
+    }
+  }
+  var cf;
+  var cc = 0;
+  if (c == 0) {
+    cc = 1;
+    cf = function (y) {
+      return y >= 7 && y <= 9;
+    };
+  } else {
+    cf = function (y) {
+      return y >= 0 && y <= 2;
+    };
+    cc = -1;
+  }
+  fastShi(tmap, y, x, 1, 1, cc, cf);
+  fastShi(tmap, y, x, -1, 1, cc, cf);
+  fastShi(tmap, y, x, 1, -1, cc, cf);
+  fastShi(tmap, y, x, -1, -1, cc, cf);
+}
+
+// 设置将和帅的路径规则
+function JSMove(tmap, c, y, x) {
+  function fastJS(tmap, y, x, yy, xx, c, cc) {
+    if (cc(y + yy)) {
+      if (x + xx >= 3 && x + xx <= 5) {
+        if (map[y + yy][x + xx] * c <= 0) {
+          var t = [];
+          t[0] = y + yy;
+          t[1] = x + xx;
+          tmap.push(t);
+        }
+      }
+    }
+  }
+  var cf;
+  var cc = 0;
+  if (c == 0) {
+    cc = 1;
+    cf = function (y) {
+      return y >= 7 && y <= 9;
+    };
+  } else {
+    cf = function (y) {
+      return y >= 0 && y <= 2;
+    };
+    cc = -1;
+  }
+  fastJS(tmap, y, x, 1, 0, cc, cf);
+  fastJS(tmap, y, x, -1, 0, cc, cf);
+  fastJS(tmap, y, x, 0, -1, cc, cf);
+  fastJS(tmap, y, x, 0, 1, cc, cf);
+  if (c == 0) {
+    for (var q = y - 1; q < map.length && q >= 0; q--) {
+      if (map[q][x] == 0) {
+        continue;
+      }
+      if (map[q][x] == -7) {
+        var t = [];
+        t[0] = q;
+        t[1] = x;
+        tmap.push(t);
+      } else break;
+    }
+  } else {
+    for (var q = y + 1; q < map.length && q >= 0; q++) {
+      if (map[q][x] == 0) {
+        continue;
+      }
+      if (map[q][x] == 7) {
+        var t = [];
+        t[0] = q;
+        t[1] = x;
+        tmap.push(t);
+      } else break;
+    }
+  }
+}

js/OnDoing.js

@@ -0,0 +1,109 @@
+function onChose(j, i) {
+  // 该函数主要用于控制棋子的选择
+  if (!runNow) return;
+  if (onMove) return;
+  //alert(j+""+i);
+  var CC = WhatSpace(j, i);
+  if (CC == 0) {
+    onChoseS(j, i);
+  } else {
+    Log("选择了" + j + "-" + i + "  " + CC);
+    onChoseC(j, i, CC);
+  }
+}
+
+function cleanSt() {
+  // 该函数用于棋子被选中状态的清除
+  // 棋盘中的棋子单击一下是选中，单击两下则由选中变为未选中此时会触发该函数。
+  nowChoseC = [];
+  cleanChose();
+  moveList = [];
+  eatList = [];
+  OnChoseNow = false;
+}
+function trunH() {
+  // 该函数根据出手的先后顺序，控制出棋方的 棋子是否腾空悬起
+  if (nowWho == 0) {
+    nowWho = 1;
+  } else {
+    nowWho = 0;
+  }
+  // 棋子移动完成后则清除其样式
+  cleanSt();
+}
+function showSt(j, i, t) {
+  //
+  nowChoseC = [];
+  cleanChose();
+  showChose(j, i, 1);
+  var tmap = WhereCan(j, i, t);
+  if (tmap != null && tmap.length > 0)
+    for (var q = 0; q < tmap.length; q++) {
+      if (map[tmap[q][0]][tmap[q][1]] == 0) {
+        moveList.push(tmap[q]);
+      } else {
+        eatList.push(tmap[q]);
+      }
+      showChose(tmap[q][0], tmap[q][1], tmap[q][2] + 2);
+    }
+  nowChoseC[0] = j;
+  nowChoseC[1] = i;
+  nowChoseC[2] = t;
+  OnChoseNow = true;
+}
+
+var onMove = false;
+var OnChoseNow = false;
+var nowChoseC = [];
+var nowWho = 0; //0红 1黑
+var moveList = [];
+var eatList = [];
+
+function onChoseC(j, i, t) {
+  if (!OnChoseNow) {
+    if (nowWho == 0) {
+      if (t < 0) return;
+    }
+    if (nowWho == 1) {
+      if (t > 0) return;
+    }
+  }
+  if (nowChoseC[0] == j && nowChoseC[1] == i) {
+    cleanSt();
+    return;
+  }
+  if (OnChoseNow == true) {
+    for (var q = 0; q < eatList.length; q++) {
+      if (eatList[q][0] == j && eatList[q][1] == i) {
+        //eat && move
+        eat(nowChoseC[0], nowChoseC[1], j, i);
+        break;
+      }
+    }
+    cleanSt();
+  }
+  if (nowWho == 0) {
+    if (t < 0) {
+      cleanSt();
+      return;
+    }
+  }
+  if (nowWho == 1) {
+    if (t > 0) {
+      cleanSt();
+      return;
+    }
+  }
+  showSt(j, i, t);
+}
+function onChoseS(j, i) {
+  if (OnChoseNow) {
+    for (var q = 0; q < moveList.length; q++) {
+      if (moveList[q][0] == j && moveList[q][1] == i) {
+        move(nowChoseC[0], nowChoseC[1], j, i);
+        break;
+      }
+    }
+  }
+  cleanSt();
+}

js/Show.js

@@ -0,0 +1,250 @@
+function LoadGround() {
+  //创建加载场景
+  var g = "";
+  // 使用循环将棋盘的样式结构遍历出来，添加到dom节点树
+  for (var j = 0; j < 10; j++) {
+    map[j] = [];
+    for (var i = 0; i < 9; i++) {
+      map[j][i] = 0;
+      g +=
+        "<article class='CS' id='CS" +
+        j +
+        "-" +
+        i +
+        "' onclick='onChose(" +
+        j +
+        "," +
+        i +
+        ")'></article>";
+    }
+  }
+  // 获取dom id space，调用jq中的html方法并将参数g传入
+  $("#space").html(g);
+  Log("完成创建场景");
+}
+//0空
+//兵1 炮2 车3 马4 相5 士6 将7 红
+//卒-1 炮-2 车-3 马-4 象-5 士-6 帅-7 黑
+function getCText(j, i) {
+  var T = [];
+  // 使用switch case 判断当前map集合中棋子的名称
+  switch (map[j][i]) {
+    case 0:
+      return null;
+      break;
+    case 1:
+      T[0] = "兵";
+      T[1] = "BR";
+      break;
+    case 2:
+      T[0] = "炮";
+      T[1] = "PR";
+      break;
+    case 3:
+      T[0] = "车";
+      T[1] = "JR";
+      break;
+    case 4:
+      T[0] = "马";
+      T[1] = "MR";
+      break;
+    case 5:
+      T[0] = "相";
+      T[1] = "XR";
+      break;
+    case 6:
+      T[0] = "士";
+      T[1] = "SR";
+      break;
+    case 7:
+      T[0] = "将";
+      T[1] = "J";
+      break;
+    case -1:
+      T[0] = "卒";
+      T[1] = "BB";
+      break;
+    case -2:
+      T[0] = "炮";
+      T[1] = "PB";
+      break;
+    case -3:
+      T[0] = "车";
+      T[1] = "JB";
+      break;
+    case -4:
+      T[0] = "马";
+      T[1] = "MB";
+      break;
+    case -5:
+      T[0] = "象";
+      T[1] = "XB";
+      break;
+    case -6:
+      T[0] = "士";
+      T[1] = "SB";
+      break;
+    case -7:
+      T[0] = "帅";
+      T[1] = "S";
+      break;
+    default:
+      return null;
+      break;
+  }
+  return T;
+}
+// 循环遍历棋子，渲染其dom结构和样式
+function showC() {
+  for (var j = 0; j < 10; j++) {
+    for (var i = 0; i < 9; i++) {
+      var cla = "";
+      var tex = "";
+      var isNone = false;
+      var T = getCText(j, i);
+      if (T == null) {
+        isNone = true;
+      } else {
+        cla = T[1];
+        tex = T[0];
+      }
+      if (isNone) {
+        continue;
+      }
+      $("#CS" + j + "-" + i).html(
+        "<section class='C " + cla + "'>" + tex + "</section>"
+      );
+    }
+  }
+  Log("完成显示场景");
+}
+
+//0清除 1绿色 2黄色 3红色
+function showChose(j, i, t) {
+  // 添加棋子被选中、移动、吃子等时的样式
+
+  // 获取id cs，并进行字符串的拼接
+  var o = $("#CS" + j + "-" + i);
+  if (t == 0) {
+    //当t为0时代表棋子被吃掉了，此时需要清除它的边框以及阴影这些样式
+    o.css({
+      "box-shadow": "",
+      border: "",
+    });
+    return;
+  }
+  var c = "";
+  // 根据棋子的状态，为它添加不同的边框颜色和阴影
+  switch (t) {
+    case 1:
+      c = "6bc274";
+      break;
+    case 2:
+      c = "eeb948";
+      break;
+    case 3:
+      c = "c53f46";
+      break;
+    default:
+      break;
+  }
+  o.css({
+    "box-shadow": "0 0 25pt #" + c,
+    border: "3px solid #" + c,
+  });
+}
+
+function cleanChose() {
+  // 清除棋子在没有被选择时的样式
+  $(".CS").css({
+    "box-shadow": "",
+    border: "",
+  });
+}
+function move(y, x, j, i, eat) {
+  // 该函数主要是根据棋子的坐标来判断棋子是否被吃掉以及控制棋子的移动
+  // 它主要有5个形参，其中有y,x代表坐标，j,i代表棋子信息，eat判断是否符合吃的条件
+  onMove = true;
+  if (eat == null)
+    if (map[j][i] != 0) {
+      LogError("错误的位置");
+      return;
+    }
+  var cla = "";
+  var tex = "";
+  var T = getCText(y, x);
+  if (T == null) {
+    LogError("丢失棋子信息");
+    return;
+  } else {
+    cla = T[1];
+    tex = T[0];
+  }
+  if (eat == null) Log(y + "-" + x + " " + tex + " 移动到" + j + "-" + i);
+  else {
+    Log(
+      y + "-" + x + " " + tex + " 吃" + j + "-" + i + " " + getCText(j, i)[0]
+    );
+    console.log(getCText(j, i));
+    /*
+     getCText是一个函数，这个函数中有两个形参，其中j代表棋子的中文名，i代表棋子的英文名
+     这个函数的返回值是一个数组，每当有棋子被吃掉时该函数就会触发 值的格式为 ['马', 'MB'] 
+     前面的马是被吃棋子名称，后面的’MB‘代表被吃的是黑子，如果是‘MR’则代表被吃的是红子。
+    */
+
+    /* 
+    根据这个函数的返回值中的棋子名称来判断哪方为胜利方并调用js中的刷新方法，来结束游戏
+    */
+    if (getCText(j, i)[0] === "帅") {
+      // 如果getCText的返回值为“帅”则可以判断出黑子的“帅”被吃掉了
+      alert("红子获胜！");
+      // 弹窗提示用户红字胜出
+      location.reload();
+      // 刷新整个网页
+      console.error("游戏结束");
+      // 打印日志
+    } else if (getCText(j, i)[0] === "将") {
+      // 同上
+      alert("黑子获胜！");
+      location.reload();
+      console.error("游戏结束");
+    }
+  }
+
+  map[j][i] = map[y][x];
+  map[y][x] = 0;
+  $("#CS" + j + "-" + i).html(
+    "<section class='C " +
+      cla +
+      "' style='transform:translate(" +
+      (x - i) * 45 +
+      "px," +
+      (y - j) * 45 +
+      "px);'>" +
+      tex +
+      "</section>"
+  );
+  $("#CS" + y + "-" + x).html("");
+  setTimeout(function () {
+    $("#CS" + j + "-" + i + " section").css({
+      transform: "",
+    });
+  }, 10);
+  setTimeout(function () {
+    trunH();
+    onMove = false;
+  }, 700);
+}
+
+function eat(y, x, j, i) {
+  onMove = true;
+  // 该函数用于实现棋子被吃掉的效果
+  // 具体效果的实现是通过css来隐藏棋子从而达到看不到被吃掉的效果
+  $("#CS" + j + "-" + i + " section").css({
+    transform: "scale(0,0)",
+    //   css中的transform中有scale缩放的属性，缩放为0时则可以达到隐藏的效果
+  });
+  setTimeout(function () {
+    move(y, x, j, i, true);
+  }, 700);
+}