{"id":97272,"date":"2026-08-29T08:36:31","date_gmt":"2026-08-29T00:36:31","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/97272.html"},"modified":"2026-08-29T08:36:31","modified_gmt":"2026-08-29T00:36:31","slug":"%e4%b8%ad%e5%9b%bd%e8%b1%a1%e6%a3%8b%e7%bd%91%e9%a1%b5%e7%89%88","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/97272.html","title":{"rendered":"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248"},"content":{"rendered":"<\/p>\n

\"\"<\/p>\n

1\u7248（\u68cb\u5b50\u62d6\u5c3e\u8fc7\u4e8e\u5355\u8c03）：<\/p>\n

<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u4e2d\u56fd\u8c61\u68cb<\/title>
\n<style>
\n * { box-sizing: border-box; margin: 0; padding: 0; }
\n body {
\n font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;
\n background: #e8e4dc;
\n background-image:
\n radial-gradient(circle at 20% 30%, rgba(180,160,130,0.15) 0%, transparent 50%),
\n radial-gradient(circle at 80% 70%, rgba(160,140,110,0.1) 0%, transparent 50%),
\n radial-gradient(circle at 50% 50%, rgba(200,190,170,0.2) 0%, transparent 70%);
\n min-height: 100vh;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n padding: 30px 20px;
\n color: #2c2c2c;
\n }
\n h1 {
\n font-size: 38px;
\n margin-bottom: 15px;
\n letter-spacing: 12px;
\n color: #1a1a1a;
\n font-weight: normal;
\n text-shadow: 1px 1px 0 rgba(0,0,0,0.08);
\n position: relative;
\n }
\n h1::after {
\n content: '';
\n display: block;
\n width: 60%;
\n height: 2px;
\n margin: 8px auto 0;
\n background: linear-gradient(90deg, transparent, #555, transparent);
\n }
\n .info {
\n display: flex;
\n gap: 30px;
\n margin-bottom: 20px;
\n align-items: center;
\n font-size: 18px;
\n }
\n .turn-indicator {
\n padding: 10px 24px;
\n border-radius: 4px;
\n font-weight: bold;
\n transition: all 0.3s;
\n border: 1px solid #333;
\n background: #f5f1ea;
\n color: #2c2c2c;
\n letter-spacing: 2px;
\n }
\n .turn-red { background: #c0392b; color: #f5f1ea; border-color: #8b2a1e; }
\n .turn-black { background: #2c2c2c; color: #f5f1ea; border-color: #000; }
\n button {
\n background: #f5f1ea;
\n color: #2c2c2c;
\n border: 1px solid #333;
\n padding: 10px 24px;
\n border-radius: 4px;
\n cursor: pointer;
\n font-size: 16px;
\n font-family: inherit;
\n font-weight: bold;
\n letter-spacing: 2px;
\n transition: all 0.3s;
\n }
\n button:hover {
\n background: #2c2c2c;
\n color: #f5f1ea;
\n transform: translateY(-2px);
\n }
\n .canvas-wrap {
\n position: relative;
\n }
\n canvas {
\n background: #f5f1ea;
\n border: 1px solid #333;
\n border-radius: 2px;
\n box-shadow:
\n 0 0 0 8px #f5f1ea,
\n 0 0 0 9px #333,
\n 0 15px 40px rgba(0,0,0,0.3);
\n cursor: pointer;
\n }
\n .status {
\n margin-top: 18px;
\n font-size: 20px;
\n min-height: 28px;
\n color: #c0392b;
\n font-weight: bold;
\n letter-spacing: 3px;
\n }
\n .captured {
\n margin-top: 12px;
\n display: flex;
\n gap: 40px;
\n font-size: 16px;
\n color: #555;
\n }
\n .captured div { min-height: 30px; }
\n .captured span {
\n display: inline-block;
\n margin: 0 3px;
\n font-size: 22px;
\n font-family: "KaiTi", "STKaiti", serif;
\n }
\n .fx-text {
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n transform: translate(-50%, -50%);
\n pointer-events: none;
\n font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;
\n font-weight: bold;
\n opacity: 0;
\n z-index: 10;
\n }
\n .fx-check {
\n font-size: 72px;
\n color: #c0392b;
\n letter-spacing: 20px;
\n text-shadow: 0 0 20px rgba(192, 57, 43, 0.6);
\n }
\n .fx-mate {
\n font-size: 96px;
\n color: #8b0000;
\n letter-spacing: 30px;
\n text-shadow: 0 0 30px rgba(139, 0, 0, 0.8), 0 0 60px rgba(192, 57, 43, 0.5);
\n }
\n @keyframes fxFlash {
\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
\n 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
\n 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
\n 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
\n }
\n @keyframes fxShake {
\n 0%, 100% { transform: translate(0, 0); }
\n 10% { transform: translate(-6px, -4px); }
\n 20% { transform: translate(5px, 3px); }
\n 30% { transform: translate(-4px, 5px); }
\n 40% { transform: translate(6px, -3px); }
\n 50% { transform: translate(-5px, 4px); }
\n 60% { transform: translate(3px, -5px); }
\n 70% { transform: translate(-3px, 3px); }
\n 80% { transform: translate(4px, -2px); }
\n 90% { transform: translate(-2px, 2px); }
\n }
\n .shake { animation: fxShake 0.5s ease-in-out; }
\n<\/style>
\n<\/head>
\n<body>
\n <h1>\u4e2d \u570b \u8c61 \u68cb<\/h1>
\n <div class="info">
\n <div class="turn-indicator" id="turnIndicator">\u7ea2\u65b9\u8d70\u68cb<\/div>
\n <button id="restartBtn">\u91cd \u65b0 \u5f00 \u59cb<\/button>
\n <button id="undoBtn">\u6094 \u68cb<\/button>
\n <\/div>
\n <div class="canvas-wrap" id="canvasWrap">
\n <canvas id="board" width="540" height="600"><\/canvas>
\n <div class="fx-text fx-check" id="fxCheck">\u5c06 \u8ecd<\/div>
\n <div class="fx-text fx-mate" id="fxMate">\u7edd \u6bba<\/div>
\n <\/div>
\n <div class="status" id="status"><\/div>
\n <div class="captured">
\n <div>\u7ea2\u65b9\u88ab\u5403 \u00b7 <span id="capturedByRed"><\/span><\/div>
\n <div>\u9ed1\u65b9\u88ab\u5403 \u00b7 <span id="capturedByBlack"><\/span><\/div>
\n <\/div><\/p>\n

<script>
\nconst CELL = 60;
\nconst MARGIN_X = 30;
\nconst MARGIN_Y = 30;
\nconst COLS = 9;
\nconst ROWS = 10;<\/p>\n

const canvas = document.getElementById('board');
\nconst ctx = canvas.getContext('2d');
\nconst canvasWrap = document.getElementById('canvasWrap');<\/p>\n

const RED = 'red';
\nconst BLACK = 'black';<\/p>\n

const PIECES = {
\n red: {
\n king: '\u5e25', advisor: '\u4ed5', elephant: '\u76f8', horse: '\u508c',
\n chariot: '\u4fe5', cannon: '\u70ae', pawn: '\u5175'
\n },
\n black: {
\n king: '\u5c07', advisor: '\u58eb', elephant: '\u8c61', horse: '\u99ac',
\n chariot: '\u8eca', cannon: '\u7832', pawn: '\u5352'
\n }
\n};<\/p>\n

let board = [];
\nlet currentPlayer = RED;
\nlet selected = null;
\nlet legalMoves = [];
\nlet gameOver = false;
\nlet history = [];
\nlet capturedByRed = [];
\nlet capturedByBlack = [];<\/p>\n

let effects = [];
\nlet animating = false;
\nlet checkAnimStart = 0;
\nlet checkKingPos = null;
\nlet checkmateAnimStart = 0;<\/p>\n

function P(type, color) {
\n return { type, color };
\n}<\/p>\n

function initBoard() {
\n board = [
\n [P('chariot',BLACK),P('horse',BLACK),P('elephant',BLACK),P('advisor',BLACK),P('king',BLACK),P('advisor',BLACK),P('elephant',BLACK),P('horse',BLACK),P('chariot',BLACK)],
\n [null,null,null,null,null,null,null,null,null],
\n [null,P('cannon',BLACK),null,null,null,null,null,P('cannon',BLACK),null],
\n [P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK)],
\n [null,null,null,null,null,null,null,null,null],
\n [null,null,null,null,null,null,null,null,null],
\n [P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED)],
\n [null,P('cannon',RED),null,null,null,null,null,P('cannon',RED),null],
\n [null,null,null,null,null,null,null,null,null],
\n [P('chariot',RED),P('horse',RED),P('elephant',RED),P('advisor',RED),P('king',RED),P('advisor',RED),P('elephant',RED),P('horse',RED),P('chariot',RED)]
\n ];
\n currentPlayer = RED;
\n selected = null;
\n legalMoves = [];
\n gameOver = false;
\n history = [];
\n capturedByRed = [];
\n capturedByBlack = [];
\n effects = [];
\n checkAnimStart = 0;
\n checkKingPos = null;
\n checkmateAnimStart = 0;
\n hideFx('fxCheck');
\n hideFx('fxMate');
\n updateUI();
\n draw();
\n}<\/p>\n

function isInBoard(r, c) {
\n return r >= 0 && r < ROWS && c >= 0 && c < COLS;
\n}<\/p>\n

function inPalace(r, c, color) {
\n if (c < 3 || c > 5) return false;
\n if (color === RED) return r >= 7 && r <= 9;
\n return r >= 0 && r <= 2;
\n}<\/p>\n

function onOwnSide(r, color) {
\n if (color === RED) return r >= 5;
\n return r <= 4;
\n}<\/p>\n

function getLegalMoves(r, c) {
\n const piece = board[r][c];
\n if (!piece) return [];
\n const color = piece.color;
\n const type = piece.type;
\n const moves = [];
\n const addMove = (nr, nc) => {
\n if (!isInBoard(nr, nc)) return;
\n const target = board[nr][nc];
\n if (target && target.color === color) return;
\n moves.push({ r: nr, c: nc, capture: !!target });
\n };<\/p>\n

switch (type) {
\n case 'king': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n if (inPalace(nr, nc, color)) addMove(nr, nc);
\n }
\n break;
\n }
\n case 'advisor': {
\n const dirs = [[-1,-1],[-1,1],[1,-1],[1,1]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n if (inPalace(nr, nc, color)) addMove(nr, nc);
\n }
\n break;
\n }
\n case 'elephant': {
\n const dirs = [[-2,-2],[-2,2],[2,-2],[2,2]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n const mr = r + dr\/2, mc = c + dc\/2;
\n if (!isInBoard(nr, nc)) continue;
\n if (!onOwnSide(nr, color)) continue;
\n if (board[mr][mc]) continue;
\n addMove(nr, nc);
\n }
\n break;
\n }
\n case 'horse': {
\n const hm = [
\n {dr:-2,dc:-1,br:-1,bc:0}, {dr:-2,dc:1,br:-1,bc:0},
\n {dr:2,dc:-1,br:1,bc:0}, {dr:2,dc:1,br:1,bc:0},
\n {dr:-1,dc:-2,br:0,bc:-1}, {dr:1,dc:-2,br:0,bc:-1},
\n {dr:-1,dc:2,br:0,bc:1}, {dr:1,dc:2,br:0,bc:1}
\n ];
\n for (const m of hm) {
\n const nr = r + m.dr, nc = c + m.dc;
\n const lr = r + m.br, lc = c + m.bc;
\n if (!isInBoard(nr, nc)) continue;
\n if (board[lr][lc]) continue;
\n addMove(nr, nc);
\n }
\n break;
\n }
\n case 'chariot': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n let nr = r + dr, nc = c + dc;
\n while (isInBoard(nr, nc)) {
\n const target = board[nr][nc];
\n if (!target) {
\n moves.push({ r: nr, c: nc, capture: false });
\n } else {
\n if (target.color !== color) {
\n moves.push({ r: nr, c: nc, capture: true });
\n }
\n break;
\n }
\n nr += dr; nc += dc;
\n }
\n }
\n break;
\n }
\n case 'cannon': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n let nr = r + dr, nc = c + dc;
\n let jumped = false;
\n while (isInBoard(nr, nc)) {
\n const target = board[nr][nc];
\n if (!jumped) {
\n if (!target) {
\n moves.push({ r: nr, c: nc, capture: false });
\n } else {
\n jumped = true;
\n }
\n } else {
\n if (target) {
\n if (target.color !== color) {
\n moves.push({ r: nr, c: nc, capture: true });
\n }
\n break;
\n }
\n }
\n nr += dr; nc += dc;
\n }
\n }
\n break;
\n }
\n case 'pawn': {
\n const forward = color === RED ? -1 : 1;
\n const nr = r + forward;
\n if (isInBoard(nr, c)) addMove(nr, c);
\n if (!onOwnSide(r, color)) {
\n if (isInBoard(r, c – 1)) addMove(r, c – 1);
\n if (isInBoard(r, c + 1)) addMove(r, c + 1);
\n }
\n break;
\n }
\n }
\n return moves;
\n}<\/p>\n

function findKing(color) {
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].type === 'king' && board[r][c].color === color) return { r, c };
\n }
\n }
\n return null;
\n}<\/p>\n

function kingsFacing() {
\n const rk = findKing(RED);
\n const bk = findKing(BLACK);
\n if (!rk || !bk || rk.c !== bk.c) return false;
\n const col = rk.c;
\n const minR = Math.min(rk.r, bk.r);
\n const maxR = Math.max(rk.r, bk.r);
\n for (let r = minR + 1; r < maxR; r++) {
\n if (board[r][col]) return false;
\n }
\n return true;
\n}<\/p>\n

function getLegalMovesFiltered(r, c) {
\n const moves = getLegalMoves(r, c);
\n return moves.filter(m => {
\n const captured = board[m.r][m.c];
\n const moving = board[r][c];
\n board[m.r][m.c] = moving;
\n board[r][c] = null;
\n const inCheck = isKingInCheck(moving.color) || kingsFacing();
\n board[r][c] = moving;
\n board[m.r][m.c] = captured;
\n return !inCheck;
\n });
\n}<\/p>\n

function isKingInCheck(color) {
\n const king = findKing(color);
\n if (!king) return true;
\n const oppColor = color === RED ? BLACK : RED;
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].color === oppColor) {
\n const moves = getLegalMoves(r, c);
\n if (moves.some(m => m.r === king.r && m.c === king.c)) return true;
\n }
\n }
\n }
\n return false;
\n}<\/p>\n

function hasAnyLegalMove(color) {
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].color === color) {
\n if (getLegalMovesFiltered(r, c).length > 0) return true;
\n }
\n }
\n }
\n return false;
\n}<\/p>\n

function drawBoard() {
\n const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
\n grad.addColorStop(0, '#f8f4ec');
\n grad.addColorStop(0.5, '#f0ebe0');
\n grad.addColorStop(1, '#ede6d8');
\n ctx.fillStyle = grad;
\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n

ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 1.5;<\/p>\n

for (let r = 0; r < ROWS; r++) {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X, MARGIN_Y + r * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + r * CELL);
\n ctx.stroke();
\n }<\/p>\n

for (let c = 0; c < COLS; c++) {
\n if (c === 0 || c === COLS – 1) {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + (ROWS – 1) * CELL);
\n ctx.stroke();
\n } else {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + 4 * CELL);
\n ctx.stroke();
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y + 5 * CELL);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + 9 * CELL);
\n ctx.stroke();
\n }
\n }<\/p>\n

