用 Canvas 画一盘象棋（一）：绘制棋盘和棋子
前言
最近想要尝试制作一个小游戏，第一个想到的就是象棋。作为经典的策略棋类游戏，象棋自古以来就深受人们喜爱。因此，我决定用 JavaScript 来实现一个象棋游戏。本系列文章将记录整个实现过程，欢迎大家共同探讨。
一、绘制棋盘
象棋棋盘是一个 9x10 的方格，其中 9x9 的部分为棋盘主体，第 10 行和第 1 行各为楚河和汉界。
// 创建 Canvas 元素
const canvas = document.createElement('canvas');
// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');
// 设置 Canvas 尺寸
canvas.width = 540;
canvas.height = 600;
// 绘制楚河汉界
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 540, 20);
ctx.fillRect(0, 580, 540, 20);
// 绘制棋盘格线
for (let i = 0; i < 10; i++) {
ctx.moveTo(0, i * 60 + 20);
ctx.lineTo(540, i * 60 + 20);
ctx.stroke();
}
for (let i = 0; i < 9; i++) {
ctx.moveTo(i * 60, 20);
ctx.lineTo(i * 60, 580);
ctx.stroke();
}
二、绘制棋子
接下来，我们绘制棋子。象棋中有 32 个棋子，每一方有 16 个。
// 棋子形状
const chessPieces = {
卒: '帥',
兵: '将',
士: '士',
象: '象',
馬: '馬',
車: '車',
炮: '砲',
將: '將',
士: '仕',
象: '相',
馬: '傌',
車: '俥',
炮: '炮',
帥: '帥',
兵: '卒',
};
// 绘制棋子
for (let i = 0; i < 9; i++) {
for (let j = 0; j < 10; j++) {
if (i === 0 || i === 9 || j === 0 || j === 9) {
continue;
}
const piece = chessPieces[chessboard[i][j]];
ctx.fillStyle = '#000';
ctx.font = '20px Arial';
ctx.fillText(piece, i * 60 + 15, j * 60 + 35);
}
}
至此，我们就完成了象棋棋盘和棋子的绘制。下一篇，我们将讲解如何实现棋子的移动和游戏规则。