jquery - 如何让图像移动到下一个单元格

Question

我正在尝试制作迷宫，并且正在使用一张桌子。我希望它通过键盘控件进行控制（左=移动到下一个单元格，下=移动到下一行，等等......）。查询可以吗？它必须移动到表格中的特定单元格。

Answer 1

我能想到的最简单的方法是将所有元素设置为position: absolute而不是将它们放入表格中。因为如果 is 更容易移动position: absolute。

移动时，您将需要$.animate动画效果。您需要自己计算（我认为这并不难）并设置如下参数：

$('.block').click(function() {
    $(this).animate({
        left: 100,
        top: 200
    }, 3000); // animation time is 3 seconds
});

Answer 2

好的，这就是你可以做的，说起点是表中的第一个 tr 和 td 。我只是要做这种蛇风格，其中玩家的位置是 td 是红色背景的地方。您可以设置填充以使框更大。

确定 2 个变量，tr 和 td。将两者都设置为 0。背景设置为红色。

使用 jquery 来检测上下左右的按下。如果正确，td+=1。如果离开，td-=1。如果向上，则 tr+=1，如果向下，则 tr+=1。然后通过指定条件设置墙壁。如果 tr == 0 和 to == 0 则不能行走，因为有一堵墙。然后你也应该把那个单元格变成蓝色或其他东西，因为它是一堵墙。您可以通过使用第 n 个子选择器和 .css 来做到这一点，如下所示。

要知道您在哪个框，请使用第 n 个子选择器和 .css。

要选择第一行第二个单元格， $('table tr:nth-child(1) td:nth-child(2)').css([do some changes to css here]); 你可以设置里面的背景颜色。

对于墙，您可以在包含 tr 和 tds 的数组中设置预先确定的值并将它们循环出来并为每个放置一个 .css() 以将单元格变为蓝色。

我在手机上输入所有这些。我希望我很清楚。如果您需要进一步解释，请告诉我。