ctx.beginPath();
\n ctx.moveTo(MARGIN_X, MARGIN_Y + 4 * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + 4 * CELL);
\n ctx.moveTo(MARGIN_X, MARGIN_Y + 5 * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + 5 * CELL);
\n ctx.stroke();<\/p>\n

ctx.beginPath();
\n ctx.moveTo(MARGIN_X + 3 * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + 5 * CELL, MARGIN_Y + 2 * CELL);
\n ctx.moveTo(MARGIN_X + 5 * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + 3 * CELL, MARGIN_Y + 2 * CELL);
\n ctx.moveTo(MARGIN_X + 3 * CELL, MARGIN_Y + 7 * CELL);
\n ctx.lineTo(MARGIN_X + 5 * CELL, MARGIN_Y + 9 * CELL);
\n ctx.moveTo(MARGIN_X + 5 * CELL, MARGIN_Y + 7 * CELL);
\n ctx.lineTo(MARGIN_X + 3 * CELL, MARGIN_Y + 9 * CELL);
\n ctx.stroke();<\/p>\n

ctx.fillStyle = '#1a1a1a';
\n ctx.font = 'bold 26px "KaiTi", "STKaiti", "\u6977\u4f53", serif';
\n ctx.textAlign = 'center';
\n ctx.textBaseline = 'middle';
\n ctx.fillText('\u695a \u6cb3', MARGIN_X + 1.5 * CELL, MARGIN_Y + 4.5 * CELL);
\n ctx.fillText('\u6f22 \u754c', MARGIN_X + 6.5 * CELL, MARGIN_Y + 4.5 * CELL);<\/p>\n

drawStarPoints();
\n}<\/p>\n

function drawStarPoints() {
\n const points = [
\n [2,1],[2,7],[7,1],[7,7],
\n [3,0],[3,2],[3,4],[3,6],[3,8],
\n [6,0],[6,2],[6,4],[6,6],[6,8]
\n ];
\n for (const [r, c] of points) {
\n drawStar(r, c);
\n }
\n}<\/p>\n

function drawStar(r, c) {
\n const x = MARGIN_X + c * CELL;
\n const y = MARGIN_Y + r * CELL;
\n const s = 6;
\n const g = 5;
\n ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 1.2;
\n const dirs = [];
\n if (c > 0) dirs.push([-1,-1],[-1,1]);
\n if (c < COLS – 1) dirs.push([1,-1],[1,1]);
\n for (const [dx, dy] of dirs) {
\n ctx.beginPath();
\n ctx.moveTo(x + dx * g, y + dy * g);
\n ctx.lineTo(x + dx * (g + s), y + dy * g);
\n ctx.stroke();
\n ctx.beginPath();
\n ctx.moveTo(x + dx * g, y + dy * g);
\n ctx.lineTo(x + dx * g, y + dy * (g + s));
\n ctx.stroke();
\n }
\n}<\/p>\n

function drawPiece(r, c, type, color, highlight) {
\n const x = MARGIN_X + c * CELL;
\n const y = MARGIN_Y + r * CELL;
\n const radius = 26;<\/p>\n

if (highlight) {
\n ctx.beginPath();
\n ctx.arc(x, y, radius + 5, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(192, 57, 43, 0.25)';
\n ctx.fill();
\n }<\/p>\n

const inkGrad = ctx.createRadialGradient(x – 3, y – 3, 2, x, y, radius);
\n if (color === RED) {
\n inkGrad.addColorStop(0, '#e8e0d4');
\n inkGrad.addColorStop(0.6, '#d4c8b4');
\n inkGrad.addColorStop(1, '#b8a88c');
\n } else {
\n inkGrad.addColorStop(0, '#e8e0d4');
\n inkGrad.addColorStop(0.6, '#d0c4b0');
\n inkGrad.addColorStop(1, '#b0a288');
\n }
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.fillStyle = inkGrad;
\n ctx.fill();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 2;
\n ctx.stroke();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, radius – 4, 0, Math.PI * 2);
\n ctx.strokeStyle = color === RED ? '#c0392b' : '#1a1a1a';
\n ctx.lineWidth = 1;
\n ctx.stroke();<\/p>\n

ctx.fillStyle = color === RED ? '#c0392b' : '#1a1a1a';
\n ctx.font = 'bold 28px "KaiTi", "STKaiti", "\u6977\u4f53", serif';
\n ctx.textAlign = 'center';
\n ctx.textBaseline = 'middle';
\n ctx.fillText(PIECES[color][type], x, y + 1);
\n}<\/p>\n

function draw() {
\n drawBoard();<\/p>\n

for (const move of legalMoves) {
\n const x = MARGIN_X + move.c * CELL;
\n const y = MARGIN_Y + move.r * CELL;
\n if (move.capture) {
\n ctx.beginPath();
\n ctx.arc(x, y, 30, 0, Math.PI * 2);
\n ctx.strokeStyle = 'rgba(192, 57, 43, 0.7)';
\n ctx.lineWidth = 2.5;
\n ctx.setLineDash([4, 3]);
\n ctx.stroke();
\n ctx.setLineDash([]);
\n } else {
\n ctx.beginPath();
\n ctx.arc(x, y, 6, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(26, 26, 26, 0.5)';
\n ctx.fill();
\n }
\n }<\/p>\n

for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c]) {
\n const p = board[r][c];
\n drawPiece(r, c, p.type, p.color, selected && selected.r === r && selected.c === c);
\n }
\n }
\n }<\/p>\n

const redKing = findKing(RED);
\n const blackKing = findKing(BLACK);
\n const now = performance.now();<\/p>\n

