如何使用JavaScript从画布上的棋盘中移动棋子/图像？

我正在使用画布和JavaScript代码创建一个跳棋游戏，如何移动棋盘上的棋子

我已经创建了整个电路板，并将单独的部分创建为函数，现在我的问题是将这些部分移动到整个电路板上。我尝试了很多代码，但仍然无法处理带有事件的部分

var pieces = [];
var InitGrid = 3;
var gridHeight = 8;
var BlackPieces = "#000000";
var WhitePieces = "#ffffff";
var canvas;
var ctx;


function Box(row, column, color) {
  this.row = row;
  this.column = column;
  this.color = color;
}

function Draw(lienzo) {

  canvas = lienzo;
  ctx = canvas.getContext("2d");


  for (var i = 0; i < InitGrid; i++) {
    for (var j = (i + 1) % 2; j < gridHeight; j = j + 2) {
      pieces.push(new Box(i, j, BlackPieces));
    }
  }

  for (var i = gridHeight - 1; i >= gridHeight - InitGrid; i--) {
    for (var j = (i + 1) % 2; j < gridHeight; j = j + 2) {
      pieces.push(new Box(i, j, WhitePieces));
    }
  }

  paintGrid();

}

function paintGrid() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var x = 0; x <= canvas.width; x += 50) {
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.width);
  }

  for (var y = 0; y <= canvas.height; y += 50) {
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.height, y);
  }

  ctx.strokeStyle = "Black";
  ctx.stroke();

  for (var i = 0; i < pieces.length; i++) {
    paintPlayer(pieces[i], pieces[i].color);
  }


}

function paintPlayer(p, color) {
  ctx.beginPath();
  ctx.arc(25 + p.column * 50, 25 + p.row * 50, 19, 0, (Math.PI * 2), true);
  ctx.stroke();
  ctx.fillStyle = color;
  ctx.fill();
}

var片段=[]；
var InitGrid=3；
var-gridHeight=8；
var BlackPieces=“#000000”；
var WhitePieces=“#ffffff”；
var帆布；
var-ctx；
功能框（行、列、颜色）{
this.row=行；
this.column=列；
这个颜色=颜色；
}
函数绘制（lienzo）{
画布=连佐；
ctx=canvas.getContext（“2d”）；
对于（var i=0；i=gridHeight-InitGrid；i--）{
对于（var j=（i+1）%2；j对于（var x=0；x，您可以将事件侦听器添加到画布中，以监视
pointerdown
事件

const colCount = 8;
const rowCount = 8;
const colSize = canvas.width / colCount;
const rowSize = canvas.height / rowCount;

canvas.addEventListener('pointerdown', e => {
  const col = Math.floor(e.offsetX / colSize);
  const row = Math.floor(e.offsetY / rowSize);

  /* If there's a piece at the given column/row,
     the user can now drag it to a new location */
});

您需要添加相应的
pointerup
事件，以确定播放器将棋盘放入棋盘上的哪个单元格