1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
| let board = null;
let $board = $('#board');
let squareClass = 'square-2b8ce'
let colorToHighlight = null;
let highlightChess = true;
let squareToHighlight = null;
var $boardTool = $("#board-tool");
var $prevButton = $boardTool.find("#prev");
var $description = $boardTool.find("#description");
var $nextButton = $boardTool.find("#next");
var $startButton = $boardTool.find("#start");
var $endButton = $boardTool.find("#end");
var totalSteps = 0;
var game = new Xiangqi();
const pgn = ['[Game "Chinese Chess"]',
'[Event "Test"]',
'[Date "2024.04.16"]',
'[Red "A"]',
'[Black "B"]',
'[Result "1/2-1/2"]',
'[Format "ICCS"]',
'',
'1. b2e2 b9c7',
'2. b0c2 a9b9',
'3. a0b0h9g7',
'4. g3g4 c6c5',
'5. h0g2h7h3',
'6. e3e4 b7b3',
'7. i0i1h3g3',
'8. g0i2 i9h9',
'9. i1f1g3d3',
'10. f1f7 d3d2',
'11. g2f4 d2h2',
'12. f4e6 c7e6',
'13. e2e6 b9b6',
'14. e6e5 e9e8',
'15. f7g7h9h3',
'16. g7g9']
function initXiangqi() {
console.log("载入 PGN：" + game.load_pgn(pgn.join('\n')), game.header());
totalSteps = game.history().length;
do {
flag = game.undo();
} while (flag);
}
function initXiangqiboard() {
function onMoveEnd() {
if (highlightChess)
{
$board.find('.square-' + squareToHighlight)
.addClass('highlight-' + colorToHighlight);
}
}
let config = {
boardTheme: '../../../../js/xiangqiboard/img/xiangqiboards/wikimedia/xiangqiboard.svg',
pieceTheme: '../../../../js/xiangqiboard/img/xiangqipieces/wikimedia/{piece}.svg',
position: game.fen(),
draggable: true,
onMoveEnd: onMoveEnd
};
board = Xiangqiboard($board, config);
}
function initXiangqiboardTool() {
$startButton.click(function () {
console.log("初始按钮被点击了");
do {
move = game.undo();
removehighlight(move);
} while (move);
board.position(game.fen());
$description.text(game.history().length.toString() + "/" + totalSteps.toString());
});
$endButton.click(function () {
console.log("终局按钮被点击了");
do {
move = game.redo();
removehighlight(move);
} while (move);
board.position(game.fen());
$description.text(game.history().length.toString() + "/" + totalSteps.toString());
});
$prevButton.click(function () {
console.log("前一步按钮被点击了");
move = game.undo();
highlight(move);
board.position(game.fen());
$description.text(game.history().length.toString() + "/" + totalSteps.toString());
});
$nextButton.click(function () {
console.log("后一步按钮被点击了");
move = game.redo();
highlight(move);
board.position(game.fen());
$description.text(game.history().length.toString() + "/" + totalSteps.toString());
});
function removehighlight(move){
console.log(move);
$board.find('.' + squareClass).removeClass('highlight-red');
$board.find('.' + squareClass).removeClass('highlight-black');
highlightChess = false;
}
function highlight(move) {
console.log(move);
if (move) {
if (move.color === 'r') {
$board.find('.' + squareClass).removeClass('highlight-red');
$board.find('.square-' + move.from).addClass('highlight-red');
squareToHighlight = move.to;
colorToHighlight = 'red';
} else {
$board.find('.' + squareClass).removeClass('highlight-black');
$board.find('.square-' + move.from).addClass('highlight-black');
squareToHighlight = move.to;
colorToHighlight = 'black';
}
highlightChess = true;
}
}
}
$(document).ready(function () {
initXiangqi();
initXiangqiboard();
initXiangqiboardTool();
});
|