if (redKing && isKingInCheck(RED)) {
\n if (!checkKingPos || checkKingPos.color !== RED || checkKingPos.r !== redKing.r || checkKingPos.c !== redKing.c) {
\n checkAnimStart = now;
\n checkKingPos = { r: redKing.r, c: redKing.c, color: RED };
\n }
\n const elapsed = now – checkAnimStart;
\n const pulse = 0.5 + 0.5 * Math.sin(elapsed \/ 150);
\n const x = MARGIN_X + redKing.c * CELL;
\n const y = MARGIN_Y + redKing.r * CELL;
\n const r = 32 + pulse * 8;
\n const grad = ctx.createRadialGradient(x, y, 20, x, y, r);
\n grad.addColorStop(0, `rgba(192, 57, 43, ${0.15 + pulse * 0.25})`);
\n grad.addColorStop(0.7, `rgba(192, 57, 43, ${0.3 + pulse * 0.3})`);
\n grad.addColorStop(1, 'rgba(192, 57, 43, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, r, 0, Math.PI * 2);
\n ctx.fillStyle = grad;
\n ctx.fill();
\n ctx.beginPath();
\n ctx.arc(x, y, 34 + pulse * 4, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(192, 57, 43, ${0.6 + pulse * 0.4})`;
\n ctx.lineWidth = 2.5;
\n ctx.stroke();
\n } else {
\n if (checkKingPos && checkKingPos.color === RED) { checkAnimStart = 0; checkKingPos = null; }
\n }<\/p>\n

if (blackKing && isKingInCheck(BLACK)) {
\n if (!checkKingPos || checkKingPos.color !== BLACK || checkKingPos.r !== blackKing.r || checkKingPos.c !== blackKing.c) {
\n checkAnimStart = now;
\n checkKingPos = { r: blackKing.r, c: blackKing.c, color: BLACK };
\n }
\n const elapsed = now – checkAnimStart;
\n const pulse = 0.5 + 0.5 * Math.sin(elapsed \/ 150);
\n const x = MARGIN_X + blackKing.c * CELL;
\n const y = MARGIN_Y + blackKing.r * CELL;
\n const r = 32 + pulse * 8;
\n const grad = ctx.createRadialGradient(x, y, 20, x, y, r);
\n grad.addColorStop(0, `rgba(192, 57, 43, ${0.15 + pulse * 0.25})`);
\n grad.addColorStop(0.7, `rgba(192, 57, 43, ${0.3 + pulse * 0.3})`);
\n grad.addColorStop(1, 'rgba(192, 57, 43, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, r, 0, Math.PI * 2);
\n ctx.fillStyle = grad;
\n ctx.fill();
\n ctx.beginPath();
\n ctx.arc(x, y, 34 + pulse * 4, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(192, 57, 43, ${0.6 + pulse * 0.4})`;
\n ctx.lineWidth = 2.5;
\n ctx.stroke();
\n } else {
\n if (checkKingPos && checkKingPos.color === BLACK) { checkAnimStart = 0; checkKingPos = null; }
\n }
\n}<\/p>\n

function drawEffects() {
\n const now = performance.now();
\n const remaining = [];<\/p>\n

for (const e of effects) {
\n const elapsed = now – e.startTime;
\n const progress = elapsed \/ e.duration;
\n if (progress >= 1) continue;<\/p>\n

if (e.type === 'capture') {
\n drawCaptureEffect(e, progress);
\n remaining.push(e);
\n } else if (e.type === 'checkmate') {
\n drawCheckmateEffect(e, progress);
\n remaining.push(e);
\n } else if (e.type === 'inkTrail') {
\n drawInkTrailEffect(e, progress);
\n remaining.push(e);
\n }
\n }<\/p>\n

effects = remaining;
\n}<\/p>\n

function drawCaptureEffect(e, p) {
\n const x = e.x, y = e.y;
\n const inkColor2 = 'rgba(40, 40, 40,';<\/p>\n

for (let i = 0; i < 3; i++) {
\n const delay = i * 0.08;
\n const pp = Math.max(0, Math.min(1, (p – delay) \/ (1 – delay)));
\n if (pp <= 0) continue;
\n const radius = 10 + pp * 55;
\n const alpha = (1 – pp) * 0.8;
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = inkColor2 + alpha.toFixed(2) + ')';
\n ctx.lineWidth = 3 – pp * 2.5;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 14; i++) {
\n const angle = (i \/ 14) * Math.PI * 2 + p * 0.8;
\n const dist = p * 55;
\n const px = x + Math.cos(angle) * dist;
\n const py = y + Math.sin(angle) * dist;
\n const size = (1 – p) * 5 + 1;
\n ctx.beginPath();
\n ctx.arc(px, py, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor2 + ((1 – p) * 0.7).toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

const coreGrad = ctx.createRadialGradient(x, y, 0, x, y, 30 * (1 – p * 0.6));
\n coreGrad.addColorStop(0, inkColor2 + (0.5 * (1 – p)).toFixed(2) + ')');
\n coreGrad.addColorStop(1, inkColor2 + '0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 30 * (1 – p * 0.6), 0, Math.PI * 2);
\n ctx.fillStyle = coreGrad;
\n ctx.fill();
\n}<\/p>\n

function drawCheckmateEffect(e, p) {
\n const x = e.x, y = e.y;<\/p>\n

ctx.save();
\n ctx.globalAlpha = Math.min(1, p * 3);<\/p>\n

for (let i = 0; i < 5; i++) {
\n const delay = i * 0.06;
\n const pp = Math.max(0, Math.min(1, (p – delay) \/ (1 – delay)));
\n if (pp <= 0) continue;
\n const radius = 15 + pp * 200;
\n const alpha = (1 – pp) * 0.6;
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(30, 30, 30, ${alpha.toFixed(2)})`;
\n ctx.lineWidth = 4 – pp * 3;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 5; i++) {
\n const angle = (i \/ 5) * Math.PI * 2 – Math.PI \/ 2;
\n const dist = Math.min(300, p * 600);
\n ctx.beginPath();
\n ctx.moveTo(x, y);
\n ctx.lineTo(x + Math.cos(angle) * dist, y + Math.sin(angle) * dist);
\n ctx.strokeStyle = `rgba(30, 30, 30, ${(1 – p) * 0.5})`;
\n ctx.lineWidth = 2;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 30; i++) {
\n const angle = (i \/ 30) * Math.PI * 2 + p * 1.5;
\n const dist = p * 80 + Math.sin(i * 3 + p * 10) * 15;
\n const px = x + Math.cos(angle) * dist;
\n const py = y + Math.sin(angle) * dist;
\n const size = (1 – p) * 8 + 2;
\n const gray = 30 + (i % 3) * 25;
\n ctx.beginPath();
\n ctx.arc(px, py, size, 0, Math.PI * 2);
\n ctx.fillStyle = `rgba(${gray}, ${gray}, ${gray}, ${(1 – p) * 0.8})`;
\n ctx.fill();
\n }<\/p>\n

const flashGrad = ctx.createRadialGradient(x, y, 0, x, y, 250 * Math.max(0.3, 1 – p));
\n flashGrad.addColorStop(0, `rgba(255, 255, 255, ${Math.max(0, (0.6 – p * 0.6))})`);
\n flashGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 250, 0, Math.PI * 2);
\n ctx.fillStyle = flashGrad;
\n ctx.fill();<\/p>\n

ctx.restore();
\n}<\/p>\n

function drawInkTrailEffect(e, p) {
\n const x = e.sx + (e.dx – e.sx) * p;
\n const y = e.sy + (e.dy – e.sy) * p;
\n const inkColor = 'rgba(40, 40, 40,';<\/p>\n

for (let i = 0; i < 6; i++) {
\n const pp = Math.max(0, p – i * 0.04);
\n const tx = e.sx + (e.dx – e.sx) * pp;
\n const ty = e.sy + (e.dy – e.sy) * pp;
\n const alpha = (1 – pp) * 0.4;
\n const size = (1 – pp) * 18 + 3;
\n ctx.beginPath();
\n ctx.arc(tx, ty, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, 28, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + '0.6)';
\n ctx.fill();
\n}<\/p>\n

function animate() {
\n draw();
\n drawEffects();<\/p>\n

const redKing = findKing(RED);
\n const blackKing = findKing(BLACK);
\n const redChecked = redKing && isKingInCheck(RED);
\n const blackChecked = blackKing && isKingInCheck(BLACK);<\/p>\n

if (effects.length > 0 || redChecked || blackChecked) {
\n animating = true;
\n requestAnimationFrame(animate);
\n } else {
\n animating = false;
\n }
\n}<\/p>\n

function triggerAnimation() {
\n if (!animating) {
\n animating = true;
\n requestAnimationFrame(animate);
\n }
\n}<\/p>\n

function getXY(r, c) {
\n return { x: MARGIN_X + c * CELL, y: MARGIN_Y + r * CELL };
\n}<\/p>\n

function addCaptureEffect(r, c, color) {
\n const { x, y } = getXY(r, c);
\n effects.push({
\n type: 'capture',
\n x, y,
\n color,
\n startTime: performance.now(),
\n duration: 800
\n });
\n}<\/p>\n

function addInkTrailEffect(sr, sc, dr, dc, color) {
\n const { x: sx, y: sy } = getXY(sr, sc);
\n const { x: dx, y: dy } = getXY(dr, dc);
\n effects.push({
\n type: 'inkTrail',
\n sx, sy, dx, dy,
\n color,
\n startTime: performance.now(),
\n duration: 400
\n });
\n}<\/p>\n

function addCheckmateEffect(r, c) {
\n const { x, y } = getXY(r, c);
\n effects.push({
\n type: 'checkmate',
\n x, y,
\n startTime: performance.now(),
\n duration: 2000
\n });
\n}<\/p>\n

function showFx(id, duration) {
\n const el = document.getElementById(id);
\n el.style.animation = 'none';
\n el.offsetHeight;
\n el.style.animation = `fxFlash ${duration}ms ease-out forwards`;
\n}<\/p>\n

function hideFx(id) {
\n const el = document.getElementById(id);
\n el.style.animation = 'none';
\n el.style.opacity = '0';
\n}<\/p>\n

function triggerShake() {
\n canvasWrap.classList.remove('shake');
\n void canvasWrap.offsetWidth;
\n canvasWrap.classList.add('shake');
\n}<\/p>\n

canvas.addEventListener('click', (e) => {
\n if (gameOver) return;
\n const rect = canvas.getBoundingClientRect();
\n const x = (e.clientX – rect.left) * (canvas.width \/ rect.width);
\n const y = (e.clientY – rect.top) * (canvas.height \/ rect.height);
\n const c = Math.round((x – MARGIN_X) \/ CELL);
\n const r = Math.round((y – MARGIN_Y) \/ CELL);
\n if (!isInBoard(r, c)) return;<\/p>\n

const piece = board[r][c];<\/p>\n

if (selected) {
\n const move = legalMoves.find(m => m.r === r && m.c === c);
\n if (move) {
\n makeMove(selected.r, selected.c, r, c);
\n selected = null;
\n legalMoves = [];
\n checkGameEnd();
\n return;
\n }
\n if (piece && piece.color === currentPlayer) {
\n selected = { r, c };
\n legalMoves = getLegalMovesFiltered(r, c);
\n draw();
\n return;
\n }
\n selected = null;
\n legalMoves = [];
\n draw();
\n return;
\n }<\/p>\n

if (piece && piece.color === currentPlayer) {
\n selected = { r, c };
\n legalMoves = getLegalMovesFiltered(r, c);
\n draw();
\n }
\n});<\/p>\n

function makeMove(fr, fc, tr, tc) {
\n const moved = board[fr][fc];
\n const captured = board[tr][tc];
\n history.push({ fr, fc, tr, tc, moved, captured, player: currentPlayer });<\/p>\n

addInkTrailEffect(fr, fc, tr, tc, moved.color);
\n if (captured) {
\n addCaptureEffect(tr, tc, moved.color);
\n triggerShake();
\n }<\/p>\n

board[tr][tc] = moved;
\n board[fr][fc] = null;
\n if (captured) {
\n if (currentPlayer === RED) capturedByRed.push(captured.type);
\n else capturedByBlack.push(captured.type);
\n }
\n currentPlayer = currentPlayer === RED ? BLACK : RED;
\n updateUI();
\n triggerAnimation();
\n}<\/p>\n

function undo() {
\n if (history.length === 0) return;
\n const last = history.pop();
\n board[last.fr][last.fc] = last.moved;
\n board[last.tr][last.tc] = last.captured;
\n if (last.captured) {
\n if (last.player === RED) capturedByRed.pop();
\n else capturedByBlack.pop();
\n }
\n currentPlayer = last.player;
\n gameOver = false;
\n selected = null;
\n legalMoves = [];
\n effects = [];
\n checkAnimStart = 0;
\n checkKingPos = null;
\n hideFx('fxCheck');
\n hideFx('fxMate');
\n updateUI();
\n draw();
\n}<\/p>\n

function checkGameEnd() {
\n const opp = currentPlayer === RED ? BLACK : RED;
\n const oppKing = findKing(opp);
\n const statusEl = document.getElementById('status');
\n if (!oppKing) {
\n gameOver = true;
\n const winner = currentPlayer === RED ? '\u7ea2\u65b9' : '\u9ed1\u65b9';
\n statusEl.textContent = winner + ' \u83b7\u80dc \u00b7 \u5c06\u519b\u62bd\u5e05';
\n addCheckmateEffect(oppKing?.r ?? 5, oppKing?.c ?? 4);
\n showFx('fxMate', 2000);
\n triggerShake();
\n return;
\n }
\n if (!hasAnyLegalMove(currentPlayer)) {
\n gameOver = true;
\n const inCheck = isKingInCheck(currentPlayer);
\n if (inCheck) {
\n statusEl.textContent = '\u7edd\u6740 \u00b7 ' + (opp === RED ? '\u7ea2\u65b9' : '\u9ed1\u65b9') + ' \u83b7\u80dc';
\n const king = findKing(currentPlayer);
\n if (king) {
\n addCheckmateEffect(king.r, king.c);
\n }
\n showFx('fxMate', 2000);
\n triggerShake();
\n } else {
\n statusEl.textContent = '\u548c\u68cb \u00b7 \u56f0\u6bd9';
\n }
\n return;
\n }
\n if (isKingInCheck(currentPlayer)) {
\n statusEl.textContent = '\u5c06 \u519b';
\n showFx('fxCheck', 1500);
\n } else {
\n statusEl.textContent = '';
\n }
\n}<\/p>\n

function updateUI() {
\n const ind = document.getElementById('turnIndicator');
\n if (gameOver) {
\n ind.textContent = '\u6e38\u620f\u7ed3\u675f';
\n ind.className = 'turn-indicator';
\n } else if (currentPlayer === RED) {
\n ind.textContent = '\u7ea2\u65b9\u8d70\u68cb';
\n ind.className = 'turn-indicator turn-red';
\n } else {
\n ind.textContent = '\u9ed1\u65b9\u8d70\u68cb';
\n ind.className = 'turn-indicator turn-black';
\n }
\n document.getElementById('capturedByRed').textContent = capturedByRed.map(p => PIECES.black[p] || '?').join('');
\n document.getElementById('capturedByBlack').textContent = capturedByBlack.map(p => PIECES.red[p] || '?').join('');
\n}<\/p>\n

document.getElementById('restartBtn').addEventListener('click', initBoard);
\ndocument.getElementById('undoBtn').addEventListener('click', undo);<\/p>\n

initBoard();
\n<\/script>
\n<\/body>
\n<\/html><\/p>\n

\u601d\u7d22\u518d\u4e09\u540e\u51b3\u5b9a\u91cd\u5199\u68cb\u5b50\u79fb\u52a8：<\/p>\n

\u4e8c\u7248(\u65b0\u589e\u4e86\u6c34\u58a8\u7c92\u5b50\u98de\u6e85\u7684\u6548\u679c)：<\/p>\n

<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u4e2d\u56fd\u8c61\u68cb \u00b7 \u6c34\u58a8\u7279\u6548\u7248<\/title>
\n<style>
\n * { box-sizing: border-box; margin: 0; padding: 0; }
\n body {
\n font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;
\n background: #e8e4dc;
\n background-image:
\n radial-gradient(circle at 20% 30%, rgba(180,160,130,0.15) 0%, transparent 50%),
\n radial-gradient(circle at 80% 70%, rgba(160,140,110,0.1) 0%, transparent 50%),
\n radial-gradient(circle at 50% 50%, rgba(200,190,170,0.2) 0%, transparent 70%);
\n min-height: 100vh;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n padding: 30px 20px;
\n color: #2c2c2c;
\n }
\n h1 {
\n font-size: 38px;
\n margin-bottom: 15px;
\n letter-spacing: 12px;
\n color: #1a1a1a;
\n font-weight: normal;
\n text-shadow: 1px 1px 0 rgba(0,0,0,0.08);
\n position: relative;
\n }
\n h1::after {
\n content: '';
\n display: block;
\n width: 60%;
\n height: 2px;
\n margin: 8px auto 0;
\n background: linear-gradient(90deg, transparent, #555, transparent);
\n }
\n .info {
\n display: flex;
\n gap: 30px;
\n margin-bottom: 20px;
\n align-items: center;
\n font-size: 18px;
\n }
\n .turn-indicator {
\n padding: 10px 24px;
\n border-radius: 4px;
\n font-weight: bold;
\n transition: all 0.3s;
\n border: 1px solid #333;
\n background: #f5f1ea;
\n color: #2c2c2c;
\n letter-spacing: 2px;
\n }
\n .turn-red { background: #c0392b; color: #f5f1ea; border-color: #8b2a1e; }
\n .turn-black { background: #2c2c2c; color: #f5f1ea; border-color: #000; }
\n button {
\n background: #f5f1ea;
\n color: #2c2c2c;
\n border: 1px solid #333;
\n padding: 10px 24px;
\n border-radius: 4px;
\n cursor: pointer;
\n font-size: 16px;
\n font-family: inherit;
\n font-weight: bold;
\n letter-spacing: 2px;
\n transition: all 0.3s;
\n }
\n button:hover {
\n background: #2c2c2c;
\n color: #f5f1ea;
\n transform: translateY(-2px);
\n }
\n .canvas-wrap {
\n position: relative;
\n }
\n canvas {
\n background: #f5f1ea;
\n border: 1px solid #333;
\n border-radius: 2px;
\n box-shadow:
\n 0 0 0 8px #f5f1ea,
\n 0 0 0 9px #333,
\n 0 15px 40px rgba(0,0,0,0.3);
\n cursor: pointer;
\n }
\n .status {
\n margin-top: 18px;
\n font-size: 20px;
\n min-height: 28px;
\n color: #c0392b;
\n font-weight: bold;
\n letter-spacing: 3px;
\n }
\n .captured {
\n margin-top: 12px;
\n display: flex;
\n gap: 40px;
\n font-size: 16px;
\n color: #555;
\n }
\n .captured div { min-height: 30px; }
\n .captured span {
\n display: inline-block;
\n margin: 0 3px;
\n font-size: 22px;
\n font-family: "KaiTi", "STKaiti", serif;
\n }
\n .fx-text {
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n transform: translate(-50%, -50%);
\n pointer-events: none;
\n font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;
\n font-weight: bold;
\n opacity: 0;
\n z-index: 10;
\n }
\n .fx-check {
\n font-size: 72px;
\n color: #c0392b;
\n letter-spacing: 20px;
\n text-shadow: 0 0 20px rgba(192, 57, 43, 0.6);
\n }
\n .fx-mate {
\n font-size: 96px;
\n color: #8b0000;
\n letter-spacing: 30px;
\n text-shadow: 0 0 30px rgba(139, 0, 0, 0.8), 0 0 60px rgba(192, 57, 43, 0.5);
\n }
\n @keyframes fxFlash {
\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
\n 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
\n 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
\n 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
\n }
\n @keyframes fxShake {
\n 0%, 100% { transform: translate(0, 0); }
\n 10% { transform: translate(-6px, -4px); }
\n 20% { transform: translate(5px, 3px); }
\n 30% { transform: translate(-4px, 5px); }
\n 40% { transform: translate(6px, -3px); }
\n 50% { transform: translate(-5px, 4px); }
\n 60% { transform: translate(3px, -5px); }
\n 70% { transform: translate(-3px, 3px); }
\n 80% { transform: translate(4px, -2px); }
\n 90% { transform: translate(-2px, 2px); }
\n }
\n .shake { animation: fxShake 0.5s ease-in-out; }
\n<\/style>
\n<\/head>
\n<body>
\n <h1>\u4e2d \u570b \u8c61 \u68cb<\/h1>
\n <div class="info">
\n <div class="turn-indicator" id="turnIndicator">\u7ea2\u65b9\u8d70\u68cb<\/div>
\n <button id="restartBtn">\u91cd \u65b0 \u5f00 \u59cb<\/button>
\n <button id="undoBtn">\u6094 \u68cb<\/button>
\n <\/div>
\n <div class="canvas-wrap" id="canvasWrap">
\n <canvas id="board" width="540" height="600"><\/canvas>
\n <div class="fx-text fx-check" id="fxCheck">\u5c06 \u8ecd<\/div>
\n <div class="fx-text fx-mate" id="fxMate">\u7edd \u6bba<\/div>
\n <\/div>
\n <div class="status" id="status"><\/div>
\n <div class="captured">
\n <div>\u7ea2\u65b9\u88ab\u5403 \u00b7 <span id="capturedByRed"><\/span><\/div>
\n <div>\u9ed1\u65b9\u88ab\u5403 \u00b7 <span id="capturedByBlack"><\/span><\/div>
\n <\/div><\/p>\n

<script>
\nconst CELL = 60;
\nconst MARGIN_X = 30;
\nconst MARGIN_Y = 30;
\nconst COLS = 9;
\nconst ROWS = 10;<\/p>\n

const canvas = document.getElementById('board');
\nconst ctx = canvas.getContext('2d');
\nconst canvasWrap = document.getElementById('canvasWrap');<\/p>\n

const RED = 'red';
\nconst BLACK = 'black';<\/p>\n

const PIECES = {
\n red: {
\n king: '\u5e25', advisor: '\u4ed5', elephant: '\u76f8', horse: '\u508c',
\n chariot: '\u4fe5', cannon: '\u70ae', pawn: '\u5175'
\n },
\n black: {
\n king: '\u5c07', advisor: '\u58eb', elephant: '\u8c61', horse: '\u99ac',
\n chariot: '\u8eca', cannon: '\u7832', pawn: '\u5352'
\n }
\n};<\/p>\n

let board = [];
\nlet currentPlayer = RED;
\nlet selected = null;
\nlet legalMoves = [];
\nlet gameOver = false;
\nlet history = [];
\nlet capturedByRed = [];
\nlet capturedByBlack = [];<\/p>\n

let effects = [];
\nlet animating = false;
\nlet checkAnimStart = 0;
\nlet checkKingPos = null;
\nlet checkmateAnimStart = 0;<\/p>\n

function P(type, color) {
\n return { type, color };
\n}<\/p>\n

function initBoard() {
\n board = [
\n [P('chariot',BLACK),P('horse',BLACK),P('elephant',BLACK),P('advisor',BLACK),P('king',BLACK),P('advisor',BLACK),P('elephant',BLACK),P('horse',BLACK),P('chariot',BLACK)],
\n [null,null,null,null,null,null,null,null,null],
\n [null,P('cannon',BLACK),null,null,null,null,null,P('cannon',BLACK),null],
\n [P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK)],
\n [null,null,null,null,null,null,null,null,null],
\n [null,null,null,null,null,null,null,null,null],
\n [P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED)],
\n [null,P('cannon',RED),null,null,null,null,null,P('cannon',RED),null],
\n [null,null,null,null,null,null,null,null,null],
\n [P('chariot',RED),P('horse',RED),P('elephant',RED),P('advisor',RED),P('king',RED),P('advisor',RED),P('elephant',RED),P('horse',RED),P('chariot',RED)]
\n ];
\n currentPlayer = RED;
\n selected = null;
\n legalMoves = [];
\n gameOver = false;
\n history = [];
\n capturedByRed = [];
\n capturedByBlack = [];
\n effects = [];
\n checkAnimStart = 0;
\n checkKingPos = null;
\n checkmateAnimStart = 0;
\n hideFx('fxCheck');
\n hideFx('fxMate');
\n updateUI();
\n draw();
\n}<\/p>\n

function isInBoard(r, c) {
\n return r >= 0 && r < ROWS && c >= 0 && c < COLS;
\n}<\/p>\n

function inPalace(r, c, color) {
\n if (c < 3 || c > 5) return false;
\n if (color === RED) return r >= 7 && r <= 9;
\n return r >= 0 && r <= 2;
\n}<\/p>\n

function onOwnSide(r, color) {
\n if (color === RED) return r >= 5;
\n return r <= 4;
\n}<\/p>\n

function getLegalMoves(r, c) {
\n const piece = board[r][c];
\n if (!piece) return [];
\n const color = piece.color;
\n const type = piece.type;
\n const moves = [];
\n const addMove = (nr, nc) => {
\n if (!isInBoard(nr, nc)) return;
\n const target = board[nr][nc];
\n if (target && target.color === color) return;
\n moves.push({ r: nr, c: nc, capture: !!target });
\n };<\/p>\n

switch (type) {
\n case 'king': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n if (inPalace(nr, nc, color)) addMove(nr, nc);
\n }
\n break;
\n }
\n case 'advisor': {
\n const dirs = [[-1,-1],[-1,1],[1,-1],[1,1]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n if (inPalace(nr, nc, color)) addMove(nr, nc);
\n }
\n break;
\n }
\n case 'elephant': {
\n const dirs = [[-2,-2],[-2,2],[2,-2],[2,2]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n const mr = r + dr\/2, mc = c + dc\/2;
\n if (!isInBoard(nr, nc)) continue;
\n if (!onOwnSide(nr, color)) continue;
\n if (board[mr][mc]) continue;
\n addMove(nr, nc);
\n }
\n break;
\n }
\n case 'horse': {
\n const hm = [
\n {dr:-2,dc:-1,br:-1,bc:0}, {dr:-2,dc:1,br:-1,bc:0},
\n {dr:2,dc:-1,br:1,bc:0}, {dr:2,dc:1,br:1,bc:0},
\n {dr:-1,dc:-2,br:0,bc:-1}, {dr:1,dc:-2,br:0,bc:-1},
\n {dr:-1,dc:2,br:0,bc:1}, {dr:1,dc:2,br:0,bc:1}
\n ];
\n for (const m of hm) {
\n const nr = r + m.dr, nc = c + m.dc;
\n const lr = r + m.br, lc = c + m.bc;
\n if (!isInBoard(nr, nc)) continue;
\n if (board[lr][lc]) continue;
\n addMove(nr, nc);
\n }
\n break;
\n }
\n case 'chariot': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n let nr = r + dr, nc = c + dc;
\n while (isInBoard(nr, nc)) {
\n const target = board[nr][nc];
\n if (!target) {
\n moves.push({ r: nr, c: nc, capture: false });
\n } else {
\n if (target.color !== color) {
\n moves.push({ r: nr, c: nc, capture: true });
\n }
\n break;
\n }
\n nr += dr; nc += dc;
\n }
\n }
\n break;
\n }
\n case 'cannon': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n let nr = r + dr, nc = c + dc;
\n let jumped = false;
\n while (isInBoard(nr, nc)) {
\n const target = board[nr][nc];
\n if (!jumped) {
\n if (!target) {
\n moves.push({ r: nr, c: nc, capture: false });
\n } else {
\n jumped = true;
\n }
\n } else {
\n if (target) {
\n if (target.color !== color) {
\n moves.push({ r: nr, c: nc, capture: true });
\n }
\n break;
\n }
\n }
\n nr += dr; nc += dc;
\n }
\n }
\n break;
\n }
\n case 'pawn': {
\n const forward = color === RED ? -1 : 1;
\n const nr = r + forward;
\n if (isInBoard(nr, c)) addMove(nr, c);
\n if (!onOwnSide(r, color)) {
\n if (isInBoard(r, c – 1)) addMove(r, c – 1);
\n if (isInBoard(r, c + 1)) addMove(r, c + 1);
\n }
\n break;
\n }
\n }
\n return moves;
\n}<\/p>\n

function findKing(color) {
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].type === 'king' && board[r][c].color === color) return { r, c };
\n }
\n }
\n return null;
\n}<\/p>\n

function kingsFacing() {
\n const rk = findKing(RED);
\n const bk = findKing(BLACK);
\n if (!rk || !bk || rk.c !== bk.c) return false;
\n const col = rk.c;
\n const minR = Math.min(rk.r, bk.r);
\n const maxR = Math.max(rk.r, bk.r);
\n for (let r = minR + 1; r < maxR; r++) {
\n if (board[r][col]) return false;
\n }
\n return true;
\n}<\/p>\n

function getLegalMovesFiltered(r, c) {
\n const moves = getLegalMoves(r, c);
\n return moves.filter(m => {
\n const captured = board[m.r][m.c];
\n const moving = board[r][c];
\n board[m.r][m.c] = moving;
\n board[r][c] = null;
\n const inCheck = isKingInCheck(moving.color) || kingsFacing();
\n board[r][c] = moving;
\n board[m.r][m.c] = captured;
\n return !inCheck;
\n });
\n}<\/p>\n

function isKingInCheck(color) {
\n const king = findKing(color);
\n if (!king) return true;
\n const oppColor = color === RED ? BLACK : RED;
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].color === oppColor) {
\n const moves = getLegalMoves(r, c);
\n if (moves.some(m => m.r === king.r && m.c === king.c)) return true;
\n }
\n }
\n }
\n return false;
\n}<\/p>\n

function hasAnyLegalMove(color) {
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].color === color) {
\n if (getLegalMovesFiltered(r, c).length > 0) return true;
\n }
\n }
\n }
\n return false;
\n}<\/p>\n

function drawBoard() {
\n const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
\n grad.addColorStop(0, '#f8f4ec');
\n grad.addColorStop(0.5, '#f0ebe0');
\n grad.addColorStop(1, '#ede6d8');
\n ctx.fillStyle = grad;
\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n

ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 1.5;<\/p>\n

for (let r = 0; r < ROWS; r++) {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X, MARGIN_Y + r * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + r * CELL);
\n ctx.stroke();
\n }<\/p>\n

for (let c = 0; c < COLS; c++) {
\n if (c === 0 || c === COLS – 1) {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + (ROWS – 1) * CELL);
\n ctx.stroke();
\n } else {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + 4 * CELL);
\n ctx.stroke();
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y + 5 * CELL);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + 9 * CELL);
\n ctx.stroke();
\n }
\n }<\/p>\n

ctx.beginPath();
\n ctx.moveTo(MARGIN_X, MARGIN_Y + 4 * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + 4 * CELL);
\n ctx.moveTo(MARGIN_X, MARGIN_Y + 5 * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + 5 * CELL);
\n ctx.stroke();<\/p>\n

ctx.beginPath();
\n ctx.moveTo(MARGIN_X + 3 * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + 5 * CELL, MARGIN_Y + 2 * CELL);
\n ctx.moveTo(MARGIN_X + 5 * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + 3 * CELL, MARGIN_Y + 2 * CELL);
\n ctx.moveTo(MARGIN_X + 3 * CELL, MARGIN_Y + 7 * CELL);
\n ctx.lineTo(MARGIN_X + 5 * CELL, MARGIN_Y + 9 * CELL);
\n ctx.moveTo(MARGIN_X + 5 * CELL, MARGIN_Y + 7 * CELL);
\n ctx.lineTo(MARGIN_X + 3 * CELL, MARGIN_Y + 9 * CELL);
\n ctx.stroke();<\/p>\n

ctx.fillStyle = '#1a1a1a';
\n ctx.font = 'bold 26px "KaiTi", "STKaiti", "\u6977\u4f53", serif';
\n ctx.textAlign = 'center';
\n ctx.textBaseline = 'middle';
\n ctx.fillText('\u695a \u6cb3', MARGIN_X + 1.5 * CELL, MARGIN_Y + 4.5 * CELL);
\n ctx.fillText('\u6f22 \u754c', MARGIN_X + 6.5 * CELL, MARGIN_Y + 4.5 * CELL);<\/p>\n

drawStarPoints();
\n}<\/p>\n

function drawStarPoints() {
\n const points = [
\n [2,1],[2,7],[7,1],[7,7],
\n [3,0],[3,2],[3,4],[3,6],[3,8],
\n [6,0],[6,2],[6,4],[6,6],[6,8]
\n ];
\n for (const [r, c] of points) {
\n drawStar(r, c);
\n }
\n}<\/p>\n

function drawStar(r, c) {
\n const x = MARGIN_X + c * CELL;
\n const y = MARGIN_Y + r * CELL;
\n const s = 6;
\n const g = 5;
\n ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 1.2;
\n const dirs = [];
\n if (c > 0) dirs.push([-1,-1],[-1,1]);
\n if (c < COLS – 1) dirs.push([1,-1],[1,1]);
\n for (const [dx, dy] of dirs) {
\n ctx.beginPath();
\n ctx.moveTo(x + dx * g, y + dy * g);
\n ctx.lineTo(x + dx * (g + s), y + dy * g);
\n ctx.stroke();
\n ctx.beginPath();
\n ctx.moveTo(x + dx * g, y + dy * g);
\n ctx.lineTo(x + dx * g, y + dy * (g + s));
\n ctx.stroke();
\n }
\n}<\/p>\n

function drawPiece(r, c, type, color, highlight) {
\n const x = MARGIN_X + c * CELL;
\n const y = MARGIN_Y + r * CELL;
\n const radius = 26;<\/p>\n

if (highlight) {
\n ctx.beginPath();
\n ctx.arc(x, y, radius + 5, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(192, 57, 43, 0.25)';
\n ctx.fill();
\n }<\/p>\n

const inkGrad = ctx.createRadialGradient(x – 3, y – 3, 2, x, y, radius);
\n if (color === RED) {
\n inkGrad.addColorStop(0, '#e8e0d4');
\n inkGrad.addColorStop(0.6, '#d4c8b4');
\n inkGrad.addColorStop(1, '#b8a88c');
\n } else {
\n inkGrad.addColorStop(0, '#e8e0d4');
\n inkGrad.addColorStop(0.6, '#d0c4b0');
\n inkGrad.addColorStop(1, '#b0a288');
\n }
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.fillStyle = inkGrad;
\n ctx.fill();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 2;
\n ctx.stroke();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, radius – 4, 0, Math.PI * 2);
\n ctx.strokeStyle = color === RED ? '#c0392b' : '#1a1a1a';
\n ctx.lineWidth = 1;
\n ctx.stroke();<\/p>\n

ctx.fillStyle = color === RED ? '#c0392b' : '#1a1a1a';
\n ctx.font = 'bold 28px "KaiTi", "STKaiti", "\u6977\u4f53", serif';
\n ctx.textAlign = 'center';
\n ctx.textBaseline = 'middle';
\n ctx.fillText(PIECES[color][type], x, y + 1);
\n}<\/p>\n

function draw() {
\n drawBoard();<\/p>\n

for (const move of legalMoves) {
\n const x = MARGIN_X + move.c * CELL;
\n const y = MARGIN_Y + move.r * CELL;
\n if (move.capture) {
\n ctx.beginPath();
\n ctx.arc(x, y, 30, 0, Math.PI * 2);
\n ctx.strokeStyle = 'rgba(192, 57, 43, 0.7)';
\n ctx.lineWidth = 2.5;
\n ctx.setLineDash([4, 3]);
\n ctx.stroke();
\n ctx.setLineDash([]);
\n } else {
\n ctx.beginPath();
\n ctx.arc(x, y, 6, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(26, 26, 26, 0.5)';
\n ctx.fill();
\n }
\n }<\/p>\n

for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c]) {
\n const p = board[r][c];
\n drawPiece(r, c, p.type, p.color, selected && selected.r === r && selected.c === c);
\n }
\n }
\n }<\/p>\n

const redKing = findKing(RED);
\n const blackKing = findKing(BLACK);
\n const now = performance.now();<\/p>\n

if (redKing && isKingInCheck(RED)) {
\n if (!checkKingPos || checkKingPos.color !== RED || checkKingPos.r !== redKing.r || checkKingPos.c !== redKing.c) {
\n checkAnimStart = now;
\n checkKingPos = { r: redKing.r, c: redKing.c, color: RED };
\n }
\n const elapsed = now – checkAnimStart;
\n const pulse = 0.5 + 0.5 * Math.sin(elapsed \/ 150);
\n const x = MARGIN_X + redKing.c * CELL;
\n const y = MARGIN_Y + redKing.r * CELL;
\n const r = 32 + pulse * 8;
\n const grad = ctx.createRadialGradient(x, y, 20, x, y, r);
\n grad.addColorStop(0, `rgba(192, 57, 43, ${0.15 + pulse * 0.25})`);
\n grad.addColorStop(0.7, `rgba(192, 57, 43, ${0.3 + pulse * 0.3})`);
\n grad.addColorStop(1, 'rgba(192, 57, 43, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, r, 0, Math.PI * 2);
\n ctx.fillStyle = grad;
\n ctx.fill();
\n ctx.beginPath();
\n ctx.arc(x, y, 34 + pulse * 4, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(192, 57, 43, ${0.6 + pulse * 0.4})`;
\n ctx.lineWidth = 2.5;
\n ctx.stroke();
\n } else {
\n if (checkKingPos && checkKingPos.color === RED) { checkAnimStart = 0; checkKingPos = null; }
\n }<\/p>\n

if (blackKing && isKingInCheck(BLACK)) {
\n if (!checkKingPos || checkKingPos.color !== BLACK || checkKingPos.r !== blackKing.r || checkKingPos.c !== blackKing.c) {
\n checkAnimStart = now;
\n checkKingPos = { r: blackKing.r, c: blackKing.c, color: BLACK };
\n }
\n const elapsed = now – checkAnimStart;
\n const pulse = 0.5 + 0.5 * Math.sin(elapsed \/ 150);
\n const x = MARGIN_X + blackKing.c * CELL;
\n const y = MARGIN_Y + blackKing.r * CELL;
\n const r = 32 + pulse * 8;
\n const grad = ctx.createRadialGradient(x, y, 20, x, y, r);
\n grad.addColorStop(0, `rgba(192, 57, 43, ${0.15 + pulse * 0.25})`);
\n grad.addColorStop(0.7, `rgba(192, 57, 43, ${0.3 + pulse * 0.3})`);
\n grad.addColorStop(1, 'rgba(192, 57, 43, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, r, 0, Math.PI * 2);
\n ctx.fillStyle = grad;
\n ctx.fill();
\n ctx.beginPath();
\n ctx.arc(x, y, 34 + pulse * 4, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(192, 57, 43, ${0.6 + pulse * 0.4})`;
\n ctx.lineWidth = 2.5;
\n ctx.stroke();
\n } else {
\n if (checkKingPos && checkKingPos.color === BLACK) { checkAnimStart = 0; checkKingPos = null; }
\n }
\n}<\/p>\n

function drawEffects() {
\n const now = performance.now();
\n const remaining = [];<\/p>\n

for (const e of effects) {
\n const elapsed = now – e.startTime;
\n const progress = elapsed \/ e.duration;
\n if (progress >= 1) continue;<\/p>\n

if (e.type === 'capture') {
\n drawCaptureEffect(e, progress);
\n remaining.push(e);
\n } else if (e.type === 'checkmate') {
\n drawCheckmateEffect(e, progress);
\n remaining.push(e);
\n } else if (e.type === 'inkTrail') {
\n drawInkTrailEffect(e, progress);
\n remaining.push(e);
\n }
\n }<\/p>\n

effects = remaining;
\n}<\/p>\n

function drawCaptureEffect(e, p) {
\n const x = e.x, y = e.y;
\n const inkColor2 = 'rgba(40, 40, 40,';<\/p>\n

for (let i = 0; i < 3; i++) {
\n const delay = i * 0.08;
\n const pp = Math.max(0, Math.min(1, (p – delay) \/ (1 – delay)));
\n if (pp <= 0) continue;
\n const radius = 10 + pp * 55;
\n const alpha = (1 – pp) * 0.8;
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = inkColor2 + alpha.toFixed(2) + ')';
\n ctx.lineWidth = 3 – pp * 2.5;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 14; i++) {
\n const angle = (i \/ 14) * Math.PI * 2 + p * 0.8;
\n const dist = p * 55;
\n const px = x + Math.cos(angle) * dist;
\n const py = y + Math.sin(angle) * dist;
\n const size = (1 – p) * 5 + 1;
\n ctx.beginPath();
\n ctx.arc(px, py, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor2 + ((1 – p) * 0.7).toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

const coreGrad = ctx.createRadialGradient(x, y, 0, x, y, 30 * (1 – p * 0.6));
\n coreGrad.addColorStop(0, inkColor2 + (0.5 * (1 – p)).toFixed(2) + ')');
\n coreGrad.addColorStop(1, inkColor2 + '0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 30 * (1 – p * 0.6), 0, Math.PI * 2);
\n ctx.fillStyle = coreGrad;
\n ctx.fill();
\n}<\/p>\n

function drawCheckmateEffect(e, p) {
\n const x = e.x, y = e.y;<\/p>\n

ctx.save();
\n ctx.globalAlpha = Math.min(1, p * 3);<\/p>\n

for (let i = 0; i < 5; i++) {
\n const delay = i * 0.06;
\n const pp = Math.max(0, Math.min(1, (p – delay) \/ (1 – delay)));
\n if (pp <= 0) continue;
\n const radius = 15 + pp * 200;
\n const alpha = (1 – pp) * 0.6;
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(30, 30, 30, ${alpha.toFixed(2)})`;
\n ctx.lineWidth = 4 – pp * 3;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 5; i++) {
\n const angle = (i \/ 5) * Math.PI * 2 – Math.PI \/ 2;
\n const dist = Math.min(300, p * 600);
\n ctx.beginPath();
\n ctx.moveTo(x, y);
\n ctx.lineTo(x + Math.cos(angle) * dist, y + Math.sin(angle) * dist);
\n ctx.strokeStyle = `rgba(30, 30, 30, ${(1 – p) * 0.5})`;
\n ctx.lineWidth = 2;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 30; i++) {
\n const angle = (i \/ 30) * Math.PI * 2 + p * 1.5;
\n const dist = p * 80 + Math.sin(i * 3 + p * 10) * 15;
\n const px = x + Math.cos(angle) * dist;
\n const py = y + Math.sin(angle) * dist;
\n const size = (1 – p) * 8 + 2;
\n const gray = 30 + (i % 3) * 25;
\n ctx.beginPath();
\n ctx.arc(px, py, size, 0, Math.PI * 2);
\n ctx.fillStyle = `rgba(${gray}, ${gray}, ${gray}, ${(1 – p) * 0.8})`;
\n ctx.fill();
\n }<\/p>\n

const flashGrad = ctx.createRadialGradient(x, y, 0, x, y, 250 * Math.max(0.3, 1 – p));
\n flashGrad.addColorStop(0, `rgba(255, 255, 255, ${Math.max(0, (0.6 – p * 0.6))})`);
\n flashGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 250, 0, Math.PI * 2);
\n ctx.fillStyle = flashGrad;
\n ctx.fill();<\/p>\n

ctx.restore();
\n}<\/p>\n

function drawInkTrailEffect(e, p) {
\n const x = e.sx + (e.dx – e.sx) * p;
\n const y = e.sy + (e.dy – e.sy) * p;
\n const inkColor = 'rgba(40, 40, 40,';
\n const dx = e.dx – e.sx;
\n const dy = e.dy – e.sy;
\n const angle = Math.atan2(dy, dx);
\n const splatters = e.splatters;<\/p>\n

for (let i = 0; i < 8; i++) {
\n const pp = Math.max(0, p – i * 0.035);
\n const tx = e.sx + dx * pp;
\n const ty = e.sy + dy * pp;
\n const alpha = (1 – pp) * 0.5;
\n const size = (1 – pp) * 20 + 4;
\n ctx.beginPath();
\n ctx.arc(tx, ty, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

for (let i = 0; i < 5; i++) {
\n const pp = Math.max(0, p – i * 0.06);
\n const tx = e.sx + dx * pp;
\n const ty = e.sy + dy * pp;
\n const spread = 8 * (1 – pp);
\n const perpAngle = angle + Math.PI \/ 2;
\n const offset = (Math.sin(i * 1.7 + pp * 5) * spread);
\n const ox = tx + Math.cos(perpAngle) * offset;
\n const oy = ty + Math.sin(perpAngle) * offset;
\n const size = (1 – pp) * 10 + 2;
\n const alpha = (1 – pp) * 0.35;
\n ctx.beginPath();
\n ctx.arc(ox, oy, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

for (let i = 0; i < splatters.length; i++) {
\n const sp = splatters[i];
\n const progress = (p – sp.delay) \/ (1 – sp.delay);
\n if (progress <= 0 || progress > 1) continue;
\n const sx = x + Math.cos(sp.angle) * (progress * 35 + 5) + sp.offsetX * progress;
\n const sy = y + Math.sin(sp.angle) * (progress * 35 + 5) + sp.offsetY * progress;
\n const size = (1 – progress) * sp.maxSize + sp.minSize;
\n const alpha = (1 – progress) * sp.maxAlpha;
\n ctx.beginPath();
\n ctx.arc(sx, sy, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

for (let i = 0; i < e.clusters.length; i++) {
\n const cl = e.clusters[i];
\n const progress = (p – cl.delay) \/ (1 – cl.delay);
\n if (progress <= 0 || progress > 1) continue;
\n const cx = x + Math.cos(cl.angle) * (progress * 40);
\n const cy = y + Math.sin(cl.angle) * (progress * 40);
\n const size = (1 – progress) * cl.maxSize + cl.minSize;
\n const alpha = (1 – progress) * cl.maxAlpha;
\n ctx.beginPath();
\n ctx.arc(cx, cy, size, 0, Math.PI * 2);
\n ctx.fillStyle = `rgba(${cl.gray}, ${cl.gray}, ${cl.gray}, ${alpha.toFixed(2)})`;
\n ctx.fill();
\n }<\/p>\n

const headGrad = ctx.createRadialGradient(x, y, 0, x, y, 30);
\n headGrad.addColorStop(0, inkColor + '0.7)');
\n headGrad.addColorStop(0.6, inkColor + '0.4)');
\n headGrad.addColorStop(1, inkColor + '0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 30, 0, Math.PI * 2);
\n ctx.fillStyle = headGrad;
\n ctx.fill();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, 22, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + '0.55)';
\n ctx.fill();
\n}<\/p>\n

function animate() {
\n draw();
\n drawEffects();<\/p>\n

const redKing = findKing(RED);
\n const blackKing = findKing(BLACK);
\n const redChecked = redKing && isKingInCheck(RED);
\n const blackChecked = blackKing && isKingInCheck(BLACK);<\/p>\n

if (effects.length > 0 || redChecked || blackChecked) {
\n animating = true;
\n requestAnimationFrame(animate);
\n } else {
\n animating = false;
\n }
\n}<\/p>\n

function triggerAnimation() {
\n if (!animating) {
\n animating = true;
\n requestAnimationFrame(animate);
\n }
\n}<\/p>\n

function getXY(r, c) {
\n return { x: MARGIN_X + c * CELL, y: MARGIN_Y + r * CELL };
\n}<\/p>\n

function addCaptureEffect(r, c, color) {
\n const { x, y } = getXY(r, c);
\n effects.push({
\n type: 'capture',
\n x, y,
\n color,
\n startTime: performance.now(),
\n duration: 800
\n });
\n}<\/p>\n

function addInkTrailEffect(sr, sc, dr, dc, color) {
\n const { x: sx, y: sy } = getXY(sr, sc);
\n const { x: dx, y: dy } = getXY(dr, dc);
\n const moveAngle = Math.atan2(dy – sy, dx – sx);<\/p>\n

const splatters = [];
\n for (let i = 0; i < 12; i++) {
\n const spreadAngle = moveAngle + Math.PI + (Math.random() – 0.5) * 1.8;
\n splatters.push({
\n angle: spreadAngle,
\n delay: i * 0.07,
\n offsetX: (Math.random() – 0.5) * 10,
\n offsetY: (Math.random() – 0.5) * 10,
\n maxSize: 6 + Math.random() * 5,
\n minSize: 1 + Math.random() * 1.5,
\n maxAlpha: 0.5 + Math.random() * 0.3
\n });
\n }<\/p>\n

const clusters = [];
\n for (let i = 0; i < 4; i++) {
\n const clusterAngle = moveAngle + Math.PI + (i \/ 4) * 0.8 – 0.4 + (Math.random() – 0.5) * 0.3;
\n clusters.push({
\n angle: clusterAngle,
\n delay: i * 0.15,
\n gray: 25 + Math.floor(Math.random() * 30),
\n maxSize: 4 + Math.random() * 4,
\n minSize: 0.8 + Math.random() * 1.2,
\n maxAlpha: 0.4 + Math.random() * 0.3
\n });
\n }<\/p>\n

effects.push({
\n type: 'inkTrail',
\n sx, sy, dx, dy,
\n color,
\n splatters,
\n clusters,
\n startTime: performance.now(),
\n duration: 400
\n });
\n}<\/p>\n

function addCheckmateEffect(r, c) {
\n const { x, y } = getXY(r, c);
\n effects.push({
\n type: 'checkmate',
\n x, y,
\n startTime: performance.now(),
\n duration: 2000
\n });
\n}<\/p>\n

function showFx(id, duration) {
\n const el = document.getElementById(id);
\n el.style.animation = 'none';
\n el.offsetHeight;
\n el.style.animation = `fxFlash ${duration}ms ease-out forwards`;
\n}<\/p>\n

function hideFx(id) {
\n const el = document.getElementById(id);
\n el.style.animation = 'none';
\n el.style.opacity = '0';
\n}<\/p>\n

function triggerShake() {
\n canvasWrap.classList.remove('shake');
\n void canvasWrap.offsetWidth;
\n canvasWrap.classList.add('shake');
\n}<\/p>\n

canvas.addEventListener('click', (e) => {
\n if (gameOver) return;
\n const rect = canvas.getBoundingClientRect();
\n const x = (e.clientX – rect.left) * (canvas.width \/ rect.width);
\n const y = (e.clientY – rect.top) * (canvas.height \/ rect.height);
\n const c = Math.round((x – MARGIN_X) \/ CELL);
\n const r = Math.round((y – MARGIN_Y) \/ CELL);
\n if (!isInBoard(r, c)) return;<\/p>\n

const piece = board[r][c];<\/p>\n

if (selected) {
\n const move = legalMoves.find(m => m.r === r && m.c === c);
\n if (move) {
\n makeMove(selected.r, selected.c, r, c);
\n selected = null;
\n legalMoves = [];
\n checkGameEnd();
\n return;
\n }
\n if (piece && piece.color === currentPlayer) {
\n selected = { r, c };
\n legalMoves = getLegalMovesFiltered(r, c);
\n draw();
\n return;
\n }
\n selected = null;
\n legalMoves = [];
\n draw();
\n return;
\n }<\/p>\n

if (piece && piece.color === currentPlayer) {
\n selected = { r, c };
\n legalMoves = getLegalMovesFiltered(r, c);
\n draw();
\n }
\n});<\/p>\n

function makeMove(fr, fc, tr, tc) {
\n const moved = board[fr][fc];
\n const captured = board[tr][tc];
\n history.push({ fr, fc, tr, tc, moved, captured, player: currentPlayer });<\/p>\n

addInkTrailEffect(fr, fc, tr, tc, moved.color);
\n if (captured) {
\n addCaptureEffect(tr, tc, moved.color);
\n triggerShake();
\n }<\/p>\n

board[tr][tc] = moved;
\n board[fr][fc] = null;
\n if (captured) {
\n if (currentPlayer === RED) capturedByRed.push(captured.type);
\n else capturedByBlack.push(captured.type);
\n }
\n currentPlayer = currentPlayer === RED ? BLACK : RED;
\n updateUI();
\n triggerAnimation();
\n}<\/p>\n

function undo() {
\n if (history.length === 0) return;
\n const last = history.pop();
\n board[last.fr][last.fc] = last.moved;
\n board[last.tr][last.tc] = last.captured;
\n if (last.captured) {
\n if (last.player === RED) capturedByRed.pop();
\n else capturedByBlack.pop();
\n }
\n currentPlayer = last.player;
\n gameOver = false;
\n selected = null;
\n legalMoves = [];
\n effects = [];
\n checkAnimStart = 0;
\n checkKingPos = null;
\n hideFx('fxCheck');
\n hideFx('fxMate');
\n updateUI();
\n draw();
\n}<\/p>\n

function checkGameEnd() {
\n const opp = currentPlayer === RED ? BLACK : RED;
\n const oppKing = findKing(opp);
\n const statusEl = document.getElementById('status');
\n if (!oppKing) {
\n gameOver = true;
\n const winner = currentPlayer === RED ? '\u7ea2\u65b9' : '\u9ed1\u65b9';
\n statusEl.textContent = winner + ' \u83b7\u80dc \u00b7 \u5c06\u519b\u62bd\u5e05';
\n addCheckmateEffect(oppKing?.r ?? 5, oppKing?.c ?? 4);
\n showFx('fxMate', 2000);
\n triggerShake();
\n return;
\n }
\n if (!hasAnyLegalMove(currentPlayer)) {
\n gameOver = true;
\n const inCheck = isKingInCheck(currentPlayer);
\n if (inCheck) {
\n statusEl.textContent = '\u7edd\u6740 \u00b7 ' + (opp === RED ? '\u7ea2\u65b9' : '\u9ed1\u65b9') + ' \u83b7\u80dc';
\n const king = findKing(currentPlayer);
\n if (king) {
\n addCheckmateEffect(king.r, king.c);
\n }
\n showFx('fxMate', 2000);
\n triggerShake();
\n } else {
\n statusEl.textContent = '\u548c\u68cb \u00b7 \u56f0\u6bd9';
\n }
\n return;
\n }
\n if (isKingInCheck(currentPlayer)) {
\n statusEl.textContent = '\u5c06 \u519b';
\n showFx('fxCheck', 1500);
\n } else {
\n statusEl.textContent = '';
\n }
\n}<\/p>\n

function updateUI() {
\n const ind = document.getElementById('turnIndicator');
\n if (gameOver) {
\n ind.textContent = '\u6e38\u620f\u7ed3\u675f';
\n ind.className = 'turn-indicator';
\n } else if (currentPlayer === RED) {
\n ind.textContent = '\u7ea2\u65b9\u8d70\u68cb';
\n ind.className = 'turn-indicator turn-red';
\n } else {
\n ind.textContent = '\u9ed1\u65b9\u8d70\u68cb';
\n ind.className = 'turn-indicator turn-black';
\n }
\n document.getElementById('capturedByRed').textContent = capturedByRed.map(p => PIECES.black[p] || '?').join('');
\n document.getElementById('capturedByBlack').textContent = capturedByBlack.map(p => PIECES.red[p] || '?').join('');
\n}<\/p>\n

document.getElementById('restartBtn').addEventListener('click', initBoard);
\ndocument.getElementById('undoBtn').addEventListener('click', undo);<\/p>\n

initBoard();
\n<\/script>
\n<\/body>
\n<\/html><\/p>\n

\u968f\u540e\u53d1\u73b0\u4e86\u4e00\u4e2a\u95ee\u9898，\u6c34\u58a8\u62d6\u5c3e\u7279\u6548\u4e0e\u68cb\u5b50\u79fb\u52a8\u5e76\u4e0d\u5339\u914d：<\/p>\n

\"\"<\/p>\n

\u95ee\u9898\u5728\u4e8e\u68cb\u5b50\u662f\u4e00\u77ac\u95f4\u79fb\u5230\u7ec8\u70b9\u7684，\u800c\u62d6\u5c3e\u5219\u662f\u968f\u540e\u7f13\u6162\u51fa\u73b0\u7684<\/p>\n

\u53c8\u5199\u4e86100\u591a\u884c\"\"<\/p>\n

\u8fd9\u4e0b\u7b97\u662f\u5b8c\u6210\u4e86：<\/p>\n

<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u4e2d\u56fd\u8c61\u68cb \u00b7 \u6c34\u58a8\u7279\u6548\u7248<\/title>
\n<style>
\n * { box-sizing: border-box; margin: 0; padding: 0; }
\n body {
\n font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;
\n background: #e8e4dc;
\n background-image:
\n radial-gradient(circle at 20% 30%, rgba(180,160,130,0.15) 0%, transparent 50%),
\n radial-gradient(circle at 80% 70%, rgba(160,140,110,0.1) 0%, transparent 50%),
\n radial-gradient(circle at 50% 50%, rgba(200,190,170,0.2) 0%, transparent 70%);
\n min-height: 100vh;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n padding: 30px 20px;
\n color: #2c2c2c;
\n }
\n h1 {
\n font-size: 38px;
\n margin-bottom: 15px;
\n letter-spacing: 12px;
\n color: #1a1a1a;
\n font-weight: normal;
\n text-shadow: 1px 1px 0 rgba(0,0,0,0.08);
\n position: relative;
\n }
\n h1::after {
\n content: '';
\n display: block;
\n width: 60%;
\n height: 2px;
\n margin: 8px auto 0;
\n background: linear-gradient(90deg, transparent, #555, transparent);
\n }
\n .info {
\n display: flex;
\n gap: 30px;
\n margin-bottom: 20px;
\n align-items: center;
\n font-size: 18px;
\n }
\n .turn-indicator {
\n padding: 10px 24px;
\n border-radius: 4px;
\n font-weight: bold;
\n transition: all 0.3s;
\n border: 1px solid #333;
\n background: #f5f1ea;
\n color: #2c2c2c;
\n letter-spacing: 2px;
\n }
\n .turn-red { background: #c0392b; color: #f5f1ea; border-color: #8b2a1e; }
\n .turn-black { background: #2c2c2c; color: #f5f1ea; border-color: #000; }
\n button {
\n background: #f5f1ea;
\n color: #2c2c2c;
\n border: 1px solid #333;
\n padding: 10px 24px;
\n border-radius: 4px;
\n cursor: pointer;
\n font-size: 16px;
\n font-family: inherit;
\n font-weight: bold;
\n letter-spacing: 2px;
\n transition: all 0.3s;
\n }
\n button:hover {
\n background: #2c2c2c;
\n color: #f5f1ea;
\n transform: translateY(-2px);
\n }
\n .canvas-wrap {
\n position: relative;
\n }
\n canvas {
\n background: #f5f1ea;
\n border: 1px solid #333;
\n border-radius: 2px;
\n box-shadow:
\n 0 0 0 8px #f5f1ea,
\n 0 0 0 9px #333,
\n 0 15px 40px rgba(0,0,0,0.3);
\n cursor: pointer;
\n }
\n .status {
\n margin-top: 18px;
\n font-size: 20px;
\n min-height: 28px;
\n color: #c0392b;
\n font-weight: bold;
\n letter-spacing: 3px;
\n }
\n .captured {
\n margin-top: 12px;
\n display: flex;
\n gap: 40px;
\n font-size: 16px;
\n color: #555;
\n }
\n .captured div { min-height: 30px; }
\n .captured span {
\n display: inline-block;
\n margin: 0 3px;
\n font-size: 22px;
\n font-family: "KaiTi", "STKaiti", serif;
\n }
\n .fx-text {
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n transform: translate(-50%, -50%);
\n pointer-events: none;
\n font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;
\n font-weight: bold;
\n opacity: 0;
\n z-index: 10;
\n }
\n .fx-check {
\n font-size: 72px;
\n color: #c0392b;
\n letter-spacing: 20px;
\n text-shadow: 0 0 20px rgba(192, 57, 43, 0.6);
\n }
\n .fx-mate {
\n font-size: 96px;
\n color: #8b0000;
\n letter-spacing: 30px;
\n text-shadow: 0 0 30px rgba(139, 0, 0, 0.8), 0 0 60px rgba(192, 57, 43, 0.5);
\n }
\n @keyframes fxFlash {
\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
\n 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
\n 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
\n 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
\n }
\n @keyframes fxShake {
\n 0%, 100% { transform: translate(0, 0); }
\n 10% { transform: translate(-6px, -4px); }
\n 20% { transform: translate(5px, 3px); }
\n 30% { transform: translate(-4px, 5px); }
\n 40% { transform: translate(6px, -3px); }
\n 50% { transform: translate(-5px, 4px); }
\n 60% { transform: translate(3px, -5px); }
\n 70% { transform: translate(-3px, 3px); }
\n 80% { transform: translate(4px, -2px); }
\n 90% { transform: translate(-2px, 2px); }
\n }
\n .shake { animation: fxShake 0.5s ease-in-out; }
\n<\/style>
\n<\/head>
\n<body>
\n <h1>\u4e2d \u570b \u8c61 \u68cb<\/h1>
\n <div class="info">
\n <div class="turn-indicator" id="turnIndicator">\u7ea2\u65b9\u8d70\u68cb<\/div>
\n <button id="restartBtn">\u91cd \u65b0 \u5f00 \u59cb<\/button>
\n <button id="undoBtn">\u6094 \u68cb<\/button>
\n <\/div>
\n <div class="canvas-wrap" id="canvasWrap">
\n <canvas id="board" width="540" height="600"><\/canvas>
\n <div class="fx-text fx-check" id="fxCheck">\u5c06 \u8ecd<\/div>
\n <div class="fx-text fx-mate" id="fxMate">\u7edd \u6bba<\/div>
\n <\/div>
\n <div class="status" id="status"><\/div>
\n <div class="captured">
\n <div>\u7ea2\u65b9\u88ab\u5403 \u00b7 <span id="capturedByRed"><\/span><\/div>
\n <div>\u9ed1\u65b9\u88ab\u5403 \u00b7 <span id="capturedByBlack"><\/span><\/div>
\n <\/div><\/p>\n

<script>
\nconst CELL = 60;
\nconst MARGIN_X = 30;
\nconst MARGIN_Y = 30;
\nconst COLS = 9;
\nconst ROWS = 10;<\/p>\n

const canvas = document.getElementById('board');
\nconst ctx = canvas.getContext('2d');
\nconst canvasWrap = document.getElementById('canvasWrap');<\/p>\n

const RED = 'red';
\nconst BLACK = 'black';<\/p>\n

const PIECES = {
\n red: {
\n king: '\u5e25', advisor: '\u4ed5', elephant: '\u76f8', horse: '\u508c',
\n chariot: '\u4fe5', cannon: '\u70ae', pawn: '\u5175'
\n },
\n black: {
\n king: '\u5c07', advisor: '\u58eb', elephant: '\u8c61', horse: '\u99ac',
\n chariot: '\u8eca', cannon: '\u7832', pawn: '\u5352'
\n }
\n};<\/p>\n

let board = [];
\nlet currentPlayer = RED;
\nlet selected = null;
\nlet legalMoves = [];
\nlet gameOver = false;
\nlet history = [];
\nlet capturedByRed = [];
\nlet capturedByBlack = [];<\/p>\n

let effects = [];
\nlet animating = false;
\nlet checkAnimStart = 0;
\nlet checkKingPos = null;
\nlet movingPiece = null;<\/p>\n

function P(type, color) {
\n return { type, color };
\n}<\/p>\n

function initBoard() {
\n board = [
\n [P('chariot',BLACK),P('horse',BLACK),P('elephant',BLACK),P('advisor',BLACK),P('king',BLACK),P('advisor',BLACK),P('elephant',BLACK),P('horse',BLACK),P('chariot',BLACK)],
\n [null,null,null,null,null,null,null,null,null],
\n [null,P('cannon',BLACK),null,null,null,null,null,P('cannon',BLACK),null],
\n [P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK),null,P('pawn',BLACK)],
\n [null,null,null,null,null,null,null,null,null],
\n [null,null,null,null,null,null,null,null,null],
\n [P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED),null,P('pawn',RED)],
\n [null,P('cannon',RED),null,null,null,null,null,P('cannon',RED),null],
\n [null,null,null,null,null,null,null,null,null],
\n [P('chariot',RED),P('horse',RED),P('elephant',RED),P('advisor',RED),P('king',RED),P('advisor',RED),P('elephant',RED),P('horse',RED),P('chariot',RED)]
\n ];
\n currentPlayer = RED;
\n selected = null;
\n legalMoves = [];
\n gameOver = false;
\n history = [];
\n capturedByRed = [];
\n capturedByBlack = [];
\n effects = [];
\n movingPiece = null;
\n checkAnimStart = 0;
\n checkKingPos = null;
\n hideFx('fxCheck');
\n hideFx('fxMate');
\n updateUI();
\n draw();
\n}<\/p>\n

function isInBoard(r, c) {
\n return r >= 0 && r < ROWS && c >= 0 && c < COLS;
\n}<\/p>\n

function inPalace(r, c, color) {
\n if (c < 3 || c > 5) return false;
\n if (color === RED) return r >= 7 && r <= 9;
\n return r >= 0 && r <= 2;
\n}<\/p>\n

function onOwnSide(r, color) {
\n if (color === RED) return r >= 5;
\n return r <= 4;
\n}<\/p>\n

function getLegalMoves(r, c) {
\n const piece = board[r][c];
\n if (!piece) return [];
\n const color = piece.color;
\n const type = piece.type;
\n const moves = [];
\n const addMove = (nr, nc) => {
\n if (!isInBoard(nr, nc)) return;
\n const target = board[nr][nc];
\n if (target && target.color === color) return;
\n moves.push({ r: nr, c: nc, capture: !!target });
\n };<\/p>\n

switch (type) {
\n case 'king': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n if (inPalace(nr, nc, color)) addMove(nr, nc);
\n }
\n break;
\n }
\n case 'advisor': {
\n const dirs = [[-1,-1],[-1,1],[1,-1],[1,1]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n if (inPalace(nr, nc, color)) addMove(nr, nc);
\n }
\n break;
\n }
\n case 'elephant': {
\n const dirs = [[-2,-2],[-2,2],[2,-2],[2,2]];
\n for (const [dr, dc] of dirs) {
\n const nr = r + dr, nc = c + dc;
\n const mr = r + dr\/2, mc = c + dc\/2;
\n if (!isInBoard(nr, nc)) continue;
\n if (!onOwnSide(nr, color)) continue;
\n if (board[mr][mc]) continue;
\n addMove(nr, nc);
\n }
\n break;
\n }
\n case 'horse': {
\n const hm = [
\n {dr:-2,dc:-1,br:-1,bc:0}, {dr:-2,dc:1,br:-1,bc:0},
\n {dr:2,dc:-1,br:1,bc:0}, {dr:2,dc:1,br:1,bc:0},
\n {dr:-1,dc:-2,br:0,bc:-1}, {dr:1,dc:-2,br:0,bc:-1},
\n {dr:-1,dc:2,br:0,bc:1}, {dr:1,dc:2,br:0,bc:1}
\n ];
\n for (const m of hm) {
\n const nr = r + m.dr, nc = c + m.dc;
\n const lr = r + m.br, lc = c + m.bc;
\n if (!isInBoard(nr, nc)) continue;
\n if (board[lr][lc]) continue;
\n addMove(nr, nc);
\n }
\n break;
\n }
\n case 'chariot': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n let nr = r + dr, nc = c + dc;
\n while (isInBoard(nr, nc)) {
\n const target = board[nr][nc];
\n if (!target) {
\n moves.push({ r: nr, c: nc, capture: false });
\n } else {
\n if (target.color !== color) {
\n moves.push({ r: nr, c: nc, capture: true });
\n }
\n break;
\n }
\n nr += dr; nc += dc;
\n }
\n }
\n break;
\n }
\n case 'cannon': {
\n const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
\n for (const [dr, dc] of dirs) {
\n let nr = r + dr, nc = c + dc;
\n let jumped = false;
\n while (isInBoard(nr, nc)) {
\n const target = board[nr][nc];
\n if (!jumped) {
\n if (!target) {
\n moves.push({ r: nr, c: nc, capture: false });
\n } else {
\n jumped = true;
\n }
\n } else {
\n if (target) {
\n if (target.color !== color) {
\n moves.push({ r: nr, c: nc, capture: true });
\n }
\n break;
\n }
\n }
\n nr += dr; nc += dc;
\n }
\n }
\n break;
\n }
\n case 'pawn': {
\n const forward = color === RED ? -1 : 1;
\n const nr = r + forward;
\n if (isInBoard(nr, c)) addMove(nr, c);
\n if (!onOwnSide(r, color)) {
\n if (isInBoard(r, c – 1)) addMove(r, c – 1);
\n if (isInBoard(r, c + 1)) addMove(r, c + 1);
\n }
\n break;
\n }
\n }
\n return moves;
\n}<\/p>\n

function findKing(color) {
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].type === 'king' && board[r][c].color === color) return { r, c };
\n }
\n }
\n return null;
\n}<\/p>\n

function kingsFacing() {
\n const rk = findKing(RED);
\n const bk = findKing(BLACK);
\n if (!rk || !bk || rk.c !== bk.c) return false;
\n const col = rk.c;
\n const minR = Math.min(rk.r, bk.r);
\n const maxR = Math.max(rk.r, bk.r);
\n for (let r = minR + 1; r < maxR; r++) {
\n if (board[r][col]) return false;
\n }
\n return true;
\n}<\/p>\n

function getLegalMovesFiltered(r, c) {
\n const moves = getLegalMoves(r, c);
\n return moves.filter(m => {
\n const captured = board[m.r][m.c];
\n const moving = board[r][c];
\n board[m.r][m.c] = moving;
\n board[r][c] = null;
\n const inCheck = isKingInCheck(moving.color) || kingsFacing();
\n board[r][c] = moving;
\n board[m.r][m.c] = captured;
\n return !inCheck;
\n });
\n}<\/p>\n

function isKingInCheck(color) {
\n const king = findKing(color);
\n if (!king) return true;
\n const oppColor = color === RED ? BLACK : RED;
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].color === oppColor) {
\n const moves = getLegalMoves(r, c);
\n if (moves.some(m => m.r === king.r && m.c === king.c)) return true;
\n }
\n }
\n }
\n return false;
\n}<\/p>\n

function hasAnyLegalMove(color) {
\n for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && board[r][c].color === color) {
\n if (getLegalMovesFiltered(r, c).length > 0) return true;
\n }
\n }
\n }
\n return false;
\n}<\/p>\n

