-1

I am trying to make a maze, and I am using a table. I want it to be controlled with keyboard controls (left=move to next cell, down=move to next row, etc...). Is that possible with query? It has to be moved to a specific cell in the table.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Thomas Lai
  • 317
  • 1
  • 6
  • 15

2 Answers2

0

The easiest way I can think to so this is to set all elements to be position: absolute rather than put them into a table. Because it's easier to move if is position: absolute.

When moving, you will need $.animate for animation effect. You need to the calculation by yourself (I think it's not that difficult) and set the parameters like:

$('.block').click(function() {
    $(this).animate({
        left: 100,
        top: 200
    }, 3000); // animation time is 3 seconds
});
Ovilia
  • 7,066
  • 12
  • 47
  • 70
  • if it's `position:absolute`, it will be able to move anywhere, but I need it to stop when it tries to go through a wall in the maze – Thomas Lai Feb 13 '13 at 04:58
  • There are two ways you can choose. First, use `absolute` and calculate the position carefully and when it will go through a wall, stop it by not acting moving. Second, if you don't need the animation, just use `table` for all blocks. Then use something like `$('img').attr('src', 'swapped.png')`. – Ovilia Feb 13 '13 at 05:03
0

Ok this is what you can do, say starting point is the first tr and td in a table. I'm just going to do this snake style where the position of the player is where the td is a red background. You can set padding to make the boxes bigger.

Identify 2 variables, tr and td. Set both to 0. And background to red.

Use jquery to detect press of up down left or right. If right, td+=1. If left, td-=1. If up, tr+=1, if down, tr+=1. Then set that walls by specifying conditions. If tr == 0 and to == 0 then cannot walk because there is a wall. Then you should also turn that cell blue or something because it is a wall. You can do that by using the nth child selector and .css like below.

To know which box you are in, use the nth child selector and .css.

To select the first row second cell, $('table tr:nth-child(1) td:nth-child(2)').css([do some changes to css here]); and you can set inside the background colour.

For the wall, you can set pre determined values in an array containing tr and tds and loop them out and places a .css() for each to turn the cells blue.

I'm typing all this out on a mobile phone. I hope I was clear. Let me know if you need further explanation.

Seanbish
  • 41
  • 2
  • I just realized that you wanted an image. In that case, you can .append an image and .remove the image when the player leaves the cell and .append to the next cell. – Seanbish Feb 13 '13 at 05:20