用 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);
  }
}

至此，我们就完成了象棋棋盘和棋子的绘制。下一篇，我们将讲解如何实现棋子的移动和游戏规则。