Results 1 to 6 of 6

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

  1. #1
    Join Date
    Mar 2011
    Location
    N 11░ 19' 0.0012 E 142░ 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

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

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2011
    Location
    N 11░ 19' 0.0012 E 142░ 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    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???

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Mar 2011
    Location
    N 11░ 19' 0.0012 E 142░ 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    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?

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Geometry, and just split the string at the -.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •