棋子

src/ChineseChess.js

@@ -23,7 +23,7 @@ class Chessman {
 }
 
 // 单独绘制棋盘
-export function 棋盘(比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2) {
+export function 棋盘(比例, 边距, 背景色 = '#ffeedd', 线条色 = '#784518', 线条宽度 = 2) {
     const 宽度 = (比例 * 8) + (边距 * 2)
     const 高度 = (比例 * 9) + (边距 * 2)
     const 画布 = createElement({ width: 宽度, height: 高度 }, 'canvas')
@@ -54,7 +54,7 @@ export class Chessboard {
         this.operation = '';
     }
     // 初始化绘制棋盘
-    绘制棋盘({比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2}) {
+    绘制棋盘({ 比例, 边距, 背景色 = '#ffeedd', 线条色 = '#784518', 线条宽度 = 2 }) {
         const 宽度 = (比例 * 8) + (边距 * 2)
         const 高度 = (比例 * 9) + (边距 * 2)
 
@@ -132,17 +132,17 @@ export class Chessboard {
         context.save()                                                             // 保存当前状态
         context.translate(0, 0)                                                    // 移动到要镜像的区域
         context.scale(-1, 1)                                                       // X轴镜像
-        context.drawImage(canvas, 0, 0, 比例*4, 比例*8, -(比例*8), 0, 比例*4, 比例*8) // 将左上角的区域复制并镜像到右上角
+        context.drawImage(canvas, 0, 0, 比例 * 4, 比例 * 8, -(比例 * 8), 0, 比例 * 4, 比例 * 8) // 将左上角的区域复制并镜像到右上角
         context.restore()                                                          // 恢复到上次保存的状态
 
         context.save()                                                             // 保存当前状态
         context.translate(0, 0)                                                    // 移动到要镜像的区域
         context.scale(1, -1)                                                       // Y轴镜像
-        context.drawImage(canvas, 0, 0, 比例*8, 比例*4+(线条宽度/2), 0, -(比例*9), 比例*8, 比例*4+(线条宽度/2)) // 将上半部分镜像到下半部分
+        context.drawImage(canvas, 0, 0, 比例 * 8, 比例 * 4 + (线条宽度 / 2), 0, -(比例 * 9), 比例 * 8, 比例 * 4 + (线条宽度 / 2)) // 将上半部分镜像到下半部分
         context.restore()                                                          // 恢复到上次保存的状态
 
         // 河界
-        context.font = `${比例/2.4}px serif`
+        context.font = `${比例 / 2.4}px serif`
         context.fillStyle = '#784518'
         context.fillText('楚', 比例 * 1.5, 比例 * 4.65)
         context.fillText('河', 比例 * 2.5, 比例 * 4.65)
@@ -150,7 +150,7 @@ export class Chessboard {
         context.fillText('界', 比例 * 6.5, 比例 * 4.65)
 
         var img = new Image()
-        img.onload = function () {
+        img.onload = () => {
             context.clearRect(0, 0, canvas.width, canvas.height)
             context.drawImage(img, 边距, 边距)
             context.beginPath() // 重新描绘线条
@@ -161,22 +161,77 @@ export class Chessboard {
             context.lineTo(边距 + (比例 * 8), 边距)
             context.lineTo(边距, 边距)
             context.stroke()
+
+            //// 绘制棋子们
+            //context.font = '20px serif'
+            //context.fillStyle = 'red'
+            //context.fillText('車', 0+边距-(比例/5), 20+边距-(比例/5))
+            //context.stroke()
+            //// 绘制棋子们
+            //context.font = '20px serif'
+            //context.fillStyle = 'red'
+            //context.fillText('馬', 0+边距-(比例/5) + (比例*1), 20+边距-(比例/5))
+            //context.stroke()
+
+            // 单独保存绘制好的棋盘
+            const chessboard = canvas.toDataURL()
+
+            // 红方棋子
+            this.drawChessman({context, name:'車', color:'#cc1414', position:{x:0, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'馬', color:'#cc1414', position:{x:1, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'相', color:'#cc1414', position:{x:2, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'仕', color:'#cc1414', position:{x:3, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'将', color:'#cc1414', position:{x:4, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'仕', color:'#cc1414', position:{x:5, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'相', color:'#cc1414', position:{x:6, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'馬', color:'#cc1414', position:{x:7, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'車', color:'#cc1414', position:{x:8, y:0}, 边距, 比例})
+            this.drawChessman({context, name:'砲', color:'#cc1414', position:{x:1, y:2}, 边距, 比例})
+            this.drawChessman({context, name:'砲', color:'#cc1414', position:{x:7, y:2}, 边距, 比例})
+            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:0, y:3}, 边距, 比例})
+            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:2, y:3}, 边距, 比例})
+            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:4, y:3}, 边距, 比例})
+            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:6, y:3}, 边距, 比例})
+            this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:8, y:3}, 边距, 比例})
+
+            // 绿方棋子
+            this.drawChessman({context, name:'車', color:'#14cc14', position:{x:0, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'馬', color:'#14cc14', position:{x:1, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'象', color:'#14cc14', position:{x:2, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'士', color:'#14cc14', position:{x:3, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'帥', color:'#14cc14', position:{x:4, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'士', color:'#14cc14', position:{x:5, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'象', color:'#14cc14', position:{x:6, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'馬', color:'#14cc14', position:{x:7, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'車', color:'#14cc14', position:{x:8, y:9}, 边距, 比例})
+            this.drawChessman({context, name:'炮', color:'#14cc14', position:{x:1, y:7}, 边距, 比例})
+            this.drawChessman({context, name:'炮', color:'#14cc14', position:{x:7, y:7}, 边距, 比例})
+            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:0, y:6}, 边距, 比例})
+            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:2, y:6}, 边距, 比例})
+            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:4, y:6}, 边距, 比例})
+            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:6, y:6}, 边距, 比例})
+            this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:8, y:6}, 边距, 比例})
+
         }
         img.src = canvas.toDataURL()
 
         canvas.style.backgroundColor = '#ffeedd'
+        canvas.style.margin = '1rem'
         document.body.appendChild(canvas)
-
-        // 单独保存绘制好的棋盘
-        const chessboard = canvas.toDataURL()
-
-        this.drawChessman(context, '車', 'red', { top: 0, left: 0 })
     }
     // canvas绘制棋子
-    drawChessman(context, name, color, position = { top: 0, left: 0 }) {
+    drawChessman({context, name, color, position = { x: 0, y: 0 }, 边距, 比例}) {
+        // 先画圆形象棋子
+        context.beginPath()
+        context.arc(边距+(比例*position.x), 边距+(比例*position.y), 比例/3, 0, 2*Math.PI)
+        context.fillStyle = '#ffeedd'
+        context.fill()
+        context.stroke()
+
+        // 再画文字
         context.font = '20px serif'
         context.fillStyle = color
-        context.fillText(name, position.left, position.top)
+        context.fillText(name, 边距+(比例*position.x)-(比例/5), 20+边距-(比例/4) + (比例*position.y))
         context.stroke()
     }
 }