Compare Mouse X,Y with Grid X,Y to find the closest grid position [closed]

Question

EDIT: From two very good answers I have decided to use isometric projection instead of my silly grid of cordinates.

I am doing a game entirely in canvas, and I find it quite troublesome right now.

I felt silly trying to post the grid. Here is the code with the grid on hastebin.com

Hastebin Link

Since I have all the grid cordinates, I am iterating the 2D array and turn each iteration into a vertex that I compare to the mouse vertex. My goal is to find the vertex closest to the mouse vertex. Instead all I am returning right now is (17,0) every time, no matter where I click. Do you have any idea why?

function mouse_click(ev) {
    var x = ev.clientX - c.offsetLeft;
    var y = ev.clientY - c.offsetTop;
    // Run click_grid
    alert(click_grid(x,y));



}

// Find the grid that is nearest the clicked cordinates.
function click_grid(xx,yy){
    var result = [];
    var result2 = [];
    var best = [0,0];
    var lastNode = [];
    var currentNode = 9000;
    for(var y = 0;y < 18; y++){
        for(var x = 0; x < 18; x++){
            // Distance = |P-E| = |(3,3)-(1,2)| = |(2,1)| = sqrt(2'2+1'2) = sqrt(5) = 2.23
            result = [grid.grid_x[y][x] - yy,grid.grid_y[y][x] - xx];
            result2 = [result[0] * result[0], result[1] * result[1]];
            currentNode = Math.sqrt(result2[0] + result2[1]);
            if(currentNode < lastNode){
                best = [y,x];
            }
            lastNode = currentNode;
        }
    }
    return([best]);
}

Answer 1

Judging from your grid, this is a simple isometric projection. Typically, we use linear algebra to figure out the coordinates, rather than iterating over all the grid coordinates.

For example: we know, based on your data, that the transformation looks something like this.

map (0,0) <-> screen (340,0)
map (0,1) <-> screen (360,10)
map (1,0) <-> screen (320,10)

We can derive the formula:

mapcoordinates = [-x/40+y/20+8.5, x/40+y/20-8.5 ]

for example, if you try out this code, it should alert the same results (sans bounds checking) I flipped x and y because of the choice of coordinates labels is reversed, and I added 0.5 and then converted to integer (>>0) to handle rounding to the "nearest" coordinate:

function click_grid(x,y) { 
   return [-y/40+x/20+9>>0,y/40+x/20-8>>0];
}

Answer 2

I think you want to move lastNode = currentNode; inside the if like:

        if(currentNode < lastNode){
            best = [y,x];
            lastNode = currentNode;
        }