function drawBoard() {
\n const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
\n grad.addColorStop(0, '#f8f4ec');
\n grad.addColorStop(0.5, '#f0ebe0');
\n grad.addColorStop(1, '#ede6d8');
\n ctx.fillStyle = grad;
\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n

ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 1.5;<\/p>\n

for (let r = 0; r < ROWS; r++) {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X, MARGIN_Y + r * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + r * CELL);
\n ctx.stroke();
\n }<\/p>\n

for (let c = 0; c < COLS; c++) {
\n if (c === 0 || c === COLS – 1) {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + (ROWS – 1) * CELL);
\n ctx.stroke();
\n } else {
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + 4 * CELL);
\n ctx.stroke();
\n ctx.beginPath();
\n ctx.moveTo(MARGIN_X + c * CELL, MARGIN_Y + 5 * CELL);
\n ctx.lineTo(MARGIN_X + c * CELL, MARGIN_Y + 9 * CELL);
\n ctx.stroke();
\n }
\n }<\/p>\n

ctx.beginPath();
\n ctx.moveTo(MARGIN_X, MARGIN_Y + 4 * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + 4 * CELL);
\n ctx.moveTo(MARGIN_X, MARGIN_Y + 5 * CELL);
\n ctx.lineTo(MARGIN_X + (COLS – 1) * CELL, MARGIN_Y + 5 * CELL);
\n ctx.stroke();<\/p>\n

