Question

我正在尝试使用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>

玩家只能使用他想要的任何方向移动到.ground牌：

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";
}

我的问题是阻止#player div在移动到点击的图块时越过.empty图块。例如，当我单击tile 22时，#player将跨越tile（8）和（15），它们不是棋盘的一部分。简单地禁用对角线移动不会解决问题，因为它不会阻止玩家水平或垂直穿过空的瓷砖。

我想我需要我的功能'知道'玩家是否要通过将其位置与.empty瓷砖位置进行比较而在移动时移动空砖，但我不知道该怎么做或是否是甚至可以不使用画布（我不想使用它）。

如果不使用画布或第三方库，我是否正在努力做到这一点？或者我必须采用不同的方法吗？

在这里演示：https://jsfiddle.net/Lau1989/t40tq2ur/1/

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

0 个答案: