突出显示 chessboard.js 中的旧动作

Question

我想强调 chessboard.js 中的旧着法和新着法，基本上谁都应该知道对方移动到了什么位置，从什么位置移动了。

Answer 1

无论您使用的是哪种后端国际象棋引擎，我认为您可以访问两个坐标，例如 e2 和 e4 源和目标：

定义一个 CSS class 用于高亮正方形
从任何其他方块中删除 'highlight' class
求移动源或目标的方格
向目标或源方块添加高亮 class

文档有一个很好的例子（jquery）：http://chessboardjs.com/examples#5004

否则，这里是在原版中突出显示玩家移动到的方格的代码 Javascript

首先定义 CSS，查看 chess stackexchange 以获得更完整的示例：https://chess.stackexchange.com/questions/15265/how-to-highlight-current-and-previous-move-of-the-player-in-chessboard-js:

.highlight {
   -webkit-box-shadow: inset 0 0 3px 3px green;
   -moz-box-shadow: inset 0 0 3px 3px green;
   box-shadow: inset 0 0 3px 3px green;
}

因此，例如，清除您已完成的所有其他突出显示（参见Remove CSS class from element with JavaScript (no jQuery)）：

     var hl = document.getElementsByClassName("highlight");
     if (hl[0] != undefined) { 
       hl[0].className = hl[0].className.replace(/\bhighlight\b/g,'');
     }

和找到玩家移动到的方格然后添加 highlight class:

     // I'm assuming you have a data object with target field
     var sq = document.getElementsByClassName("square-" + data.target);
     sq[0].className += " highlight"; // Remember to add a space before

为了实现源码方块，区分黑白，还有一些代码要写；但它会沿着这些路线。

突出显示 chessboard.js 中的旧动作

Highlight old move in chessboard.js

chessboard.js