象棋

src/ChineseChess.js

@@ -0,0 +1,144 @@
+import { createElement } from './weigets.js';
+
+// 棋子
+class Chessman {
+    constructor(color) {
+        this.color = color;
+        this.name = '';
+        this.position = '';
+        this.status = '';
+        this.move = '';
+        this.rule = '';
+        this.display = '';
+        this.operation = '';
+    }
+    // 绘制棋子
+    draw() {
+        const chessman = createElement({
+            style: {
+                backgroundColor: this.color,
+            },
+        });
+    }
+}
+
+// 棋盘
+export class Chessboard {
+    constructor() {
+        this.position = '';
+        this.move = '';
+        this.rule = '';
+        this.display = '';
+        this.operation = '';
+    }
+    // 初始化绘制棋盘
+    draw() {
+        const canvas = createElement({ width: 800, height: 800 }, 'canvas')
+        const context = canvas.getContext('2d')
+
+        // 设置线条颜色
+        context.strokeStyle = '#000'
+
+        const width = 800 / 4 / 4
+
+        // 横线竖线
+        for (let i = 0; i < 5; i++) {
+            context.moveTo(0, width * i)
+            context.lineTo(width * 4, width * i)
+            context.moveTo(width * i, 0)
+            context.lineTo(width * i, width * 4)
+        }
+
+        // 斜线
+        context.moveTo(width * 3, width * 0)
+        context.lineTo(width * 4, width * 1)
+        context.moveTo(width * 4, width * 1)
+        context.lineTo(width * 3, width * 2)
+
+        // 炮位置
+        context.moveTo(width * 1 - 4, width * 2 - 9)
+        context.lineTo(width * 1 - 4, width * 2 - 4)
+        context.lineTo(width * 1 - 9, width * 2 - 4)
+        context.moveTo(width * 1 + 4, width * 2 - 9)
+        context.lineTo(width * 1 + 4, width * 2 - 4)
+        context.lineTo(width * 1 + 9, width * 2 - 4)
+        context.moveTo(width * 1 - 4, width * 2 + 9)
+        context.lineTo(width * 1 - 4, width * 2 + 4)
+        context.lineTo(width * 1 - 9, width * 2 + 4)
+        context.moveTo(width * 1 + 4, width * 2 + 9)
+        context.lineTo(width * 1 + 4, width * 2 + 4)
+        context.lineTo(width * 1 + 9, width * 2 + 4)
+
+        // 兵位置
+        context.moveTo(width * 0 - 4, width * 3 - 9)
+        context.lineTo(width * 0 - 4, width * 3 - 4)
+        context.lineTo(width * 0 - 9, width * 3 - 4)
+        context.moveTo(width * 0 + 4, width * 3 - 9)
+        context.lineTo(width * 0 + 4, width * 3 - 4)
+        context.lineTo(width * 0 + 9, width * 3 - 4)
+        context.moveTo(width * 2 - 4, width * 3 - 9)
+        context.lineTo(width * 2 - 4, width * 3 - 4)
+        context.lineTo(width * 2 - 9, width * 3 - 4)
+        context.moveTo(width * 2 + 4, width * 3 - 9)
+        context.lineTo(width * 2 + 4, width * 3 - 4)
+        context.lineTo(width * 2 + 9, width * 3 - 4)
+        context.moveTo(width * 4 - 4, width * 3 - 9)
+        context.lineTo(width * 4 - 4, width * 3 - 4)
+        context.lineTo(width * 4 - 9, width * 3 - 4)
+        
+        // 兵位置向上镜像
+        context.moveTo(width * 0 - 4, width * 3 + 9)
+        context.lineTo(width * 0 - 4, width * 3 + 4)
+        context.lineTo(width * 0 - 9, width * 3 + 4)
+        context.moveTo(width * 0 + 4, width * 3 + 9)
+        context.lineTo(width * 0 + 4, width * 3 + 4)
+        context.lineTo(width * 0 + 9, width * 3 + 4)
+        context.moveTo(width * 2 - 4, width * 3 + 9)
+        context.lineTo(width * 2 - 4, width * 3 + 4)
+        context.lineTo(width * 2 - 9, width * 3 + 4)
+        context.moveTo(width * 2 + 4, width * 3 + 9)
+        context.lineTo(width * 2 + 4, width * 3 + 4)
+        context.lineTo(width * 2 + 9, width * 3 + 4)
+        context.moveTo(width * 4 - 4, width * 3 + 9)
+        context.lineTo(width * 4 - 4, width * 3 + 4)
+        context.lineTo(width * 4 - 9, width * 3 + 4)
+
+        // 描绘线条
+        context.stroke()
+
+        context.save()                                               // 保存当前状态
+        context.translate(0, 0)                                      // 移动到要镜像的区域
+        context.scale(-1, 1)                                         // X轴镜像
+        context.drawImage(canvas, 0, 0, 400, 800, -400, 0, 400, 800) // 将左上角的区域复制并镜像到右上角
+        context.restore()                                            // 恢复到上次保存的状态
+
+        context.save()                                               // 保存当前状态
+        context.translate(0, 0)                                      // 移动到要镜像的区域
+        context.scale(1, -1)                                         // Y轴镜像
+        context.drawImage(canvas, 0, 0, 800, 400, 0, -400 - width, 800, 400) // 将上半部分镜像到下半部分
+        context.restore()                                            // 恢复到上次保存的状态
+
+        // 河界
+        context.font = '20px serif'
+        context.fillText('楚', width * 1.5, width * 4.65)
+        context.fillText('河', width * 2.5, width * 4.65)
+        context.fillText('漢', width * 5.5, width * 4.65)
+        context.fillText('界', width * 6.5, width * 4.65)
+
+        document.body.appendChild(canvas)
+    }
+    // 初始化绘制棋子
+    drawChessman() {
+        const chessman = createElement({
+            style: {
+                backgroundColor: '#f00',
+                width: '50px',
+                height: '50px',
+            },
+            innerText: '棋子',
+        });
+        document.body.appendChild(chessman);
+    }
+}
+
+export default { Chessboard, Chessman }

src/main.js

@@ -11,6 +11,12 @@ window.Buffer = Buffer
 window.process = process
 import { parseBlob } from 'music-metadata-browser'
 
+import { Chessboard } from './ChineseChess.js'
+
+// 中国象棋
+const chessboard = new Chessboard()
+chessboard.draw()
+
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
 const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB