“我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛”
代码仓库，走过路过点一个 Star ✨
在上一段落里面写到了如何写一个棋盘。那接下来就是要摆棋子上去了，白方在下面，黑方在上面，第一排是小兵，第二排是车、马、象、后、王、象、马、车。有一个原则就是黑后在黑色的格子，白后在白色的格子，这样会方便你记忆棋子的顺序。因为第一个版本是 svg 格式的，所以棋子得是一个 text 格式的，这时候自然而然就想到了 Unicode，而 Unicode 里面有一整套这个字符，你甚至能够找到中国象棋，以及日本将棋的。
Unicode
| Piece Name | Hex | Code Point | Symbol |
|---|---|---|---|
| White King | #x2654; | U+2654 | ♔ |
| White Queen | #x2655; | U+2655 | ♕ |
| White Bishop | #x2657; | U+2657 | ♗ |
| White Knight | #x2658; | U+2658 | ♘ |
| White Rock | #x2656; | U+2656 | ♖ |
| White Pawn | #x2659; | U+2659 | ♙ |
| Black King | #x265A; | U+265A | ♚ |
| Black Queen | #x265B; | U+265B | ♛ |
| Black Bishop | #x265D; | U+265D | ♝ |
| Black Knight | #x265E; | U+265E | ♞ |
| Black Rock | #x265C; | U+265C | ♜ |
| Black Pawn | #x265F; | U+265F | ♟ |
可以用 <span>♞</span> 展示出棋子。而 svg 格式的如下
<g
width={gridSize}
height={gridSize}
key={`${rowIndex}-${colIndex}`}
>
<rect
x={colIndex * gridSize}
y={rowIndex * gridSize}
width={gridSize}
height={gridSize}
style={{ fill: col === 1 ? blackGrid : whiteGrid }}
/>
<text
x={gridSize / 2 + gridSize * colIndex}
y={gridSize / 2 + gridSize * rowIndex}
dominantBaseline="middle"
textAnchor="middle"
fontSize={fontSize}
stroke={blackPieceColor}
opacity={0.8}
>
♚ // 这里需要特别注意下 ⚠️
</text>
</g>
这样就是一个完整的格子了，rect 用来表示方格，text 用来表示方格里面的棋子。在这里有一个需要注意的地方，上面那个黄色的 Warning 提示部分，在 React 代码中你不能够直接写 <span>♞</span> ，这样是不会生效的。你需要像下面代码中那样使用，这也是我为什么在表格中把 Code Point 也列出来了，或者你可以直接把那个字符打出来。
<div>{'First \u00b7 Second'}</div>
// 或者
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
图片
以上方式其实并没有问题，但是因为在不同系统上面，Unicode 展示的并不是统一的，这也是我后来在手机上（iOS 15.4）看黑色的兵会比白色的兵大上两号。所以最终只能够使用图片的方式来展示这些棋子，毕竟这个兼容性是没有问题的，也不会受到系统字体的影响。最后这些棋子的变量就会像下面这样展示。
export const WHITE = {
pawn: '♙',
rock: '♖',
knight: '♘',
bishop: '♗',
queen: '♕',
king: '♔',
pawn_img: WHITE_PAWN,
rock_img: WHITE_ROCK,
knight_img: WHITE_KNIGHT,
bishop_img: WHITE_BISHOP,
queen_img: WHITE_QUEEN,
king_img: WHITE_KING,
}
export const BLACK = {
pawn: '♟',
rock: '♜',
knight: '♞',
bishop: '♝',
queen: '♛',
king: '♚',
pawn_img: BLACK_PAWN,
rock_img: BLACK_ROCK,
knight_img: BLACK_KNIGHT,
bishop_img: BLACK_BISHOP,
queen_img: BLACK_QUEEN,
king_img: BLACK_KING,
}
