Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Javascript map array

    Ok, So I want to create a game that uses an array to create a map. Each letter specifies a 50x50 px division.

    map Array =[[a,a,a,b,b,a,a],
    [a,a,a,b,b,a,a],
    [a,a,b,b,a,a,a],
    [a,a,b,b,a,a,a]];

    I want my guy who is a absolutely positioned and 50x50 px. I want him to move along the path of the variable b which is going to be the path or road. "a" will be the grass that the guy cannot go on. How do I write the collision detection for this little game?

    Thanks for your help.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,298
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by pdiddles03 View Post
    I want my guy who is a absolutely positioned and 50x50 px. I want him to move along the path of the variable b which is going to be the path or road. "a" will be the grass that the guy cannot go on. How do I write the collision detection for this little game?
    .
    Code:
    GAME=(function _game(){
    
    var a=0, 
        b=1,
        GAME={ pos: [0,0] };
    
    
    
    GAME.map =[ /*
        COLUMN
     0,1,2,3,4,5,6   */
    [a,a,a,b,b,a,a], // 0  R
    [a,a,a,b,b,a,a], // 1  O
    [a,a,b,b,a,a,a], // 2  W
    [a,a,b,b,a,a,a]  // 3
    ];
    
    GAME.onPosChange=function _draw(e){ //demo-level example
       alert("Current position: " + GAME.pos);
    }
    
    GAME.move=function move(addRow, addCol){
      addCol= +addCol || 0;
      addRow= +addRow || 0;
      var tmpPos=[GAME.pos[0]+ addRow, GAME.pos[1]+ addCol  ];
      if( Math.abs(addRow)>1 ||  Math.abs(addCol)>1   ){ return false; }
      if(GAME.map[tmpPos[0]][tmpPos[1]]){
         GAME.pos[0]=tmpPos[0];
         GAME.pos[1]=tmpPos[1];
         GAME.onPosChange();
        return GAME.pos;
      }
     return false;
    }
    
     return GAME;
    }());
    
    
    GAME.pos=[ 0, 3 ] // (row #, col #)
    GAME.move(0,-1); // no
    GAME.move(1,0);  // 1,3
    GAME.move(0,-1); // no
    GAME.move(0,-1); // no
    GAME.move(0,-1); // no
    GAME.move(0,1);  // 1,4
    GAME.move(1,-1); // 2,3
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    One more question, how do you display the array without using document.write. I don't want the HTML5 way. If i use document.write, I get abunch of commas I can't remove. I can remove like 3 of them using .join but that's it.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Code:
    <style type="text/css">
    div#themap { 
        position: relative; 
    }
    div#themap div { 
        position: absolute;
        width: 50px;
        height: 50px;
    }
    .grass {
        background-color: green;
    }
    .path {
        background-color: lightgrey;
    }
    </style>
    ...
    <div id="themap"></div>
    ...
    <script type="text/javascript">
    ...
    GAME.map =[ 
        [a,a,a,b,b,a,a], 
        [a,a,a,b,b,a,a], 
        [a,a,b,b,a,a,a], 
        [a,a,b,b,a,a,a]  
    ];
    ...
    GAME.draw = function() {
        var gamemap = document.getElementById("themap");
        for ( var row = 0; row < GAME.map.length; ++row )
        {
            var maprow = GAME.map[row];
            for ( var col = 0; col < maprow.length; ++col )
            {
                var cell = document.createElement("div");
                cell.style.top = ( row * 50 ) + "px";
                cell.style.left = ( col * 50 ) + "px";
                cell.className = maprow[col] == "a" ? "grass" : "path";
                gamemap.appendChild(cell);
            }
        }
    } // end of draw function
    ...
    That's just an example. You would surely want to tweak it to your own usage.
    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.

  • #5
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    <style type="text/css">
    div#themap { 
        position: relative; 
    }
    div#themap div { 
        position: absolute;
        width: 50px;
        height: 50px;
    }
    .grass {
        background-color: green;
    }
    .path {
        background-color: lightgrey;
    }
    </style>
    ...
    <div id="themap"></div>
    ...
    <script type="text/javascript">
    ...
    GAME.map =[ 
        [a,a,a,b,b,a,a], 
        [a,a,a,b,b,a,a], 
        [a,a,b,b,a,a,a], 
        [a,a,b,b,a,a,a]  
    ];
    ...
    GAME.draw = function() {
        var gamemap = document.getElementById("themap");
        for ( var row = 0; row < GAME.map.length; ++row )
        {
            var maprow = GAME.map[row];
            for ( var col = 0; col < maprow.length; ++col )
            {
                var cell = document.createElement("div");
                cell.style.top = ( row * 50 ) + "px";
                cell.style.left = ( col * 50 ) + "px";
                cell.className = maprow[col] == "a" ? "grass" : "path";
                gamemap.appendChild(cell);
            }
        }
    } // end of draw function
    ...
    That's just an example. You would surely want to tweak it to your own usage.
    Do you think you could elaborate on your code with more explanation? thanks!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Ummm...it's really pretty basic.

    What you are going to END UP with is something that looks like this:
    Code:
    <div id="themap">
        <!-- first row -->
        <div class="path" style="top: 0px; left: 0px;"></div>
        <div class="path" style="top: 0px; left: 50px;"></div>
        <div class="path" style="top: 0px; left: 100px;"></div>
        <div class="grass" style="top: 0px; left: 150px;"></div>
        <div class="grass" style="top: 0px; left: 200px;"></div>
        <div class="path" style="top: 0px; left: 250px;"></div>
        <div class="path" style="top: 0px; left: 300px;"></div>
        <!-- second row -->
        <div class="path" style="top: 50px; left: 0px;"></div>
        <div class="path" style="top: 50px; left: 50px;"></div>
        <div class="path" style="top: 50px; left: 100px;"></div>
        <div class="grass" style="top: 50px; left: 150px;"></div>
        <div class="grass" style="top: 50px; left: 200px;"></div>
        <div class="path" style="top: 50px; left: 250px;"></div>
        <div class="path" style="top: 50px; left: 300px;"></div>
        <!-- third row -->
        <div class="path" style="top: 100px; left: 0px;"></div>
        <div class="path" style="top: 100px; left: 50px;"></div>
        <div class="grass" style="top: 100px; left: 100px;"></div>
        <div class="grass" style="top: 100px; left: 150px;"></div>
        <div class="path" style="top: 100px; left: 200px;"></div>
        <div class="path" style="top: 100px; left: 250px;"></div>
        <div class="path" style="top: 100px; left: 300px;"></div>
        <!-- fourth row -->
        <div class="path" style="top: 150px; left: 0px;"></div>
        <div class="path" style="top: 150px; left: 50px;"></div>
        <div class="grass" style="top: 150px; left: 100px;"></div>
        <div class="grass" style="top: 150px; left: 150px;"></div>
        <div class="path" style="top: 150px; left: 200px;"></div>
        <div class="path" style="top: 150px; left: 250px;"></div>
        <div class="path" style="top: 150px; left: 300px;"></div>
    </div>
    The outer <div> is position: relative so that all the inner ones can be position: absolute and so end up at the right locations.

    The JS code is thus dirt simple:
    Code:
    ...
    GAME.map =[ 
        [a,a,a,b,b,a,a], 
        [a,a,a,b,b,a,a], 
        [a,a,b,b,a,a,a], 
        [a,a,b,b,a,a,a]  
    ];
    ...
    GAME.draw = function() {
        // we will put all the small <div>s inside of "themap" div:
        var gamemap = document.getElementById("themap");
    
        // we get each row of the GAME.map array, one at a time:
        for ( var row = 0; row < GAME.map.length; ++row )
        {
            // this, then is one row:
            var maprow = GAME.map[row];
            // for example, the first row is the array [a,a,a,b,b,a,a]
    
            // and then we get each column in that row
            for ( var col = 0; col < maprow.length; ++col )
            {
                // we create a new <div> (one of the inner <div>s from diagram above
                var cell = document.createElement("div");
                // we position it...its top is 50pixels times its row number
                cell.style.top = ( row * 50 ) + "px";
                // its left is 50pixels times its column number
                cell.style.left = ( col * 50 ) + "px";
                // it is either "grass" (green background) or "path" (grey)
                // depending on what letter was in the array:
                cell.className = maprow[col] == "a" ? "grass" : "path";
                // and then we simply make this 50x50 cell a child <div> of the outer <div>
                gamemap.appendChild(cell);
            } // loop on the columns
        } // loop on the rows
    } // end of draw function
    As I said, it's just an example. You could change the class names, letters used, size of the array, etc., etc. It's just showing how to create the small <div>s inside the large outer one.
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...it's really pretty basic.

    What you are going to END UP with is something that looks like this:
    Code:
    <div id="themap">
        <!-- first row -->
        <div class="path" style="top: 0px; left: 0px;"></div>
        <div class="path" style="top: 0px; left: 50px;"></div>
        <div class="path" style="top: 0px; left: 100px;"></div>
        <div class="grass" style="top: 0px; left: 150px;"></div>
        <div class="grass" style="top: 0px; left: 200px;"></div>
        <div class="path" style="top: 0px; left: 250px;"></div>
        <div class="path" style="top: 0px; left: 300px;"></div>
        <!-- second row -->
        <div class="path" style="top: 50px; left: 0px;"></div>
        <div class="path" style="top: 50px; left: 50px;"></div>
        <div class="path" style="top: 50px; left: 100px;"></div>
        <div class="grass" style="top: 50px; left: 150px;"></div>
        <div class="grass" style="top: 50px; left: 200px;"></div>
        <div class="path" style="top: 50px; left: 250px;"></div>
        <div class="path" style="top: 50px; left: 300px;"></div>
        <!-- third row -->
        <div class="path" style="top: 100px; left: 0px;"></div>
        <div class="path" style="top: 100px; left: 50px;"></div>
        <div class="grass" style="top: 100px; left: 100px;"></div>
        <div class="grass" style="top: 100px; left: 150px;"></div>
        <div class="path" style="top: 100px; left: 200px;"></div>
        <div class="path" style="top: 100px; left: 250px;"></div>
        <div class="path" style="top: 100px; left: 300px;"></div>
        <!-- fourth row -->
        <div class="path" style="top: 150px; left: 0px;"></div>
        <div class="path" style="top: 150px; left: 50px;"></div>
        <div class="grass" style="top: 150px; left: 100px;"></div>
        <div class="grass" style="top: 150px; left: 150px;"></div>
        <div class="path" style="top: 150px; left: 200px;"></div>
        <div class="path" style="top: 150px; left: 250px;"></div>
        <div class="path" style="top: 150px; left: 300px;"></div>
    </div>
    The outer <div> is position: relative so that all the inner ones can be position: absolute and so end up at the right locations.

    The JS code is thus dirt simple:
    Code:
    ...
    GAME.map =[ 
        [a,a,a,b,b,a,a], 
        [a,a,a,b,b,a,a], 
        [a,a,b,b,a,a,a], 
        [a,a,b,b,a,a,a]  
    ];
    ...
    GAME.draw = function() {
        // we will put all the small <div>s inside of "themap" div:
        var gamemap = document.getElementById("themap");
    
        // we get each row of the GAME.map array, one at a time:
        for ( var row = 0; row < GAME.map.length; ++row )
        {
            // this, then is one row:
            var maprow = GAME.map[row];
            // for example, the first row is the array [a,a,a,b,b,a,a]
    
            // and then we get each column in that row
            for ( var col = 0; col < maprow.length; ++col )
            {
                // we create a new <div> (one of the inner <div>s from diagram above
                var cell = document.createElement("div");
                // we position it...its top is 50pixels times its row number
                cell.style.top = ( row * 50 ) + "px";
                // its left is 50pixels times its column number
                cell.style.left = ( col * 50 ) + "px";
                // it is either "grass" (green background) or "path" (grey)
                // depending on what letter was in the array:
                cell.className = maprow[col] == "a" ? "grass" : "path";
                // and then we simply make this 50x50 cell a child <div> of the outer <div>
                gamemap.appendChild(cell);
            } // loop on the columns
        } // loop on the rows
    } // end of draw function
    As I said, it's just an example. You could change the class names, letters used, size of the array, etc., etc. It's just showing how to create the small <div>s inside the large outer one.
    Alright, I know your going to make fun of me again, but I don't know where GAME.draw=function() comesinto play. where is this function supposed to be called and where do I call it? I'm not sure I understand GAME.map either

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    My code was just building on RndMe's answer. Ask him.

    You don't HAVE to use his construct-a-game object answer. If you are more comfortable with other approaches, use them.
    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
    •