Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2007
    Thanked 0 Times in 0 Posts

    Trying to move a image around a grid!


    I have a script which uses an array of numbers to represent their position in a div.

    its 5 by 5 like so:

       tileMap = [
       [1, 1, 1, 1, 1], 
       [1, 1, 1, 1, 1], 
       [1, 1, 1, 1, 1],
       [1, 1, 1, 1, 1],
       [1, 1, 1, 1, 1],
       images = new Array();
       images[1] = "no block";
       images[3] = "brick.PNG";
    Image[1] means you can move on the tile, 3 means you cannot (aka a collision).

    Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement.

    But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons.

    I use this to detect the key button pressed:

       function handleKeyMovement(keyValueDown)
             case 97: //A Move Left
              //move it left 
             case 100: //D Move Right
               //move it right
             case 119: //W Move Up
               //move it up
             case 115: //S Move Down
               //move it down
                break;       }
    p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement.

    Is it possible?

    Hope you can help !
    Last edited by SirChick; 12-18-2010 at 01:39 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,732 Times in 4,694 Posts
    Move WHAT image??? I assume *not* "brick.png" since it's the tile you can not move onto. Though how you know WHICH tile currently hold "brick.png" I surely can't see from that code.

    As for smooth movement: Worry about that *AFTER* you get the other code working.

    And how does your tileMap array relate to your <div>?? How big is the <div>? How big is each tile?

    Ahhh...I have many many more questions. You have provided way too little to go on. Try again?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


    Posting Permissions

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