title: Javascript - Tilemap click on tile
body: <p>I want to be able to get the x y coordinates of the tile that I click, on as well as its location/index in the array ("map.tiles"). </p>
  
  <p>Create tilemap:</p>
  
  <pre><code>var map = {
      cols: 8,
      rows: 8,
      tsize: 100,
      tiles: [
          0,0,0,0,0,0,0,0,
          0,0,0,0,0,0,0,0,
          0,0,1,1,2,2,0,0,
          0,0,1,1,1,1,0,0,
          0,0,0,0,0,0,0,0,
          0,0,0,0,0,0,0,0,
          0,0,0,0,0,0,0,0,
          0,0,0,0,0,0,0,0 
      ],
      solidTiles : [1,2],
  
      getTile: function(col,row) {
          return this.tiles[row * map.cols + col]
      }
  }
  </code></pre>
  
  <p>Define mouse x and y</p>
  
  <pre><code>mouseX = e.pageX-c.offsetLeft; //get mouse's x position
  mouseY = e.pageY-c.offsetTop;
  </code></pre>
  
  <p>Render tile map:</p>
  
  <pre><code>for(let c = 0; c &lt; map.cols; c++) {
      for(let r = 0; r &lt; map.rows; r++) {
          var tile = map.getTile(c,r);
          if(tile != 0) { //not an empty tile
              renderSheet(
                  "tiles.png", //spritesheet
                  (tile-1) * map.tsize, //tile index * tilesize
                  0, //tile y index
                  map.tsize, //tile width
                  map.tsize, //tile height
                  c * map.tsize, //tile x
                  r* map.tsize, //tile y
                  map.tsize, //tile width
                  map.tsize //tile height
              );
          }
      }
  }
  </code></pre>
  
  <p>Please help :D</p>