Question

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

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是其坐标所在的位置。现在我如何得到这个特殊的Coor纵坐标？

Answer 1

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

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

由于您已经将这些碎片放在纸板上，因此您确切知道它们的位置！

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

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

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

我希望这足以让你开始。

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

在国际象棋棋盘上拖动画布图像/片段

1 个答案: