Converting screen coordinates to isometric map coordinates
<p>I'm generating an isometric tile map using a diamond pattern:</p>

<pre><code>tileWidth = 128;
tileHeight = 94;

for (var x = 0; x &lt; rows; x++) {
  for (var y = 0; y &lt; cols; y++) {
    var screenX = (x - y) * tileWidthHalf;
    var screenY = (x + y) * tileHeightHalf;
    drawTile(screenX, screenY);
  }
}
</code></pre>

<p>This renders correctly, but now I'm having trouble converting screen coordinates (mouse location) back to the isometric coordinates.</p>

<p>I've tried reversing the math:</p>

<pre><code>var x = _.floor(screenY / (tileWidth / 2) - (screenX / tileWidth / 2));
var y = _.floor(screenY / (tileHeight / 2) + (screenX / tileHeight / 2));
</code></pre>

<p>It works fine for the <code>0, 0</code> tile but fails to produce the right value afterwards. </p>

<p>I'm just unable to come up with the right math - am I missing something trivial or am I just all wrong about the process?</p>