title: JavaScript/jQuery - Array list does not go across whole board
body: <p>So, I'm working with <code>A* Pathfinding</code>. I got it working however it doesn't work all the way. It works all the way until the last <code>4</code> columns to the right. Weird. </p>
  
  <p>It works all the way until X is 10 or less. Which is weird because <code>Y</code>'s max is <code>10</code>. Maybe it's together? I don't know. But my  map is <code>15 columns</code> by <code>10 rows</code>. Here is an online example: <a href="http://mystikrpg.com/html5/" rel="nofollow">http://mystikrpg.com/html5/</a> </p>
  
  <p>An interesting error I get is <code>Uncaught TypeError: Cannot read property '8' of undefined</code>.</p>
  
  <p>The <code>8</code> is the <code>Y</code> of where you clicked. If you click a the very first gray block on the right-side (since row 0 is walled off). Then that <code>8</code> would say <code>1</code>.</p>
  
  <p>Here's the part where it lays out the nodes.</p>
  
  <pre><code>// Creates a Graph class used in the astar search algorithm.
  function Graph(grid) {
      var nodes = [];
  
      var row, rowLength, len = grid.length;
  
              for (x = 0; x &lt;= 10; x++) {
               row = grid[x];
               nodes[x] = new Array(15);
                  for (y = 0; y &lt;= 15; y++) {
                     nodes[x][y] = new GraphNode(x, y, row[y]); 
                  }
              }
  
      this.input = grid;
      this.nodes = nodes;
  }
  </code></pre>
  
  <p>However, you can download it offline and put it on localhost, if you'd like here <a href="http://mystikrpg.com/html5/Ethios.rar" rel="nofollow">http://mystikrpg.com/html5/Ethios.rar</a></p>
  
  <p>Anyway... something else I found:</p>
  
  <p>My <code>loadMap()</code> function returns an array of <code>11</code> elements.</p>
  
  <p>And when <code>x_block</code> is <code>13</code> (clicking on <code>X</code> axis of map) for example, <code>graph.nodes[x_block][y_block]</code> returns undefined.</p>
  
  <p>Here is my <code>loadMap()</code> function:</p>
  
  <pre><code>    function loadMap(map) {
          if (map == 1) {
              return [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], 
  [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], 
  [1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 1, 13, 13, 1], 
  [1, 13, 1, 1, 13, 1, 1, 13, 1, 13, 13, 1, 13, 13, 13, 1], 
  [1, 13, 13, 1, 1, 1, 13, 13, 1, 13, 13, 1, 1, 1, 13, 1], 
  [1, 13, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1], 
  [1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1], 
  [1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 1], 
  [1, 13, 1, 1, 1, 1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1], 
  [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], 
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
          }
      }
  </code></pre>
  
  <p>As you can see, it's 15 columns across and 10 rows down.</p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>UPDATE NEW</strong></p>
  
  <pre><code>for (y = 0; y &lt;= 10; y++) {
  
      row = grid[y];
      nodes[y] = new Array(15);
  
      for (x = 0; x &lt;= 15; x++) {
  
          console.log("X: " + x + " Y: " + y);
          //console.log("Row: " + row[x]);
          nodes[x][y] = new GraphNode(x, y, row[x]);
      }
  }
  </code></pre>