“I am participating in the nuggets Community Game Creativity Submission Contest. For details, please see: Game Creativity Submission Contest.”
Code repository, go by and click a Star ✨
In the previous paragraph, I wrote how to write a checkerboard. Then the next is to place chess pieces up, white in the bottom, black in the top, the first row is a pawn, the second row is che, horse, elephant, queen, king, elephant, horse, car. There is a rule that the black queen is on the black grid and the white queen is on the white grid. This will help you remember the order of the pieces. Since the first version was in SVG, the chess pieces had to be in text format, which naturally led to Unicode, which has a whole set of characters in it. You can even find Chinese chess and Japanese chess.
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 | ♟ |
You can use the < span > & # x265E; Show the pieces. The SVG format is as follows
<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} Opacity = 0, opacity= 0, opacity= 0, opacity= 0, opacity= 0, opacity= 0, opacity= 0; ⚠️ </text> </g>Copy the codeThis is a complete grid, with rect for the grid and text for the pieces inside the grid. One thing to note here is that in the React code, you can’t just write ♞ , this will not work. You need to use it as in the following Code, which is why I have Code Point listed in the table, or you can just type that character.
<div>{'First '+ string.fromCharcode (183) +' Second'}</div>Copy the codeThe picture
This is fine, but Unicode is not displayed uniformly on different systems, which is why I later saw black pawns being two sizes larger than white pawns on mobile (iOS 15.4). In the end, only images can be used to display these pieces, after all, compatibility is not a problem, and the system font is not affected. Finally, the variables of these pieces are displayed as follows.
Export const WHITE = {pawn: '♙, rock:' ♖, knight: '♘, bishop:' ♗ ', the queen: '♕', the 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:' ♝ ', the queen: '♛', the 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, }Copy the code