Log in

View Full Version : Making a board that you can move around on (javascript)


keyboard
08-26-2012, 01:11 AM
Hello everyone!

I have this code -


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr id="row1">
<td id="s1"></td>
<td id="s2"></td>
<td id="s3"></td>
<td id="s4"></td>
<td id="s5"></td>
<td id="s6"></td>
<td id="s7"></td>
<td id="s8"></td>
<td id="s9"></td>
<td id="s10"></td>
</tr>
<tr id="row2">
<td id="s11"></td>
<td id="s12"></td>
<td id="s13"></td>
<td id="s14"></td>
<td id="s15"></td>
<td id="s16"></td>
<td id="s17"></td>
<td id="s18"></td>
<td id="s19"></td>
<td id="s20"></td>
</tr>
<!--ETC-->
</table>
</body>
</html>


I want to have a image that sits in one square at a time. Then when you click certain keys (Left Arrow, Right Arrow, Up Arrow, Down Arrow) it moves in that direction. (When you hold the key it doesnt continue moving).
It also needs to stop when it hits the border...
Thanks,
keyboard1333
djr33
08-26-2012, 01:45 AM
Possible, but really complicated. Your "code" is just the bare minimum of the HTML, while all of the complexities would be in the JS.

I'd recommend instead using a background and then moving the object by pixel offsets so you can use math rather than listing out individual table cells to go to. (In theory you could use math on a table too, but it's much more complicated and less intuitive.)

There's a dragging script here on DD you could use for some ideas (based on my version), or you could look for a chess/checkers game in JS, which might use a table.

If you don't follow my version, then I strongly suggest labeling the <td> elements as coordinates (eg, id="2-7" or id="3-5") in a grid so you can still use math.
keyboard
08-26-2012, 02:09 AM
I was planning on using a table because I want to be able to dyamically add "rooms" to the game as it goes on...
How would labeling them as co-ordinates help with the math???
djr33
08-26-2012, 05:42 AM
Currently s1 is next to s11. That's not very easy to predict. (Actually, it's easy enough if you happen to be using 10x10. And it's still possible if you don't, but the math just gets a little more tricky.)

If you want to move, let's say, one space over and three spaces up, then it's very easy if you have coordinates. If you don't, you'll need to do that SAME math, but within the context of translating it to the names of those locations. More work, no benefit.
keyboard
08-26-2012, 05:51 AM
Ahh... ok
But how would you separte the two co-ordinates?
E.g. if you wanted to move up one accross (left) one you'd have to change
3-5
to
4-4

How would you do that?
djr33
08-26-2012, 05:56 AM
Geometry, and just split the string at the -.