在棋盘上拖动画布图像/棋子

Question

我正在尝试使用 Javascript(ES 6) 和 Canvas 构建一个国际象棋游戏。 我已经建立了一个基本的棋盘，并在上面渲染了棋子。 现在我打算点击棋子或拖动它进行移动。

document.addEventListener('click',board_click)

或

canvas.addEventListener('click', board_click, false);

是我设法收听这些事件的方式。

现在我怎么知道我点击了哪里？我想我可以尝试获取点击的当前位置，但我怎么知道当前位置有什么项目。 任何库或已经实现的逻辑也会有所帮助

我已经这样渲染了我的棋子

const drawPawns = (white, black, ctx, boardDimension, allPieces) => {
  const rows = [0, 1, 2, 3, 4, 5, 6, 7];
  const cols = [1, 6];
  let pawn;
  let side;
  // boardDimension  = 90;
  cols.forEach((col) => {
    rows.forEach((row) => {
      // pawn = Pawn.call(this, 'black');
      side = col === 1 ? 'black' : 'white';
      // That little tinkering is to center align the Pawn in the tile
      pawn = new Pawn(side, row * boardDimension + 30, col * boardDimension + 5, true);
      spriteImage.draw(ctx, pawn.canvasPosition, pawn.x, pawn.y);
      allPieces.push(pawn);
    });
  });
};

pawn.canvasPostion 用于绘制图像（使用 Sprite），而 x 和 y 是其坐标所在的位置。现在我将如何获得这个特定的坐标？

Answer 1

侦听器回调（您的board_click 函数）获取浏览器事件作为参数。这个event object包含一堆数据，包括被点击的元素和点击的坐标。

由于您使用的是画布，因此您应该在画布元素上附加点击侦听器。画布没有状态图，这意味着它没有画布中对象的概念——它只是一堆像素。这意味着您有责任跟踪哪一块在哪里。

由于您已经将棋子放在棋盘上，因此您确切地知道它们在哪里！

执行此操作的正常方法是获取单击位置，将其映射到板上的网格单元格，然后检查该单元格上是否有任何东西。这将如何发生取决于描述您的游戏的数据结构。

为了说明的目的，我们假设棋子位于一个数组中，并且每个棋子都知道它的单元坐标（对于国际象棋，相反的做法可能是有意义的 - 每个 单元 都知道它是否有一块，但请耐心等待）。

var cellSize = 16; // let's assume a cell on your board is 16x16 pixels
var pieces = []; // this keeps all chess pieces

function board_click(evt) {
    // get cell coordinates
    var cellX = Math.floor(evt.clientX/cellSize);
    var cellY = Math.floor(evt.clientY/cellSize);

    var piece = pieces.find((p) => {
        return p.x == cellX && p.y == cellY;
    });

    if (piece) {
        // a piece was clicked
    } else {
        // an empty cell was clicked
    }
}

我希望这足以让你开始。

编辑：忘记将鼠标坐标除以单元格大小...