ctx.beginPath();
\n ctx.moveTo(MARGIN_X + 3 * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + 5 * CELL, MARGIN_Y + 2 * CELL);
\n ctx.moveTo(MARGIN_X + 5 * CELL, MARGIN_Y);
\n ctx.lineTo(MARGIN_X + 3 * CELL, MARGIN_Y + 2 * CELL);
\n ctx.moveTo(MARGIN_X + 3 * CELL, MARGIN_Y + 7 * CELL);
\n ctx.lineTo(MARGIN_X + 5 * CELL, MARGIN_Y + 9 * CELL);
\n ctx.moveTo(MARGIN_X + 5 * CELL, MARGIN_Y + 7 * CELL);
\n ctx.lineTo(MARGIN_X + 3 * CELL, MARGIN_Y + 9 * CELL);
\n ctx.stroke();<\/p>\n

ctx.fillStyle = '#1a1a1a';
\n ctx.font = 'bold 26px "KaiTi", "STKaiti", "\u6977\u4f53", serif';
\n ctx.textAlign = 'center';
\n ctx.textBaseline = 'middle';
\n ctx.fillText('\u695a \u6cb3', MARGIN_X + 1.5 * CELL, MARGIN_Y + 4.5 * CELL);
\n ctx.fillText('\u6f22 \u754c', MARGIN_X + 6.5 * CELL, MARGIN_Y + 4.5 * CELL);<\/p>\n

