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

Question

我想强调的是旧的移动和新的移动在chessboard.js，基本上任何人都应该知道什么对手已经移动和从哪个位置。

Answer 1

不管您使用的是哪个后端国际象棋引擎，我想象您可以访问这两个坐标，比如e2和e4源和目标：

1. 定义用于突出显示正方形的CSS类。
2. 从任何其他方块中移除“突出显示”类
3. 找到移动源或目标的正方形
4. 将突出显示类添加到目标或源广场

文档有一个很好的示例(使用jquery)：http://chessboardjs.com/examples#5004

否则，下面的代码将突出显示玩家在香草Javascript中移动到的方块。

首先定义CSS，更完整的示例请参见国际象棋堆栈交换：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类：

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

为了实现源代码正方形和区分黑白，需要编写更多的代码，但它将遵循以下思路。