From ca924af85bb7d91c9bbf608ebb828cbf19b62696 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Tue, 31 Oct 2023 23:51:21 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B1=A1=E6=A3=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ChineseChess.js | 144 ++++++++++++++++++++++++++++++++++++++++++++ src/main.js | 6 ++ 2 files changed, 150 insertions(+) create mode 100644 src/ChineseChess.js diff --git a/src/ChineseChess.js b/src/ChineseChess.js new file mode 100644 index 0000000..1799b17 --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 16169e6..5f82794 100644 --- a/src/main.js +++ b/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