Making a board that you can move around on (javascript)

**keyboard** · 08-26-2012, 01:11 AM

Hello everyone!

I have this code -

HTML 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 -.

Thread: Making a board that you can move around on (javascript)

Thread Tools

Search Thread

Making a board that you can move around on (javascript)

Bookmarks

Bookmarks

Posting Permissions