title: Click detection in a 2D isometric grid?
body: <p>I've been doing web development for years now and I'm slowly getting myself involved with game development and for my current project I've got this isometric map, where I need to use an algorithm to detect which field is being clicked on. This is all in the browser with Javascript by the way.</p>
  
  <p><strong>The map</strong><br>
  It looks like <a href="http://i.stack.imgur.com/W4cPq.jpg" rel="nofollow">this</a> and I've added some numbers to show you the structure of the fields (tiles) and their IDs. All the fields have a center point (array of x,y) which the four corners are based on when drawn.<br>
  As you can see it's not a diamond shape, but a zig-zag map and there's no angle (top-down view) which is why I can't find an answer myself considering that all articles and calculations are usually based on a diamond shape with an angle.</p>
  
  <p><strong>The numbers</strong><br>
  It's a dynamic map and all sizes and numbers can be changed to generate a new map.<br>
  I know it isn't a lot of data, but the map is generated based on the map and field sizes.<br>
  - Map Size: x:800 y:400<br>
  - Field Size: 80x80 (between corners)<br>
  - Center position of all the fields (x,y)  </p>
  
  <p><strong>The goal</strong><br>
  To come up with an algorithm which tells the client (game) which field the mouse is located in at any given event (click, movement etc).</p>
  
  <p><strong>Disclaimer</strong><br>
  I do want to mention that I've already come up with a working solution myself, however I'm 100% certain it could be written in a better way (my solution involves a lot of nested if-statements and loops), and that's why I'm asking here.</p>
  
  <p><a href="http://i.stack.imgur.com/h8zRj.jpg" rel="nofollow">Here's</a> an example of my solution where I basically find a square with corners in the nearest 4 known positions and then I get my result based on the smallest square between the 2 nearest fields. Does that make any sense?</p>
  
  <p>Ask if I missed something.</p>