title: Situation with Collision Detection in 2D array-built tile map.
body: <p>I have a problem with a script of mine. What I have is a tiled map made using a 2 dimensional array that specifies different tile types with different numbers and is drawn in a container div element. I also have a character div element that is movable. My problem is I can't figure out how to detect tiles and utilize the result of said detection in order to determine whether a character can move into nearby tiles or not. </p>
  
  <p>The associated site that I have this hosted on is as follows; </p>
  
  <p><a href="http://brandynssite.webs.com/map_tile.html" rel="nofollow">http://brandynssite.webs.com/map_tile.html</a></p>
  
  <p>As you can see with that example there is a container that draws the tiled map, a character element that starts at 0,0, and there are two buttons that check for character position and tile type. What I want to have happen is for the code to detect the tile the character is traveling to after a keypress event has happened and move their if possible. What functions would I need for this and is their a specific set of algorithms I would need for something as simple as what I have on that site? </p>
  
  <p>I have provided one of the functions that allows the character to move as it seems to be the most related function in regards to possible collision detection that I can think of.</p>
  
  <pre><code>function anim(e) {
  
  if(e.keyCode==39){
          character_left += 10;
          x += 1;
          playerPos=mapArray[y][x];
  
  
          character.style.left = character_left + "px";
          if(character_left &gt;= 190){ 
              character_left -= 10;
              x -= 1;
              playerPos=mapArray[y][x];
  
              }
          }
  if(e.keyCode==37){
          character_left -= 10;
          x -= 1;
          playerPos=mapArray[y][x];
          character.style.left = character_left + "px";
          if(character_left &lt;= 0){
              character_left += 10;
              x += 1;
              playerPos=mapArray[y][x];
              }   
  
          }
  if(e.keyCode==40){
          character_top += 10;
          y += 1;
          playerPos=mapArray[y][x];
  
          character.style.top = character_top + "px";
          if(character_top &gt;= 190){
              character_top -= 10;
              y -= 1;
              playerPos=mapArray[y][x];
              }
          }
  if(e.keyCode==38){
          character_top -= 10;
          y -= 1;
          playerPos=mapArray[y][x];
  
          character.style.top = character_top + "px";
          if(character_top &lt;= 0){
              character_top += 10;
              y += 1;
              playerPos=mapArray[y][x];
  
              }
          }
  }
  </code></pre>