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

时间:2013-02-13 04:41:20

标签: jquery html cell tabular

我正在尝试制作一个迷宫,我正在使用一张桌子。我想用键盘控制来控制它(左边=移动到下一个单元格,向下移动到下一行等等)。这有可能与查询?必须将其移动到表中的特定单元格。

2 个答案:

答案 0 :(得分:0)

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

移动时,您需要$.animate才能获得动画效果。你需要自己计算(我认为这并不困难),并设置如下参数:

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

答案 1 :(得分:0)

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

识别2个变量tr和td。将两者都设置为0.并将背景设置为红色。

使用jquery检测左上或右下按。如果正确,td + = 1。如果离开,则td- = 1。如果向上,tr + = 1,如果向下,tr + = 1。然后通过指定条件来设置墙。如果tr == 0并且= = 0则因为有墙而无法行走。然后你也应该将那个细胞变成蓝色或者某种东西,因为它是一堵墙。您可以使用第n个子选择器和.css(如下所示)来完成此操作。

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

要选择第一行第二个单元格, $('table tr:nth-​​child(1)td:nth-​​child(2)')。css([对css做一些修改]);你可以设置背景颜色。

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

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