Question

我希望在chessboard.js中突出旧动作和新动作，基本上任何人都应该知道对手已经转移到哪个位置。

Answer 1

无论您使用的后端国际象棋引擎如何，我都可以通过图像访问两个坐标，例如e2和e4来源和目标：

定义用于突出显示正方形的CSS类
删除＆＃39;突出显示＆＃39;来自任何其他广场的课程
找到移动源或目标的平方
将高亮类添加到目标或源方

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

否则，这是用于突出显示玩家在vanilla 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类：

     // 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中突出显示旧动作

1 个答案: