我正在尝试制作自己的国际象棋分析板，以便在教授国际象棋时使用。我目前有棋盘，可以拖放的棋子，以及清除棋盘和设置不同棋盘位置的方法。我还可以单击方块以突出显示它们。
我希望能够将箭头从一个方格绘制到另一个方格以显示攻击线和影响线，但不知道如何实现这一点。我的板子是由<div>标签组成的。下面是一个简短的例子（为简洁起见，伪代码和实际代码）。
// 几个 CSS 样式来定义正方形的宽度、高度和颜色 CSS 样式类 "dark square" CSS 样式类 "light square"
//我的板子是由<div>标签组成的
<div id="board">
<div id="a1" class="lightsquare"></div>
<div id="a2" class="darksquare"></div>
<div id="a3" class="lightsquare"></div>
//second rank
<div id="b1" class="darksquare"></div>
<div id="b2" class="lightsquare"></div>
<div id="b3" class="darksquare"></div>
//third rank
<div id="c1" class="lightsquare"></div>
<div id="c2" class="darksquare"></div>
<div id="c3" class="lightsquare"></div>
</div>
我可以将棋子放在棋盘上，移动它们，拿走其他棋子，清除棋盘，设置独特的位置，并突出显示各个方块就好了，但也希望能够让用户点击、拖动和绘制箭头生活在棋盘上，同时仍然能够操纵棋盘上的棋子。
我曾考虑使用该标签，但根据我的阅读和研究，该<canvas>标签似乎并不是为满足我的需求而设计的。
有没有人对如何在 JavaScript 中做到这一点有任何想法？我还没有学会使用 JQuery，我宁愿避免使用 JQuery，因为我不想下载额外的文件或必须在互联网上使用这个程序。
使用html和javascript在棋盘上工作.我正在尝试添加一个功能,以便用户可以翻转电路板的视角并遇到我理解的故障,但无法弄清楚如何解决.代码如下....
function flipBoard(){
document.getElementById("a8").id = "h1";
document.getElementById("a7").id = "h2";
document.getElementById("a6").id = "h3";
document.getElementById("a5").id = "h4";
document.getElementById("a4").id = "h5";
document.getElementById("a3").id = "h6";
document.getElementById("a2").id = "h7";
document.getElementById("a1").id = "h8";
document.getElementById("h8").id = "a1";
document.getElementById("h7").id = "a2";
document.getElementById("h6").id = "a3";
document.getElementById("h5").id = "a4";
document.getElementById("h4").id = "a5";
document.getElementById("h3").id = "a6";
document.getElementById("h2").id = "a7";
document.getElementById("h1").id = "a8";
}
所以....我认为这样可以正常工作,但发现这会对我的电路板造成严重破坏,位于电路板两侧的半白色半黑块.问题当然是在原来的"a1"方块被重命名为"h8"之后,现在有两个"h8"方块,并且在代码的末尾它们都切换回"a1".
我不知道如何同时切换id名称,否则我必须添加一大堆代码,将id名称切换为第三个名称作为占位符,然后再切换到所需的名称.可能,但乏味,我觉得必须有一个更简单的方法来做到这一点.
有任何想法吗？