drawStarPoints();
\n}<\/p>\n

function drawStarPoints() {
\n const points = [
\n [2,1],[2,7],[7,1],[7,7],
\n [3,0],[3,2],[3,4],[3,6],[3,8],
\n [6,0],[6,2],[6,4],[6,6],[6,8]
\n ];
\n for (const [r, c] of points) {
\n drawStar(r, c);
\n }
\n}<\/p>\n

function drawStar(r, c) {
\n const x = MARGIN_X + c * CELL;
\n const y = MARGIN_Y + r * CELL;
\n const s = 6;
\n const g = 5;
\n ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 1.2;
\n const dirs = [];
\n if (c > 0) dirs.push([-1,-1],[-1,1]);
\n if (c < COLS – 1) dirs.push([1,-1],[1,1]);
\n for (const [dx, dy] of dirs) {
\n ctx.beginPath();
\n ctx.moveTo(x + dx * g, y + dy * g);
\n ctx.lineTo(x + dx * (g + s), y + dy * g);
\n ctx.stroke();
\n ctx.beginPath();
\n ctx.moveTo(x + dx * g, y + dy * g);
\n ctx.lineTo(x + dx * g, y + dy * (g + s));
\n ctx.stroke();
\n }
\n}<\/p>\n

function drawPiece(r, c, type, color, highlight) {
\n const x = MARGIN_X + c * CELL;
\n const y = MARGIN_Y + r * CELL;
\n drawPieceAtXY(x, y, type, color, highlight, 1);
\n}<\/p>\n

