这是我最近几天做着玩的，这篇文章仅为了记录下实现的过程，欢迎大家共同探讨 ## 最终的效果图 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e049592a8b6840fda45ec8eb9ea19904~tplv-k3u1fbpfcp-watermark.image) ## 预览地址(云服务配置贼差，耐心等会，用电脑看哈，没做适配) > http://119.45.20.162:8089/vue_mange_template/#/chess ## 描述 > 用的vue框架(任何框架都能做，不用框架也可以，只是这个我用的多)。 > 一开始想到的时候，有考虑过两种实现方式，一种是画一堆div，一种是用canvas实现，我最终选择了用canvas实现。 > 目前已经实现了游戏的大部分规则，game over还没做，我怕做着做着忘记前面的实现了，先记录一下 - 目标样式 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9bf7d906555b41d88eec4512339c8d05~tplv-k3u1fbpfcp-watermark.image) ## 绘制棋盘和棋盘上的格子 - 思考 > 整个棋盘是横着9个竖着10个，我们将canvas的宽度设置为450，高度设置为500，边距为25，每个格子的宽度为50，这样在循环后就能用一个循环画出来棋盘的格子了 ```js ``` - 效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d18307ad59844fa283aefde22026cab7~tplv-k3u1fbpfcp-watermark.image) ## 绘制河道和将帅区域的斜线 - 继续思考 > 中间有河道，我们可以绘制一个矩形放到河道的位置覆盖，再往河道的位置画文字。双方有将帅区域，斜线也需要我们手动去绘制。下面的代码将只会出现发生变化的部分，否则太占篇幅了 ```js // 绘制棋盘 drawChessContainer() { // ....循环绘制格子部分 // 双方的将军区域 // 上方 ctx.beginPath(); ctx.moveTo(175, this.padding); ctx.lineTo(275, 125); ctx.stroke(); ctx.beginPath(); ctx.moveTo(275, this.padding); ctx.lineTo(175, 125); ctx.stroke(); // 下方 ctx.beginPath(); ctx.moveTo(175, 375); ctx.lineTo(275, 475); ctx.stroke(); ctx.beginPath(); ctx.moveTo(175, 475); ctx.lineTo(275, 375); ctx.stroke(); // 楚河,汉界 ctx.fillStyle = this.primary; ctx.lineWidth = 2; ctx.beginPath(); ctx.rect(26, 225, 398, this.locationScale); ctx.fill(); ctx.font = '28px "报隶-简"'; ctx.fillStyle = "#000"; ctx.textBaseline = "middle"; ctx.fillText("楚河", 75, 250); ctx.fillText("汉界", 325, 250); }, ``` - 效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/985a260ec264481c8a8f2b443da28bde~tplv-k3u1fbpfcp-watermark.image) ## 绘制炮和兵下面的十字线 - 思考 > 我们定义一个虚拟坐标轴，把棋盘左上角定义为0的位置，往右是x轴，往下是y轴，一个格子的物理距离50等于虚拟坐标轴一格的距离。双方的炮，和兵下面都有十字线(我自己起的名字，原谅我不知道怎么这个怎么称呼)，x轴为0时没有左边部分，x轴为最大时，没有右边部分，这样我们就可以先定义好会有十字线的位置的坐标，再通过一个循环搞定这些，免去一个一个手动画的辛苦 - 效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4488fbdf3a3048588fba12dedd986aef~tplv-k3u1fbpfcp-watermark.image) ```js data(){ return { crossList: [ // 上部分 { x: 1, y: 2 }, { x: 7, y: 2 }, { x: 0, y: 3 }, { x: 2, y: 3 }, { x: 4, y: 3 }, { x: 6, y: 3 }, { x: 8, y: 3 }, // 下部分 { x: 0, y: 6 }, { x: 2, y: 6 }, { x: 4, y: 6 }, { x: 6, y: 6 }, { x: 8, y: 6 }, { x: 1, y: 7 }, { x: 7, y: 7 }, ], // 十字数组 } }, methods:{ // 绘制棋盘 drawChessContainer(){ // ......绘制棋盘的代码 this.drawCross() }, // 绘制十字线 drawCross(x, y) { const { ctx, crossList, locationScale } = this; ctx.lineWidth = 1; // 画炮和兵下面的十字 crossList.forEach((item) => { if (item.x !== 0) { // 左上 ctx.beginPath(); ctx.moveTo(item.x * locationScale + 10, item.y * locationScale + 20); ctx.lineTo(item.x * locationScale + 20, item.y * locationScale + 20); ctx.stroke(); ctx.beginPath(); ctx.moveTo(item.x * locationScale + 20, item.y * locationScale + 20); ctx.lineTo(item.x * locationScale + 20, item.y * locationScale + 10); ctx.stroke(); // 左下 ctx.beginPath(); ctx.moveTo(item.x * locationScale + 10, item.y * locationScale + 30); ctx.lineTo(item.x * locationScale + 20, item.y * locationScale + 30); ctx.stroke(); ctx.beginPath(); ctx.moveTo(item.x * locationScale + 20, item.y * locationScale + 30); ctx.lineTo(item.x * locationScale + 20, item.y * locationScale + 40); ctx.stroke(); } if (item.x !== 8) { // 右上 ctx.beginPath(); ctx.moveTo(item.x * locationScale + 30, item.y * locationScale + 20); ctx.lineTo(item.x * locationScale + 40, item.y * locationScale + 20); ctx.stroke(); ctx.beginPath(); ctx.moveTo(item.x * locationScale + 30, item.y * locationScale + 20); ctx.lineTo(item.x * locationScale + 30, item.y * locationScale + 10); ctx.stroke(); // 右下 ctx.beginPath(); ctx.moveTo(item.x * locationScale + 30, item.y * locationScale + 30); ctx.lineTo(item.x * locationScale + 40, item.y * locationScale + 30); ctx.stroke(); ctx.beginPath(); ctx.moveTo(item.x * locationScale + 30, item.y * locationScale + 30); ctx.lineTo(item.x * locationScale + 30, item.y * locationScale + 40); ctx.stroke(); } }); }, } ``` ## 绘制棋子 - 思考 > 我们需要一个数组，里面记着双方棋子的位置的配置项，包含位置，类型，分组等等这个数组需要自己去定义,下面是我定义的某一项 ```js { y: 0, // 位置 x: 0, // 位置 text: "車", // 显示的文字 show: true, // 表示棋子是否显示 type: "car", // 是什么棋子 car既代表車 camp: "black", // 属于红方 active: false, // 是否激活，后边做逻辑的时候用到 }, ``` > 双反各有16个棋子，各个棋子的位置不同。怎么确定棋子的位置呢，我们之前设置了一个虚拟坐标就起作用了，例如将在x:4 y:0 位置，我们将 4*50(每一格的物理大小)+25(边距大小)=arcx arcx就是圆心的x轴，y也这样计算就能得到圆心的x,y的实际位置，可以用于canvas绘制 > 绘制棋子的代码直接放下面吧，免得占篇幅。第一篇就先写到这里，有空再写怎么让棋子动起来，让游戏跑起来的逻辑 ## 绘制棋盘棋子的完整代码 ```js ```