使用国际象棋在 JS 中等待用户输入

Question

我不确定我的国际象棋编程项目下一步该往哪里走，我已经到了把棋子放在棋盘上的地步，每个棋子都有一个 ID 和一个位置，这样我就可以调用每个棋子和那样做逻辑。

我对应该如何处理用户输入感到很困惑，所以我想要某种监听器等待用户点击 table 元素，在他们点击某些元素我希望棋盘突出显示棋子可以进入的某些区域（它自己的功能，我不是在寻求有关此功能的帮助，而是帮助用户输入），如果用户单击其中一个突出显示的位置，则一块移动到那里。

我只是不知道这种类型的输入是如何工作的，在调用某个函数之前我是否有监听器？任何帮助将不胜感激。

这是一个元素外观的示例，它位于棋盘数组的 [2][3] 处，棋子是用 Pb 表示的黑色棋子。

<td class="black" id="23" onclick="divClickInfo(this)"></td>

因此，当 divClickInfo(this) 在 JS 中为运行时，我希望发生某些操作，并且在该函数中我想等待查看用户是否点击了另一块，或者点击了一个突出显示的片段，然后该片段移动到，或者用户再次单击同一片段，它就会刷新很多。

我只是在等着看用户是否执行了某个操作，我听说过听众，但我做了一些研究，但找不到我真正需要的东西。如果有人能帮助我，那将意义重大，这将大大推动我的项目，感谢阅读我的 post.

如果您想进一步了解，这里是代码 https://codepen.io/anon/pen/WaxXMj

Answer 1

您不需要听众（除了您已有的 divClickInfo）。如果您不想使用 drag/drop，只需在他们点击时存储一个变量，例如 pieceMoving 他们试图移动的棋子。当他们随后点击另一个方块时，尝试将该棋子移动到新方块。做这样的事情：

var pieceInfo = null;
function divClickInfo(this) {
    if (pieceInfo === null) {
        //They clicked on a piece they're intending to move
        //Set cell red
        pieceInfo = this.id
    } else {
        //They clicked on another square, and are attempting to move.
        if (this.id == pieceInfo) {
            //Clicked on same square
            //Set cell not red
        } else {
            //Logic here, see if piece can be moved to this square
            //If it can, move the piece (Take any other piece that may be here)
            //Otherwise, show an error?
        }
        //No longer moving a piece
        pieceInfo = null
    }
}

使用国际象棋在 JS 中等待用户输入

Waiting for user input inside of JS using chess

javascript

chess