title: Determining allowable moves on a grid
body: <p>Can anyone suggest a suitable way of figuring out a pieces allowable moves on a grid similar to the one in the image below.</p>
  
  <p><img src="https://farm4.static.flickr.com/3534/3250436085_c91b07c7fd.jpg" alt="grid layout"></p>
  
  <p>Assuming piece1 is at position a1 and piece2 is at position c3, how can I figure out which grid squares are allowable moves if piece1 can move (say) 3 squares and piece2 can move 2?</p>
  
  <p>I've spent way too long developing text based MUDS it seems, I simply can't get my brain to take the next step into how to visualise potential movement even in the most simple of situations.</p>
  
  <p>If it matters, I'm trying to do this in javascript, but to be perfectly honest I think my failure here is a failure to conceptualise properly - not a failure in language comprehension.</p>
  
  <p><strong>Update - I'm adding the first round of code written after the below responses were posted. I thought it might be useful to people in a similar situation as me to see the code</strong></p>
  
  <p>It's sloppy and it only works for one item placed on the board so far, but at least the <code>check_allowable_moves()</code> function works for this initial run. For those of you wondering why the hell I'm creating those weird alphanumeric objects rather than just using numeric x axis and y axis - it's because an id in HTML can't start with a number. In fact pretending I <em>could</em> use numbers to start ids helped a great deal in making sense of the functionality and concepts described by the fantastic answers I got.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="application/xhtml+xml;utf-8"/&gt;
  
  &lt;title&gt;Test page&lt;/title&gt;
  &lt;style&gt; 
  
      #chessboard { clear: both; border:solid 1px black; height: 656px; 
                    width:656px; /*width = 8*40 + 16 for border*/ }
      #chessboard .row { overflow: auto; clear: both; }
      #chessboard .row span { display: block; height: 80px; 
                              width: 80px; float: left; 
                              border:solid 1px black; }
      .allowable { background: blue; }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      google.load("jquery", "1.2.6");
      google.load("jqueryui", "1.5.3");
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      (function() {
      var global = this;
      global.Map = function(container) {
          function render_board() {
          var max_rows = 8;
          var cols = new Array('a','b', 'c', 'd', 'e', 'f', 'g', 'h');
          var jqMap = $('&lt;div /&gt;');
          jqMap.attr('id', 'chessboard');
          var x=0;
          for(x; x&lt;max_rows; x++) {
              var jqRow = $('&lt;span /&gt;');
              jqRow.addClass('row');
              var i=0;
              for(i; i&lt;cols.length; i++) {
                  var jqCol = $('&lt;span /&gt;');
                  jqCol.attr('id', cols[i]+(x+1));
                  jqCol.addClass(cols[i]);
                  jqRow.append(jqCol);
              }
            jqMap.append(jqRow);
          }
       $('#'+container).append(jqMap);
     }
     function add_piece(where, id) {
       var jqPiece = $('&lt;div&gt;MY PIECE'+id+'&lt;/div&gt;');
       var jqWhere = $('#'+where);
       jqPiece.attr('id', 'piece-'+id);
       jqPiece.addClass('army');
       jqPiece.draggable({cursor: 'move',
                                grid:[82, 82],
                                containment: '#chessboard',
                                revert: 'invalid',
                                stop: function(ev, ui) {
                                  //console.log(ev.target.id);
                                }
                              });
       jqWhere.append(jqPiece);
       check_allowable_moves(where);
      }
      function check_allowable_moves(location) {
       var x_axis = { 'a':1,'b':2, 'c':3, 'd':4, 'e':5, 'f':6, 'g':7, 'h':8 };
       var x_axis_alpha = { 1:'a',2:'b', 3:'c', 4:'d', 5:'e', 6:'f', 7:'g', 8:'h' };
       $('.allowable').droppable("destroy");
       $('.allowable').removeClass('allowable');
       //get the x,y values of the piece just placed
       var x = parseInt(x_axis[location[0]], 10);
       var y = parseInt(location[1], 10);
       var x_min = x-2;
       var y_min = y-2;
        for(x_min; x_min&lt;=x+2; x_min++) {
          for(y_min; y_min&lt;=y+2; y_min++) {
             var jqCell = $('#'+x_axis_alpha[x_min]+y_min)
             jqCell.addClass('allowable');
             jqCell.droppable({ accept: '.army',
                drop: function(ev, ui) {
                  //console.log(ev, ui, $(this));
                  //handle_drop(ev, ui, $(this));
                  check_allowable_moves($(this).attr('id'));
                }
              });
          }
          y_min = parseFloat(y)-2;
        }
      }
      render_board();
      add_piece('d5', '2');
     }
   })();
  var map = new Map('content');
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body id="debug"&gt;
      &lt;div id="page"&gt;
          &lt;div id="content"&gt; &lt;/div&gt;
      &lt;/div&gt;&lt;!-- end page --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>