{"id":2931,"date":"2020-05-07T12:03:43","date_gmt":"2020-05-07T04:03:43","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2931"},"modified":"2020-05-07T12:06:44","modified_gmt":"2020-05-07T04:06:44","slug":"%e8%b6%85%e7%ba%a7%e7%ae%80%e5%8d%95%e7%9a%84%e7%ba%afjs-%e8%b1%a1%e6%a3%8b%e7%9c%8b%e4%b8%80%e9%81%8d%e4%bd%a0%e4%b9%9f%e4%bc%9a%e5%86%99","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2931","title":{"rendered":"\u8d85\u7ea7\u7b80\u5355\u7684\u7eafjs \u8c61\u68cb,\u770b\u4e00\u904d\u4f60\u4e5f\u4f1a\u5199"},"content":{"rendered":"\u8fd9\u662f\u6211\u7b2c\u4e00\u6b21\u5199\u6e38\u620f\uff0c\u4e5f\u662f\u968f\u5174\u82b1\u4e86\u4e00\u4e0b\u5348\u5199\u7684\uff0c\u4ee3\u7801\u7ed3\u6784\u53ef\u80fd\u6ca1\u6709\u8bbe\u8ba1\u7684\u5f88\u6e05\u6670\uff0c\u4f46\u662f\u4e3b\u8981\u903b\u8f91\u8fd8\u662f\u5f88\u6e05\u695a\u3002\u8fd9\u6b21\u5229\u7528\u4e86html5 canvas \u753b\u5e03\u6548\u679c\uff0c\u628a\u68cb\u76d8\uff0c\u3002\u68cb\u5b50\uff0c\u52a8\u753b\u5199\u51fa<\/p>\n
\u5199\u4efb\u4f55\u4e1c\u897f\uff0c\u9996\u5148\u8981\u77e5\u9053\u5b83\u7684\u7ec4\u6210\u90e8\u5206\u3002\u6bd4\u5982\u76d6\u5b50\uff0c\u4f60\u5f97\u5148\u51c6\u5907\u597d\uff0c\u6c99\u5b50\uff0c\u6c34\u6ce5\uff0c\u94a2\u7b4b\uff0c\u77f3\u7816\uff0c\u518d\u6253\u6210\u5730\u57fa\u518d\u4e00\u5c42\u4e00\u5c42\u7684\u76d6<\/p>\n
\u8c61\u68cb\u6e38\u620f\u7ec4\u6210\u90e8\u5206\u5f88\u7b80\u5355\u3002<\/p>\n
\u68cb\u76d8: \u670910 \u884c 9\u5217 \u62fc\u6210\u768490\u4e2a\u4e0d\u540c\u7684\u5750\u6807\u70b9,\u7ed9\u68cb\u5b50\u79fb\u52a8,\u68cb\u76d8\u4e8b\u4ef6\u6355\u6349\uff0c\u901a\u8fc7\u9f20\u6807\u70b9\u51fb\u68cb\u76d8\u4e0a\u9762\u5750\u6807\uff0c\u53bb\u5b9a\u4f4d\u70b9\u51fb\u5728\u68cb\u76d8\u54ea\u4e2a\u4f4d\u7f6e<\/p>\n
\u68cb\u5b50:\uff5b<\/p>\n
\u57fa\u672c\u5c5e\u6027\uff1a<\/p>\n
\u989c\u8272:\u7ea2\u6216\u9ed1<\/p>\n
\u79fb\u52a8\u89c4\u5219\u8bbe\u5b9a:\u4f8b\u5982\u5982\uff0c\u9a6c\u53ea\u80fd\u8d70\u65e5\uff0c\u76f8\u53ea\u80fd\u8d70\u7530<\/p>\n
\u68cb\u5b50\u9009\u62e9\u4e2d\u72b6\u6001\u4e0b\u68cb\u5b50\u5f62\u72b6\u53d8\u5316<\/p>\n
\u68cb\u5b50\u5f53\u524d\u5750\u6807\u4f4d\u7f6e<\/p>\n
\uff5d<\/p>\n
<\/p>\n
\u4e0b\u9762\u662f\u4ee3\u7801:<\/p>\n
<canvas id="xqCanvas"><\/canvas>\r\n <script>\r\n (function () {\r\n var XiangQi = window.XiangQi = function (id) {\r\n this.canvas.w = this.canvas.w || document.body.clientWidth;\r\n this.init(id);\r\n }\r\n XiangQi.prototype = {\r\n canvas: {\r\n w: 0, \/\/ \u753b\u5e03\u5bbd\r\n h: 1000 \/\/ \u753b\u5e03\u9ad8\r\n },\r\n qipan: {\r\n cellSize: 100, \/\/ \u68cb\u683c\u5927\u5c0f\r\n lineWidth: 2, \/\/ \u753b\u7b14\u5927\u5c0f\r\n strokeStyle: "#000", \/\/ \u753b\u7b14\u989c\u8272\r\n markLen: 30, \/\/ \u6807\u8bb0\u957f\u5ea6\r\n markPadding: 10 \/\/ \u6807\u8bb0\u95f4\u8ddd\r\n },\r\n init: function (id) {\r\n \/\/\u79c1\u6709\u5c5e\u6027\r\n var\r\n that = this;\r\n\r\n\r\n that.bodys = [];\r\n\r\n\r\n that.element = document.getElementById(id);\r\n that.element.width = that.canvas.w;\r\n that.element.height = that.canvas.h;\r\n that.ctx = that.element.getContext("2d");\r\n\r\n\r\n\r\n\r\n that.render();\r\n },\r\n\r\n\r\n render: function () {\r\n this.bindevent();\r\n },\r\n drawQipan: function () {\r\n\r\n\r\n var that = this, ctx = that.ctx, bodys = that.bodys\r\n ,\r\n\r\n\r\n r = 9,\r\n c = 8,\r\n cellSize = that.qipan.cellSize,\r\n w = cellSize * 8,\r\n h = r * cellSize,\r\n startX = (that.canvas.w - w) \/ 2,\r\n startY = (that.canvas.h - h) \/ 2,\r\n cX = 0,\r\n cY = 0,\r\n rX = 0,\r\n rY = 0\r\n ;\r\n ctx.beginPath();\r\n ctx.lineWidth = that.qipan.lineWidth;\r\n ctx.strokeStyle = that.qipan.strokeStyle;\r\n\r\n\r\n that.qipan.w = w;\r\n that.qipan.h = h;\r\n\r\n\r\n that.startX = startX;\r\n that.startY = startY;\r\n that.radius = cellSize \/ 2;\r\n that.maxR = r;\r\n that.maxC = c;\r\n for (var i = 0; i <= r; i++) {\r\n cX = startX;\r\n cY = startY + (i * cellSize);\r\n ctx.moveTo(cX, cY);\r\n ctx.lineTo(cX + w, cY);\r\n\r\n\r\n bodys[i] = bodys[i] || [];\r\n for (var k = 0; k <= c; k++) {\r\n\r\n\r\n rX = startX + (k * cellSize);\r\n rY = startY + (i * cellSize);\r\n\r\n\r\n bodys[i][k] = bodys[i][k] || {};\r\n bodys[i][k].x = rX;\r\n bodys[i][k].y = rY;\r\n bodys[i][k].r = i;\r\n bodys[i][k].c = k;\r\n \/\/{\r\n \/\/ x: rX,\r\n \/\/ y: rY,\r\n \/\/ r:i,\r\n \/\/ c:k\r\n \/\/});\r\n if (i == 4 && k != 0 && k != 8 || i == 9) {\r\n continue;\r\n }\r\n\r\n\r\n ctx.moveTo(rX, cY);\r\n ctx.lineTo(rX, rY + cellSize);\r\n }\r\n\r\n\r\n\r\n\r\n }\r\n ctx.stroke();\r\n\r\n\r\n\r\n\r\n ctx.restore();\r\n var fontOffsetY = bodys[4][0].y + that.radius;\r\n ctx.fillStyle = "#000";\r\n ctx.font = "bold 40px Arial";\r\n ctx.textBaseline = "middle";\r\n\r\n\r\n ctx.fillText("\u6c49", startX + cellSize, fontOffsetY);\r\n ctx.fillText("\u754c", startX + cellSize * 2, fontOffsetY);\r\n ctx.fillText("\u695a", startX + cellSize * 5, fontOffsetY);\r\n ctx.fillText("\u6cb3", startX + cellSize * 6, fontOffsetY);\r\n ctx.save();\r\n\r\n\r\n\r\n\r\n ctx.beginPath();\r\n ctx.strokeStyle = "#000";\r\n ctx.lineWidth = 2;\r\n ctx.moveTo(bodys[0][3].x, bodys[0][3].y);\r\n ctx.lineTo(bodys[2][5].x, bodys[2][5].y);\r\n ctx.moveTo(bodys[0][5].x, bodys[0][5].y);\r\n ctx.lineTo(bodys[2][3].x, bodys[2][3].y);\r\n\r\n\r\n\r\n\r\n\r\n\r\n ctx.moveTo(bodys[7][3].x, bodys[7][3].y);\r\n ctx.lineTo(bodys[9][5].x, bodys[9][5].y);\r\n ctx.moveTo(bodys[7][5].x, bodys[7][5].y);\r\n ctx.lineTo(bodys[9][3].x, bodys[9][3].y);\r\n\r\n\r\n ctx.stroke();\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n function drawTopLeft(x, y, l, o) {\r\n var s = x - o - l, e = s + l, c = y - o;\r\n ctx.moveTo(s, c);\r\n ctx.lineTo(e, c);\r\n ctx.lineTo(e, c - l);\r\n }\r\n function drawTopRight(x, y, l, o) {\r\n var s = x + o + l, e = s - l, c = y - o;\r\n ctx.moveTo(s, c);\r\n ctx.lineTo(e, c);\r\n ctx.lineTo(e, c - l);\r\n }\r\n function drawBottomLeft(x, y, l, o) {\r\n var s = x - o - l, e = s + l, c = y + o;\r\n ctx.moveTo(s, c);\r\n ctx.lineTo(e, c);\r\n ctx.lineTo(e, c + l);\r\n }\r\n function drawBottomRight(x, y, l, o) {\r\n var s = x + o + l, e = s - l, c = y + o;\r\n ctx.moveTo(s, c);\r\n ctx.lineTo(e, c);\r\n ctx.lineTo(e, c + l);\r\n }\r\n\r\n\r\n function drawX(r, c, pos) {\r\n var x = bodys[r][c][\/c].x,\r\n y = bodys[r][c][\/c].y;\r\n ctx.beginPath();\r\n ctx.lineWidth = 3;\r\n ctx.strokeStyle = "#000";\r\n if (pos[0]) {\r\n drawTopLeft(x, y, that.qipan.markLen, that.qipan.markPadding);\r\n }\r\n if (pos[1]) {\r\n drawTopRight(x, y, that.qipan.markLen, that.qipan.markPadding);\r\n }\r\n if (pos[2]) {\r\n drawBottomLeft(x, y, that.qipan.markLen, that.qipan.markPadding);\r\n }\r\n if (pos[3]) {\r\n drawBottomRight(x, y, that.qipan.markLen, that.qipan.markPadding);\r\n }\r\n ctx.stroke();\r\n\r\n\r\n }\r\n drawX(2, 1, [1, 1, 1, 1]);\r\n drawX(2, 7, [1, 1, 1, 1]);\r\n\r\n\r\n drawX(3, 0, [0, 1, 0, 1]);\r\n drawX(3, 2, [1, 1, 1, 1]);\r\n drawX(3, 4, [1, 1, 1, 1]);\r\n drawX(3, 6, [1, 1, 1, 1]);\r\n drawX(3, 8, [1, 0, 1, 0]);\r\n\r\n\r\n drawX(7, 1, [1, 1, 1, 1]);\r\n drawX(7, 7, [1, 1, 1, 1]);\r\n\r\n\r\n drawX(6, 0, [0, 1, 0, 1]);\r\n drawX(6, 2, [1, 1, 1, 1]);\r\n drawX(6, 4, [1, 1, 1, 1]);\r\n drawX(6, 6, [1, 1, 1, 1]);\r\n drawX(6, 8, [1, 0, 1, 0]);\r\n\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 5;\r\n ctx.rect(startX - 5, startY - 5, w + 10, h + 10);\r\n ctx.stroke();\r\n\r\n\r\n\r\n\r\n\r\n\r\n }\r\n\r\n\r\n ,\r\n renderQiJu: function (redBottom) {\r\n var qiJu = this.qiJu = [\r\n ['\u8f66', '\u9a6c', '\u76f8', '\u4ed5', '\u5e05', '\u4ed5', '\u76f8', '\u9a6c', '\u8f66'],\r\n [],\r\n ['', '\u70ae', '', '', '', '', '', '\u70ae', ''],\r\n ['\u5175', '', '\u5175', '', '\u5175', '', '\u5175', '', '\u5175'],\r\n [],\r\n [],\r\n ['\u5352', '', '\u5352', '', '\u5352', '', '\u5352', '', '\u5352'],\r\n ['', '\u70ae', '', '', '', '', '', '\u70ae', ''],\r\n [],\r\n ['\u8eca', '\u99ac', '\u8c61', '\u58eb', '\u5c06', '\u58eb', '\u8c61', '\u99ac', '\u8eca'],\r\n ];\r\n this.bodys = [];\r\n this.clearCanvas();\r\n this.drawQipan();\r\n this.redBottom = !!redBottom;\r\n if (this.redBottom) {\r\n qiJu.reverse();\r\n }\r\n this.drawQiJu(qiJu);\r\n },\r\n drawQiJu: function (qiJu) {\r\n for (var i = 0; i < qiJu.length; i++) {\r\n for (var k = 0; k < qiJu[i].length; k++) {\r\n if (qiJu[i][k] != '') {\r\n this.bodys[i][k].qizi = new QiZi(this, i, k, qiJu[i][k], (this.redBottom && i > 5 || this.redBottom == false && i < 5) ? true : false);\r\n\r\n\r\n } else {\r\n this.bodys[i][k].qizi = null;\r\n }\r\n }\r\n }\r\n },\r\n clearCanvas: function () {\r\n this.ctx.clearRect(0, 0, this.canvas.w, this.canvas.h);\r\n },\r\n resetQiJu: function () {\r\n\r\n\r\n this.clearCanvas();\r\n this.drawQipan();\r\n\r\n\r\n this.eachBody(function (d) {\r\n if (d.qizi) {\r\n d.qizi.draw();\r\n }\r\n });\r\n\r\n\r\n\r\n\r\n },\r\n moveQizi: function (r, c, tr, tc) {\r\n this.bodys[tr][tc].qizi = this.bodys[r][c][\/c].qizi;\r\n this.bodys[r][c][\/c].qizi = null;\r\n this.resetQiJu();\r\n\r\n\r\n }\r\n ,\r\n getPositions: function (e) {\r\n var x = e.x, y = e.y;\r\n if (e.layerX) {\r\n\r\n\r\n x = e.layerX;\r\n y = e.layerY;\r\n } else {\r\n x += document.body.scrollLeft;\r\n y += document.body.scrollTop;\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n return { x: x, y: y };\r\n },\r\n check: function (x, y) {\r\n var that = this,\r\n minX = that.startX - that.radius,\r\n minY = that.startY - that.radius,\r\n maxX = that.startX + that.qipan.w + that.radius,\r\n maxY = that.startY + that.qipan.h + that.radius\r\n ;\r\n\r\n\r\n return x >= minX && x <= maxX && y >= minY && y <= maxY;\r\n },\r\n\r\n\r\n eachBody: function (handler) {\r\n var bodys = this.bodys, len = bodys.length;\r\n\r\n\r\n for (var i = 0; i < len; i++) {\r\n\r\n\r\n for (var k = 0, len2 = bodys[i].length; k < len2; k++) {\r\n if (handler(bodys[i][k], i, k) === true) {\r\n return bodys[i][k];\r\n }\r\n }\r\n }\r\n return null;\r\n },\r\n findPos: function (x, y) {\r\n var that = this, r = that.radius;\r\n return this.eachBody(function (pos) {\r\n\r\n\r\n var minX = pos.x - r, maxX = pos.x + r, minY = pos.y - r, maxY = pos.y + r;\r\n if (x >= minX && x <= maxX && y >= minY && y <= maxY) {\r\n return true;\r\n }\r\n });\r\n },\r\n messages: {\r\n step1: "\u7ea2\u65b9\u8d70",\r\n step2: "\u9ed1\u65b9\u8d70"\r\n },\r\n each: function (data, fn) {\r\n for (var i = 0, len = data.length; i < len; i++) {\r\n fn.call(data[i], i, data[i]);\r\n }\r\n },\r\n showMess: function (mess) {\r\n this.ctx.fillStyle = "red";\r\n this.ctx.font = "16px";\r\n this.ctx.fillText(mess, 0, this.startY + this.qipan.h \/ 2);\r\n\r\n\r\n \/\/ this.ctx.st\r\n },\r\n bindevent: function () {\r\n var that = this;\r\n that.qiziRedMove = true;\r\n that.qiziSelected = false;\r\n that.qiziCurrent = null;\r\n this.element.addEventListener("click", function (e) {\r\n\r\n\r\n var xy = that.getPositions(e);\r\n\r\n\r\n if (that.check(xy.x, xy.y)) {\r\n var pos = that.findPos(xy.x, xy.y);\r\n if (pos != null) {\r\n\r\n\r\n\r\n\r\n if (pos.qizi && pos.qizi.isred == that.qiziRedMove) {\r\n that.resetQiJu();\r\n that.qiziCurrent = pos.qizi;\r\n that.qiziSelected = true;\r\n pos.qizi.select();\r\n\r\n\r\n return;\r\n }\r\n\r\n\r\n if (that.qiziSelected && that.qiziCurrent != null && that.qiziCurrent.moveTo(pos.r, pos.c)) {\r\n\r\n\r\n that.qiziRedMove = !that.qiziRedMove;\r\n that.qiziSelected = false;\r\n }\r\n }\r\n }\r\n });\r\n that.showMess(that.messages.step1);\r\n },\r\n save: function () {\r\n this.ctx.save();\r\n },\r\n restore: function () {\r\n this.ctx.restore();\r\n }\r\n };\r\n var QiZi = function (qipan, r, c, text, isred) {\r\n this.text = text;\r\n this.isred = isred;\r\n this.ctx = qipan.ctx;\r\n this.qipan = qipan;\r\n this.r = r;\r\n this.c = c;\r\n\r\n this.draw();\r\n var that = this, maxR = that.qipan.maxR, maxC = that.qipan.maxC;\r\n this.checkstep = (function () {\r\n if (text == "\u5175" || text == "\u5352") {\r\n if (that.r > 4) {\r\n\r\n return function (r, c) {\r\n return this.r > 4 && (this.r - 1) == r && this.c == c\r\n || this.r <= 4 && this.r == r && ((this.c - 1) == c || (this.c + 1) == c)\r\n || this.r <= 4 && (this.r - 1) == r && this.c == c;\r\n }\r\n\r\n } else {\r\n return function (r, c) {\r\n return this.r < 5 && (this.r + 1) == r && this.c == c || this.r >= 5 && this.r == r && ((this.c - 1) == c || (this.c + 1) == c) || this.r >= 5 && (this.r + 1) == r && this.c == c;\r\n }\r\n }\r\n } else if (text == "\u70ae") {\r\n return function (r, c) {\r\n if (this.r != r && this.c != c) {\r\n return false;\r\n }\r\n var bodys = this.qipan.bodys, step = this.getMoveRange(r, c);\r\n return bodys[r][c][\/c].qizi != null && step == 1 || bodys[r][c][\/c].qizi == null && step == 0;\r\n\r\n\r\n }\r\n } else if (text == "\u8f66" || text == "\u8eca") {\r\n return function (r, c) {\r\n if (this.r != r && this.c != c) {\r\n return false;\r\n }\r\n return this.getMoveRange(r, c) == 0;\r\n }\r\n } else if (text == "\u9a6c" || text == "\u99ac") {\r\n return function (r, c) {\r\n\r\n\r\n return this.r - 2 == r && this.c - 1 == c && this.isEnemyOrEmpty(this.r - 1, this.c)\r\n || this.r - 2 == r && this.c + 1 == c && this.isEnemyOrEmpty(this.r - 1, this.c)\r\n || this.r + 2 == r && this.c - 1 == c && this.isEnemyOrEmpty(this.r + 1, this.c)\r\n || this.r + 2 == r && this.c + 1 == c && this.isEnemyOrEmpty(this.r + 1, this.c)\r\n || this.r - 1 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r, this.c - 1)\r\n || this.r - 1 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r, this.c + 1)\r\n || this.r + 1 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r, this.c - 1)\r\n || this.r + 1 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r, this.c + 1)\r\n ;\r\n }\r\n } else if (text == "\u76f8" || text == "\u8c61") {\r\n return function (r, c) {\r\n return this.r - 2 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r - 1, this.c - 1)\r\n || this.r - 2 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r - 1, this.c + 1)\r\n || this.r + 2 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r + 1, this.c - 1)\r\n || this.r + 2 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r + 1, this.c + 1)\r\n ;\r\n }\r\n } else if (text == "\u58eb" || text == "\u4ed5") {\r\n if (that.r > 4) {\r\n return function (r, c) {\r\n var l = 7, l2 = 9, b = 3, b2 = 5;\r\n if (r < l || r > l2 || c < b || c > b2) {\r\n return false;\r\n }\r\n return this.r - 1 == r && this.c - 1 == c\r\n || this.r - 1 == r && this.c + 1 == c\r\n || this.r + 1 == r && this.c - 1 == c\r\n || this.r + 1 == r && this.c + 1 == c\r\n ;\r\n }\r\n } else {\r\n return function (r, c) {\r\n var l = 0, l2 = 3, b = 3, b2 = 5;\r\n if (r < l || r > l2 || c < b || c > b2) {\r\n return false;\r\n }\r\n return this.r - 1 == r && this.c - 1 == c\r\n || this.r - 1 == r && this.c + 1 == c\r\n || this.r + 1 == r && this.c - 1 == c\r\n || this.r + 1 == r && this.c + 1 == c\r\n ;\r\n }\r\n }\r\n\r\n\r\n } else if (text == "\u5c06" || text == "\u5e05") {\r\n if (that.r > 4) {\r\n return function (r, c) {\r\n var l = 7, l2 = 9, b = 3, b2 = 5;\r\n if (r < l || r > l2 || c < b || c > b2) {\r\n return false;\r\n }\r\n return this.r - 1 == r && this.c == c\r\n || this.r + 1 == r && this.c == c\r\n || this.r == r && this.c - 1 == c\r\n || this.r == r && this.c + 1 == c\r\n ;\r\n }\r\n } else {\r\n return function (r, c) {\r\n var l = 0, l2 = 3, b = 3, b2 = 5;\r\n if (r < l || r > l2 || c < b || c > b2) {\r\n return false;\r\n }\r\n return this.r - 1 == r && this.c == c\r\n || this.r + 1 == r && this.c == c\r\n || this.r == r && this.c - 1 == c\r\n || this.r == r && this.c + 1 == c\r\n ;\r\n }\r\n }\r\n }\r\n return function () {\r\n\r\n };\r\n\r\n }());\r\n }\r\n QiZi.prototype = {\r\n isEnemyOrEmpty: function (r, c) {\r\n return this.qipan.bodys[r][c][\/c].qizi == null;\r\n },\r\n getMoveRange: function (r, c) {\r\n var\r\n step = 0,\r\n bodys = this.qipan.bodys,\r\n minR = Math.min(this.r, r), maxR = Math.max(this.r, r), minC = Math.min(this.c, c), maxC = Math.max(this.c, c);\r\n\r\n\r\n if (this.r != r && this.c == c) {\r\n for (var i = minR; i < maxR; i++) {\r\n\r\n\r\n if (i != this.r && i != r && bodys[i][c][\/c].qizi != null) {\r\n\r\n\r\n step++;\r\n }\r\n }\r\n } else if (this.r == r && this.c != c) {\r\n for (var i = minC; i < maxC; i++) {\r\n\r\n\r\n if (i != this.c && i != c && bodys[r][i].qizi != null) {\r\n step++;\r\n }\r\n }\r\n }\r\n return step;\r\n },\r\n draw: function () {\r\n var\r\n qipan = this.qipan,\r\n isred = this.isred,\r\n ctx = this.ctx,\r\n bodys = qipan.bodys,\r\n radius = qipan.radius,\r\n xy = this.getPostion(this.r, this.c)\r\n ;\r\n ctx.beginPath();\r\n ctx.strokeStyle = isred ? "red" : "#000";\r\n ctx.lineWidth = 1;\r\n\r\n\r\n this.x = xy.x;\r\n this.y = xy.y;\r\n this.left = xy.x - radius;\r\n this.top = xy.y - radius;\r\n this.right = xy.x + radius;\r\n this.bottom = xy.y + radius;\r\n\r\n\r\n ctx.arc(xy.x, xy.y, radius, 0, 2 * Math.PI);\r\n\r\n\r\n ctx.fillStyle = "rgba(250, 240, 240,1)";\r\n ctx.fill();\r\n ctx.stroke();\r\n\r\n\r\n ctx.fillStyle = isred ? "red" : "#000";\r\n ctx.textAlign = "center";\r\n ctx.fillText(this.text, xy.x, xy.y);\r\n },\r\n getPostion: function (r, c) {\r\n return {\r\n x: this.qipan.bodys[r][c][\/c].x,\r\n y: this.qipan.bodys[r][c][\/c].y\r\n };\r\n },\r\n\r\n moveTo: function (r, c) {\r\n if (this.checkstep(r, c)) {\r\n var r2 = this.r, c2 = this.c;\r\n this.r = r;\r\n this.c = c;\r\n this.qipan.moveQizi(r2, c2, r, c);\r\n return true;\r\n }\r\n return false;\r\n\r\n },\r\n select: function () {\r\n var that = this, ctx = that.ctx, len = 15;\r\n ctx.beginPath();\r\n ctx.strokeStyle = "#00ff21";\r\n ctx.lineWidth = 5;\r\n\r\n\r\n ctx.moveTo(that.left, that.top + len);\r\n ctx.lineTo(that.left, that.top);\r\n ctx.lineTo(that.left + len, that.top);\r\n\r\n\r\n ctx.moveTo(that.left, that.bottom - len);\r\n ctx.lineTo(that.left, that.bottom);\r\n ctx.lineTo(that.left + len, that.bottom);\r\n\r\n\r\n ctx.moveTo(that.right, that.top + len);\r\n ctx.lineTo(that.right, that.top);\r\n ctx.lineTo(that.right - len, that.top);\r\n\r\n\r\n ctx.moveTo(that.right, that.bottom - len);\r\n ctx.lineTo(that.right, that.bottom);\r\n ctx.lineTo(that.right - len, that.bottom);\r\n ctx.stroke();\r\n }\r\n }\r\n }())\r\n\r\n var xq = new XiangQi("xqCanvas");\r\n xq.renderQiJu(true);\r\n<\/script>\r\n<\/code><\/pre>\n![\"20200507120230\"](\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/05\/20200507120230.png\")
<\/a><\/p>\n\u539f\u6587\u94fe\u63a5\uff1ahttps:\/\/blog.csdn.net\/long5305350\/java\/article\/details\/44056963<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u8fd9\u662f\u6211\u7b2c\u4e00\u6b21\u5199\u6e38\u620f\uff0c\u4e5f\u662f\u968f\u5174\u82b1\u4e86\u4e00\u4e0b\u5348\u5199\u7684\uff0c\u4ee3\u7801\u7ed3\u6784\u53ef\u80fd\u6ca1\u6709\u8bbe\u8ba1\u7684\u5f88\u6e05\u6670\uff0c\u4f46\u662f\u4e3b\u8981\u903b\u8f91\u8fd8\u662f\u5f88\u6e05\u695a\u3002\u8fd9\u6b21\u5229\u7528\u4e86h […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[109,105],"tags":[144],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2931"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2931"}],"version-history":[{"count":4,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2931\/revisions"}],"predecessor-version":[{"id":2936,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2931\/revisions\/2936"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}