javascript - 将 Canvas 图像/棋子拖动到棋盘上

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包含一堆数据，包括被点击的元素和点击的坐标。

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

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

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

出于说明目的，我们假设棋子驻留在一个数组中，并且每个棋子都知道其单元格坐标(对于国际象棋，做相反的操作可能是有意义的 - 每个单元格都知道它是否有上面有一部分，但请耐心等待)。

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
    }
}

我希望这足以让您开始。

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