function drawPieceAtXY(x, y, type, color, highlight, scale) {
\n const radius = 26 * scale;<\/p>\n

if (highlight) {
\n ctx.beginPath();
\n ctx.arc(x, y, radius + 5, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(192, 57, 43, 0.25)';
\n ctx.fill();
\n }<\/p>\n

const inkGrad = ctx.createRadialGradient(x – 3, y – 3, 2, x, y, radius);
\n inkGrad.addColorStop(0, '#e8e0d4');
\n inkGrad.addColorStop(0.6, '#d4c8b4');
\n inkGrad.addColorStop(1, '#b8a88c');
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.fillStyle = inkGrad;
\n ctx.fill();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = '#1a1a1a';
\n ctx.lineWidth = 2;
\n ctx.stroke();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, radius – 4, 0, Math.PI * 2);
\n ctx.strokeStyle = color === RED ? '#c0392b' : '#1a1a1a';
\n ctx.lineWidth = 1;
\n ctx.stroke();<\/p>\n

ctx.fillStyle = color === RED ? '#c0392b' : '#1a1a1a';
\n ctx.font = `bold ${28 * scale}px "KaiTi", "STKaiti", "\u6977\u4f53", serif`;
\n ctx.textAlign = 'center';
\n ctx.textBaseline = 'middle';
\n ctx.fillText(PIECES[color][type], x, y + 1);
\n}<\/p>\n

