Javascript html桌面游戏防止玩家穿越空瓷砖

我正在尝试使用HTML表格和纯javascript编写一个棋盘游戏。我正在使用类

.ground

和

.empty

来定义哪些瓷砖是电路板的一部分，哪些瓷砖不是

<tr>
  <td class="ground">7</td>
  <td class="empty">(8)</td>
  <td class="empty">(9)</td>
  <td class="ground">10</td>
</tr>

我的问题是防止

#player

div在移动到单击的互动程序时跨越

.empty

互动程序。例如，当我单击磁贴22时，

#player

将穿过不属于板的磁贴（8）和（15）。 简单地禁用对角线移动不会解决问题，因为它不会阻止玩家水平或垂直穿过空瓷砖

我想我需要我的函数来“知道”玩家在移动时是否要穿过一个空磁贴，方法是将其位置与.empty tiles位置进行比较，但我不知道如何做到这一点，或者如果不使用canvas（我不想使用canvas），是否有可能做到这一点

不使用canvas或第三方库，我尝试做的事情是否可行？还是我必须采用不同的方法

---

此处演示：

如果不使用canvas或第三方库，您的方法肯定是可行的。您的所有单元格（框）都是固定的，因此您应该能够轻松地计算在红色框实际移动之前是否会穿过空单元格。有多种方法可以实现这一点。顺便说一句，从零开始做这件事太棒了！非常感谢。我仍在努力提高javascript，所以这个项目对我来说是一个很好的学习方式。我仍然不确定如何检测红盒是否穿过空单元格。我尝试将空单元格位置存储在数组中，同时使用setTimeout函数检查播放器偏移量是否与它们发生冲突，但它并没有像我预期的那样工作。我想处理这个问题的最好方法是编写一个函数，在玩家开始移动之前计算玩家的路径，但这正是我被卡住的地方。如果您有任何建议或我可能阅读的文档，我将不胜感激。您可以允许播放器仅在水平或垂直线上移动，并在幻灯片之间签入是否为空。。这可能有助于您的方法在没有画布或第三方库的情况下绝对可行。您的所有单元格（框）都是固定的，因此您应该能够轻松地计算在红色框实际移动之前是否会穿过空单元格。有多种方法可以实现这一点。顺便说一句，从零开始做这件事太棒了！非常感谢。我仍在努力提高javascript，所以这个项目对我来说是一个很好的学习方式。我仍然不确定如何检测红盒是否穿过空单元格。我尝试将空单元格位置存储在数组中，同时使用setTimeout函数检查播放器偏移量是否与它们发生冲突，但它并没有像我预期的那样工作。我想处理这个问题的最好方法是编写一个函数，在玩家开始移动之前计算玩家的路径，但这正是我被卡住的地方。如果您有任何建议或我可能阅读的文档，我将不胜感激。您可以允许播放器仅在水平或垂直线上移动，并在幻灯片之间签入是否为空。。这可能会有帮助

for (var i = 0; i < board.length; i++) {
    board[i].addEventListener('click', playerMove, false);
}
function playerMove(e) {
    player.style.position = "absolute";
    player.style.top = e.target.offsetTop + 10 + "px";
    player.style.left = e.target.offsetLeft + 10 + "px";
}