如何让图像移动到下一个单元格答案

【问题标题】：How to get image to move to next cell如何让图像移动到下一个单元格
【发布时间】：2013-02-13 04:41:19
【问题描述】：

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

【问题讨论】：

到目前为止您尝试过什么？用一些演示代码澄清你的问题是一种很好的做法。
对不起，谁能给我一些代码，至少如何将图像移动到另一个单元格上？

【解决方案1】：

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

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

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

【讨论】：

如果是position:absolute，它可以移动到任何地方，但是当它试图穿过迷宫中的墙壁时我需要它停下来
您可以选择两种方式。首先，使用absolute并仔细计算位置，当它要穿过墙壁时，不要做动作来阻止它。其次，如果您不需要动画，只需对所有块使用table。然后使用$('img').attr('src', 'swapped.png')之类的东西。

【解决方案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([在这里对css做一些修改]);你可以设置里面的背景颜色。

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

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

【讨论】：

我刚刚意识到你想要一张图片。在这种情况下，您可以 .append 图像并在玩家离开单元格时 .remove 图像并 .append 到下一个单元格。