function draw() {
\n drawBoard();<\/p>\n

for (const move of legalMoves) {
\n const x = MARGIN_X + move.c * CELL;
\n const y = MARGIN_Y + move.r * CELL;
\n if (move.capture) {
\n ctx.beginPath();
\n ctx.arc(x, y, 30, 0, Math.PI * 2);
\n ctx.strokeStyle = 'rgba(192, 57, 43, 0.7)';
\n ctx.lineWidth = 2.5;
\n ctx.setLineDash([4, 3]);
\n ctx.stroke();
\n ctx.setLineDash([]);
\n } else {
\n ctx.beginPath();
\n ctx.arc(x, y, 6, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(26, 26, 26, 0.5)';
\n ctx.fill();
\n }
\n }<\/p>\n

for (let r = 0; r < ROWS; r++) {
\n for (let c = 0; c < COLS; c++) {
\n if (board[r][c] && (!movingPiece || (movingPiece.toR !== r || movingPiece.toC !== c) && (movingPiece.fromR !== r || movingPiece.fromC !== c))) {
\n const p = board[r][c];
\n drawPiece(r, c, p.type, p.color, selected && selected.r === r && selected.c === c);
\n }
\n }
\n }<\/p>\n

if (movingPiece) {
\n const now = performance.now();
\n const progress = Math.min(1, (now – movingPiece.startTime) \/ movingPiece.duration);
\n const easeProgress = progress < 0.5 ? 2 * progress * progress : 1 – Math.pow(-2 * progress + 2, 2) \/ 2;<\/p>\n

if (movingPiece.captured) {
\n const tcx = MARGIN_X + movingPiece.toC * CELL;
\n const tcy = MARGIN_Y + movingPiece.toR * CELL;
\n const capFade = Math.max(0, 1 – progress * 2.5);
\n if (capFade > 0) {
\n ctx.save();
\n ctx.globalAlpha = capFade;
\n drawPiece(movingPiece.toR, movingPiece.toC, movingPiece.captured.type, movingPiece.captured.color, false);
\n ctx.restore();
\n }
\n }<\/p>\n

const sx = MARGIN_X + movingPiece.fromC * CELL;
\n const sy = MARGIN_Y + movingPiece.fromR * CELL;
\n const tx = MARGIN_X + movingPiece.toC * CELL;
\n const ty = MARGIN_Y + movingPiece.toR * CELL;
\n const ix = sx + (tx – sx) * easeProgress;
\n const iy = sy + (ty – sy) * easeProgress;<\/p>\n

const angle = Math.atan2(ty – sy, tx – sx);
\n ctx.save();
\n ctx.translate(ix, iy);
\n ctx.rotate(angle * 0.15 * (1 – easeProgress));
\n ctx.translate(-ix, -iy);
\n drawPieceAtXY(ix, iy, movingPiece.piece.type, movingPiece.piece.color, false, 1 + (1 – easeProgress) * 0.1);
\n ctx.restore();<\/p>\n

if (easeProgress < 0.9) {
\n const shadowGrad = ctx.createRadialGradient(ix, iy + 20, 0, ix, iy + 20, 25);
\n shadowGrad.addColorStop(0, 'rgba(0,0,0,0.25)');
\n shadowGrad.addColorStop(1, 'rgba(0,0,0,0)');
\n ctx.beginPath();
\n ctx.arc(ix, iy + 20, 25, 0, Math.PI * 2);
\n ctx.fillStyle = shadowGrad;
\n ctx.fill();
\n }
\n }<\/p>\n

const redKing = findKing(RED);
\n const blackKing = findKing(BLACK);
\n const now = performance.now();<\/p>\n

if (redKing && isKingInCheck(RED)) {
\n if (!checkKingPos || checkKingPos.color !== RED || checkKingPos.r !== redKing.r || checkKingPos.c !== redKing.c) {
\n checkAnimStart = now;
\n checkKingPos = { r: redKing.r, c: redKing.c, color: RED };
\n }
\n const elapsed = now – checkAnimStart;
\n const pulse = 0.5 + 0.5 * Math.sin(elapsed \/ 150);
\n const x = MARGIN_X + redKing.c * CELL;
\n const y = MARGIN_Y + redKing.r * CELL;
\n const r = 32 + pulse * 8;
\n const grad = ctx.createRadialGradient(x, y, 20, x, y, r);
\n grad.addColorStop(0, `rgba(192, 57, 43, ${0.15 + pulse * 0.25})`);
\n grad.addColorStop(0.7, `rgba(192, 57, 43, ${0.3 + pulse * 0.3})`);
\n grad.addColorStop(1, 'rgba(192, 57, 43, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, r, 0, Math.PI * 2);
\n ctx.fillStyle = grad;
\n ctx.fill();
\n ctx.beginPath();
\n ctx.arc(x, y, 34 + pulse * 4, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(192, 57, 43, ${0.6 + pulse * 0.4})`;
\n ctx.lineWidth = 2.5;
\n ctx.stroke();
\n } else {
\n if (checkKingPos && checkKingPos.color === RED) { checkAnimStart = 0; checkKingPos = null; }
\n }<\/p>\n

if (blackKing && isKingInCheck(BLACK)) {
\n if (!checkKingPos || checkKingPos.color !== BLACK || checkKingPos.r !== blackKing.r || checkKingPos.c !== blackKing.c) {
\n checkAnimStart = now;
\n checkKingPos = { r: blackKing.r, c: blackKing.c, color: BLACK };
\n }
\n const elapsed = now – checkAnimStart;
\n const pulse = 0.5 + 0.5 * Math.sin(elapsed \/ 150);
\n const x = MARGIN_X + blackKing.c * CELL;
\n const y = MARGIN_Y + blackKing.r * CELL;
\n const r = 32 + pulse * 8;
\n const grad = ctx.createRadialGradient(x, y, 20, x, y, r);
\n grad.addColorStop(0, `rgba(192, 57, 43, ${0.15 + pulse * 0.25})`);
\n grad.addColorStop(0.7, `rgba(192, 57, 43, ${0.3 + pulse * 0.3})`);
\n grad.addColorStop(1, 'rgba(192, 57, 43, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, r, 0, Math.PI * 2);
\n ctx.fillStyle = grad;
\n ctx.fill();
\n ctx.beginPath();
\n ctx.arc(x, y, 34 + pulse * 4, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(192, 57, 43, ${0.6 + pulse * 0.4})`;
\n ctx.lineWidth = 2.5;
\n ctx.stroke();
\n } else {
\n if (checkKingPos && checkKingPos.color === BLACK) { checkAnimStart = 0; checkKingPos = null; }
\n }
\n}<\/p>\n

function drawEffects() {
\n const now = performance.now();
\n const remaining = [];<\/p>\n

for (const e of effects) {
\n const elapsed = now – e.startTime;
\n const progress = elapsed \/ e.duration;
\n if (progress >= 1) continue;<\/p>\n

if (e.type === 'capture') {
\n drawCaptureEffect(e, progress);
\n remaining.push(e);
\n } else if (e.type === 'checkmate') {
\n drawCheckmateEffect(e, progress);
\n remaining.push(e);
\n } else if (e.type === 'inkTrail') {
\n drawInkTrailEffect(e, progress);
\n remaining.push(e);
\n }
\n }<\/p>\n

effects = remaining;
\n}<\/p>\n

function drawCaptureEffect(e, p) {
\n const x = e.x, y = e.y;
\n const inkColor2 = 'rgba(40, 40, 40,';<\/p>\n

for (let i = 0; i < 3; i++) {
\n const delay = i * 0.08;
\n const pp = Math.max(0, Math.min(1, (p – delay) \/ (1 – delay)));
\n if (pp <= 0) continue;
\n const radius = 10 + pp * 55;
\n const alpha = (1 – pp) * 0.8;
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = inkColor2 + alpha.toFixed(2) + ')';
\n ctx.lineWidth = 3 – pp * 2.5;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 14; i++) {
\n const angle = (i \/ 14) * Math.PI * 2 + p * 0.8;
\n const dist = p * 55;
\n const px = x + Math.cos(angle) * dist;
\n const py = y + Math.sin(angle) * dist;
\n const size = (1 – p) * 5 + 1;
\n ctx.beginPath();
\n ctx.arc(px, py, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor2 + ((1 – p) * 0.7).toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

const coreGrad = ctx.createRadialGradient(x, y, 0, x, y, 30 * (1 – p * 0.6));
\n coreGrad.addColorStop(0, inkColor2 + (0.5 * (1 – p)).toFixed(2) + ')');
\n coreGrad.addColorStop(1, inkColor2 + '0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 30 * (1 – p * 0.6), 0, Math.PI * 2);
\n ctx.fillStyle = coreGrad;
\n ctx.fill();
\n}<\/p>\n

function drawCheckmateEffect(e, p) {
\n const x = e.x, y = e.y;<\/p>\n

ctx.save();
\n ctx.globalAlpha = Math.min(1, p * 3);<\/p>\n

for (let i = 0; i < 5; i++) {
\n const delay = i * 0.06;
\n const pp = Math.max(0, Math.min(1, (p – delay) \/ (1 – delay)));
\n if (pp <= 0) continue;
\n const radius = 15 + pp * 200;
\n const alpha = (1 – pp) * 0.6;
\n ctx.beginPath();
\n ctx.arc(x, y, radius, 0, Math.PI * 2);
\n ctx.strokeStyle = `rgba(30, 30, 30, ${alpha.toFixed(2)})`;
\n ctx.lineWidth = 4 – pp * 3;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 5; i++) {
\n const angle = (i \/ 5) * Math.PI * 2 – Math.PI \/ 2;
\n const dist = Math.min(300, p * 600);
\n ctx.beginPath();
\n ctx.moveTo(x, y);
\n ctx.lineTo(x + Math.cos(angle) * dist, y + Math.sin(angle) * dist);
\n ctx.strokeStyle = `rgba(30, 30, 30, ${(1 – p) * 0.5})`;
\n ctx.lineWidth = 2;
\n ctx.stroke();
\n }<\/p>\n

for (let i = 0; i < 30; i++) {
\n const angle = (i \/ 30) * Math.PI * 2 + p * 1.5;
\n const dist = p * 80 + Math.sin(i * 3 + p * 10) * 15;
\n const px = x + Math.cos(angle) * dist;
\n const py = y + Math.sin(angle) * dist;
\n const size = (1 – p) * 8 + 2;
\n const gray = 30 + (i % 3) * 25;
\n ctx.beginPath();
\n ctx.arc(px, py, size, 0, Math.PI * 2);
\n ctx.fillStyle = `rgba(${gray}, ${gray}, ${gray}, ${(1 – p) * 0.8})`;
\n ctx.fill();
\n }<\/p>\n

const flashGrad = ctx.createRadialGradient(x, y, 0, x, y, 250 * Math.max(0.3, 1 – p));
\n flashGrad.addColorStop(0, `rgba(255, 255, 255, ${Math.max(0, (0.6 – p * 0.6))})`);
\n flashGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 250, 0, Math.PI * 2);
\n ctx.fillStyle = flashGrad;
\n ctx.fill();<\/p>\n

ctx.restore();
\n}<\/p>\n

function easeInOut(t) {
\n return t < 0.5 ? 2 * t * t : 1 – Math.pow(-2 * t + 2, 2) \/ 2;
\n}<\/p>\n

function drawInkTrailEffect(e, p) {
\n const easeP = easeInOut(Math.min(1, p));
\n const x = e.sx + (e.dx – e.sx) * easeP;
\n const y = e.sy + (e.dy – e.sy) * easeP;
\n const inkColor = 'rgba(40, 40, 40,';
\n const dx = e.dx – e.sx;
\n const dy = e.dy – e.sy;
\n const angle = Math.atan2(dy, dx);
\n const splatters = e.splatters;<\/p>\n

for (let i = 0; i < 8; i++) {
\n const rawP = Math.max(0, p – i * 0.035);
\n const pp = easeInOut(rawP);
\n const tx = e.sx + dx * pp;
\n const ty = e.sy + dy * pp;
\n const alpha = (1 – rawP) * 0.5;
\n const size = (1 – rawP) * 20 + 4;
\n ctx.beginPath();
\n ctx.arc(tx, ty, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

for (let i = 0; i < 5; i++) {
\n const rawP = Math.max(0, p – i * 0.06);
\n const pp = easeInOut(rawP);
\n const tx = e.sx + dx * pp;
\n const ty = e.sy + dy * pp;
\n const spread = 8 * (1 – rawP);
\n const perpAngle = angle + Math.PI \/ 2;
\n const offset = (Math.sin(i * 1.7 + rawP * 5) * spread);
\n const ox = tx + Math.cos(perpAngle) * offset;
\n const oy = ty + Math.sin(perpAngle) * offset;
\n const size = (1 – rawP) * 10 + 2;
\n const alpha = (1 – rawP) * 0.35;
\n ctx.beginPath();
\n ctx.arc(ox, oy, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

for (let i = 0; i < splatters.length; i++) {
\n const sp = splatters[i];
\n const progress = (p – sp.delay) \/ (1 – sp.delay);
\n if (progress <= 0 || progress > 1) continue;
\n const sx = x + Math.cos(sp.angle) * (progress * 35 + 5) + sp.offsetX * progress;
\n const sy = y + Math.sin(sp.angle) * (progress * 35 + 5) + sp.offsetY * progress;
\n const size = (1 – progress) * sp.maxSize + sp.minSize;
\n const alpha = (1 – progress) * sp.maxAlpha;
\n ctx.beginPath();
\n ctx.arc(sx, sy, size, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + alpha.toFixed(2) + ')';
\n ctx.fill();
\n }<\/p>\n

for (let i = 0; i < e.clusters.length; i++) {
\n const cl = e.clusters[i];
\n const progress = (p – cl.delay) \/ (1 – cl.delay);
\n if (progress <= 0 || progress > 1) continue;
\n const cx = x + Math.cos(cl.angle) * (progress * 40);
\n const cy = y + Math.sin(cl.angle) * (progress * 40);
\n const size = (1 – progress) * cl.maxSize + cl.minSize;
\n const alpha = (1 – progress) * cl.maxAlpha;
\n ctx.beginPath();
\n ctx.arc(cx, cy, size, 0, Math.PI * 2);
\n ctx.fillStyle = `rgba(${cl.gray}, ${cl.gray}, ${cl.gray}, ${alpha.toFixed(2)})`;
\n ctx.fill();
\n }<\/p>\n

const headGrad = ctx.createRadialGradient(x, y, 0, x, y, 30);
\n headGrad.addColorStop(0, inkColor + '0.7)');
\n headGrad.addColorStop(0.6, inkColor + '0.4)');
\n headGrad.addColorStop(1, inkColor + '0)');
\n ctx.beginPath();
\n ctx.arc(x, y, 30, 0, Math.PI * 2);
\n ctx.fillStyle = headGrad;
\n ctx.fill();<\/p>\n

ctx.beginPath();
\n ctx.arc(x, y, 22, 0, Math.PI * 2);
\n ctx.fillStyle = inkColor + '0.55)';
\n ctx.fill();
\n}<\/p>\n

function animate() {
\n if (movingPiece) {
\n const now = performance.now();
\n if (now – movingPiece.startTime >= movingPiece.duration) {
\n finalizeMove();
\n }
\n }<\/p>\n

draw();
\n drawEffects();<\/p>\n

if (movingPiece) {
\n animating = true;
\n requestAnimationFrame(animate);
\n return;
\n }<\/p>\n

const redKing = findKing(RED);
\n const blackKing = findKing(BLACK);
\n const redChecked = redKing && isKingInCheck(RED);
\n const blackChecked = blackKing && isKingInCheck(BLACK);<\/p>\n

if (effects.length > 0 || redChecked || blackChecked) {
\n animating = true;
\n requestAnimationFrame(animate);
\n } else {
\n animating = false;
\n }
\n}<\/p>\n

function triggerAnimation() {
\n if (!animating) {
\n animating = true;
\n requestAnimationFrame(animate);
\n }
\n}<\/p>\n

function getXY(r, c) {
\n return { x: MARGIN_X + c * CELL, y: MARGIN_Y + r * CELL };
\n}<\/p>\n

function addCaptureEffect(r, c, color) {
\n const { x, y } = getXY(r, c);
\n effects.push({
\n type: 'capture',
\n x, y,
\n color,
\n startTime: performance.now(),
\n duration: 800
\n });
\n}<\/p>\n

function addInkTrailEffect(sr, sc, dr, dc, color, duration) {
\n const { x: sx, y: sy } = getXY(sr, sc);
\n const { x: dx, y: dy } = getXY(dr, dc);
\n const moveAngle = Math.atan2(dy – sy, dx – sx);<\/p>\n

const splatters = [];
\n for (let i = 0; i < 12; i++) {
\n const spreadAngle = moveAngle + Math.PI + (Math.random() – 0.5) * 1.8;
\n splatters.push({
\n angle: spreadAngle,
\n delay: i * 0.07,
\n offsetX: (Math.random() – 0.5) * 10,
\n offsetY: (Math.random() – 0.5) * 10,
\n maxSize: 6 + Math.random() * 5,
\n minSize: 1 + Math.random() * 1.5,
\n maxAlpha: 0.5 + Math.random() * 0.3
\n });
\n }<\/p>\n

const clusters = [];
\n for (let i = 0; i < 4; i++) {
\n const clusterAngle = moveAngle + Math.PI + (i \/ 4) * 0.8 – 0.4 + (Math.random() – 0.5) * 0.3;
\n clusters.push({
\n angle: clusterAngle,
\n delay: i * 0.15,
\n gray: 25 + Math.floor(Math.random() * 30),
\n maxSize: 4 + Math.random() * 4,
\n minSize: 0.8 + Math.random() * 1.2,
\n maxAlpha: 0.4 + Math.random() * 0.3
\n });
\n }<\/p>\n

effects.push({
\n type: 'inkTrail',
\n sx, sy, dx, dy,
\n color,
\n splatters,
\n clusters,
\n startTime: performance.now(),
\n duration: duration
\n });
\n}<\/p>\n

function addCheckmateEffect(r, c) {
\n const { x, y } = getXY(r, c);
\n effects.push({
\n type: 'checkmate',
\n x, y,
\n startTime: performance.now(),
\n duration: 2000
\n });
\n}<\/p>\n

function showFx(id, duration) {
\n const el = document.getElementById(id);
\n el.style.animation = 'none';
\n el.offsetHeight;
\n el.style.animation = `fxFlash ${duration}ms ease-out forwards`;
\n}<\/p>\n

function hideFx(id) {
\n const el = document.getElementById(id);
\n el.style.animation = 'none';
\n el.style.opacity = '0';
\n}<\/p>\n

function triggerShake() {
\n canvasWrap.classList.remove('shake');
\n void canvasWrap.offsetWidth;
\n canvasWrap.classList.add('shake');
\n}<\/p>\n

canvas.addEventListener('click', (e) => {
\n if (gameOver || movingPiece) return;
\n const rect = canvas.getBoundingClientRect();
\n const x = (e.clientX – rect.left) * (canvas.width \/ rect.width);
\n const y = (e.clientY – rect.top) * (canvas.height \/ rect.height);
\n const c = Math.round((x – MARGIN_X) \/ CELL);
\n const r = Math.round((y – MARGIN_Y) \/ CELL);
\n if (!isInBoard(r, c)) return;<\/p>\n

const piece = board[r][c];<\/p>\n

if (selected) {
\n const move = legalMoves.find(m => m.r === r && m.c === c);
\n if (move) {
\n makeMove(selected.r, selected.c, r, c);
\n selected = null;
\n legalMoves = [];
\n return;
\n }
\n if (piece && piece.color === currentPlayer) {
\n selected = { r, c };
\n legalMoves = getLegalMovesFiltered(r, c);
\n draw();
\n return;
\n }
\n selected = null;
\n legalMoves = [];
\n draw();
\n return;
\n }<\/p>\n

if (piece && piece.color === currentPlayer) {
\n selected = { r, c };
\n legalMoves = getLegalMovesFiltered(r, c);
\n draw();
\n }
\n});<\/p>\n

function makeMove(fr, fc, tr, tc) {
\n const moved = board[fr][fc];
\n const captured = board[tr][tc];
\n history.push({ fr, fc, tr, tc, moved, captured, player: currentPlayer });<\/p>\n

board[fr][fc] = null;
\n board[tr][tc] = null;<\/p>\n

const duration = 380;
\n movingPiece = {
\n piece: moved,
\n fromR: fr, fromC: fc,
\n toR: tr, toC: tc,
\n captured: captured,
\n player: currentPlayer,
\n startTime: performance.now(),
\n duration: duration
\n };<\/p>\n

addInkTrailEffect(fr, fc, tr, tc, moved.color, duration);<\/p>\n

if (captured) {
\n addCaptureEffect(tr, tc, moved.color);
\n triggerShake();
\n }<\/p>\n

triggerAnimation();
\n}<\/p>\n

function finalizeMove() {
\n if (!movingPiece) return;
\n const { piece, toR, toC, captured, player } = movingPiece;
\n board[toR][toC] = piece;
\n movingPiece = null;<\/p>\n

if (captured) {
\n if (player === RED) capturedByRed.push(captured.type);
\n else capturedByBlack.push(captured.type);
\n }
\n currentPlayer = currentPlayer === RED ? BLACK : RED;
\n updateUI();
\n checkGameEnd();
\n}<\/p>\n

function undo() {
\n if (movingPiece) {
\n board[movingPiece.fromR][movingPiece.fromC] = movingPiece.piece;
\n board[movingPiece.toR][movingPiece.toC] = movingPiece.captured;
\n movingPiece = null;
\n history.pop();
\n selected = null;
\n legalMoves = [];
\n effects = [];
\n checkAnimStart = 0;
\n checkKingPos = null;
\n updateUI();
\n draw();
\n return;
\n }
\n if (history.length === 0) return;
\n const last = history.pop();
\n board[last.fr][last.fc] = last.moved;
\n board[last.tr][last.tc] = last.captured;
\n if (last.captured) {
\n if (last.player === RED) capturedByRed.pop();
\n else capturedByBlack.pop();
\n }
\n currentPlayer = last.player;
\n gameOver = false;
\n selected = null;
\n legalMoves = [];
\n effects = [];
\n checkAnimStart = 0;
\n checkKingPos = null;
\n hideFx('fxCheck');
\n hideFx('fxMate');
\n updateUI();
\n draw();
\n}<\/p>\n

function checkGameEnd() {
\n const opp = currentPlayer === RED ? BLACK : RED;
\n const oppKing = findKing(opp);
\n const statusEl = document.getElementById('status');
\n if (!oppKing) {
\n gameOver = true;
\n const winner = currentPlayer === RED ? '\u7ea2\u65b9' : '\u9ed1\u65b9';
\n statusEl.textContent = winner + ' \u83b7\u80dc \u00b7 \u5c06\u519b\u62bd\u5e05';
\n addCheckmateEffect(oppKing?.r ?? 5, oppKing?.c ?? 4);
\n showFx('fxMate', 2000);
\n triggerShake();
\n return;
\n }
\n if (!hasAnyLegalMove(currentPlayer)) {
\n gameOver = true;
\n const inCheck = isKingInCheck(currentPlayer);
\n if (inCheck) {
\n statusEl.textContent = '\u7edd\u6740 \u00b7 ' + (opp === RED ? '\u7ea2\u65b9' : '\u9ed1\u65b9') + ' \u83b7\u80dc';
\n const king = findKing(currentPlayer);
\n if (king) {
\n addCheckmateEffect(king.r, king.c);
\n }
\n showFx('fxMate', 2000);
\n triggerShake();
\n } else {
\n statusEl.textContent = '\u548c\u68cb \u00b7 \u56f0\u6bd9';
\n }
\n return;
\n }
\n if (isKingInCheck(currentPlayer)) {
\n statusEl.textContent = '\u5c06 \u519b';
\n showFx('fxCheck', 1500);
\n } else {
\n statusEl.textContent = '';
\n }
\n}<\/p>\n

function updateUI() {
\n const ind = document.getElementById('turnIndicator');
\n if (gameOver) {
\n ind.textContent = '\u6e38\u620f\u7ed3\u675f';
\n ind.className = 'turn-indicator';
\n } else if (currentPlayer === RED) {
\n ind.textContent = '\u7ea2\u65b9\u8d70\u68cb';
\n ind.className = 'turn-indicator turn-red';
\n } else {
\n ind.textContent = '\u9ed1\u65b9\u8d70\u68cb';
\n ind.className = 'turn-indicator turn-black';
\n }
\n document.getElementById('capturedByRed').textContent = capturedByRed.map(p => PIECES.black[p] || '?').join('');
\n document.getElementById('capturedByBlack').textContent = capturedByBlack.map(p => PIECES.red[p] || '?').join('');
\n}<\/p>\n

document.getElementById('restartBtn').addEventListener('click', initBoard);
\ndocument.getElementById('undoBtn').addEventListener('click', undo);<\/p>\n

initBoard();
\n<\/script>
\n<\/body>
\n<\/html><\/p>\n

\u4fdd\u5b58\u6210.txt\u540e\u7f00\u7c98\u8d34\u540e\u6539\u4e3a.html\u540e\u7f00\u5373\u53ef\u4f7f\u7528\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

1\u7248（\u68cb\u5b50\u62d6\u5c3e\u8fc7\u4e8e\u5355\u8c03）：<\/p>\n

\u4e2d\u56fd\u8c61\u68cb<\/title><br \/>\n* { box-sizing: border-box; margin: 0; padding: 0; }body {font-family: \\”KaiTi\\”, \\”STKaiti\\”, \\”\u6977\u4f53\\”, serif;background: <\/p>\n","protected":false},"author":2,"featured_media":97269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[10336,567],"topic":[],"class_list":["post-97272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-10336","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/97272.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"1\u7248（\u68cb\u5b50\u62d6\u5c3e\u8fc7\u4e8e\u5355\u8c03）： \u4e2d\u56fd\u8c61\u68cb * { box-sizing: border-box; margin: 0; padding: 0; }body {font-family: "KaiTi", "STKaiti", "\u6977\u4f53", serif;background:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/97272.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-29T00:36:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260829003629-6a92298d6af15.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"59 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/97272.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/97272.html\",\"name\":\"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-29T00:36:31+00:00\",\"dateModified\":\"2026-08-29T00:36:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/97272.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/97272.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/97272.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/97272.html","og_locale":"zh_CN","og_type":"article","og_title":"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"1\u7248（\u68cb\u5b50\u62d6\u5c3e\u8fc7\u4e8e\u5355\u8c03）： \u4e2d\u56fd\u8c61\u68cb * { box-sizing: border-box; margin: 0; padding: 0; }body {font-family: \"KaiTi\", \"STKaiti\", \"\u6977\u4f53\", serif;background:","og_url":"https:\/\/www.wsisp.com\/helps\/97272.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-29T00:36:31+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260829003629-6a92298d6af15.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"59 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/97272.html","url":"https:\/\/www.wsisp.com\/helps\/97272.html","name":"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-29T00:36:31+00:00","dateModified":"2026-08-29T00:36:31+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/97272.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/97272.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/97272.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u4e2d\u56fd\u8c61\u68cb\u7f51\u9875\u7248"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/97272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=97272"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/97272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/97269"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=97272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=97272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=97272"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=97272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}