Координаты карты тайлов

Question

У меня есть этот код: http://jsfiddle.net/DK67k/2/ Здесь находится 2D-карта тайлов, и когда вы нажимаете на плитку, вы получаете координаты в состоянии тревоги. Но для получения точных координат вам нужно нажать на верхнюю левую плитку (плитки 16x16), и если я нажму на нижнюю правую плитку, я получу вторую координаты плитки.

Может быть, у кого-нибудь есть идеи, как это исправить?

Answer 1

Точка холста (0,0) находится в координатах мыши (10,10), я думаю, это связано с тем, что у родителя холста есть область заполнения.

function mouseCheck(e) {
   x = e.pageX-10;
   y = e.pageY-10;
   mouseX = Math.floor(x / 16);
   mouseY = Math.floor(y / 16);
}

Answer 2

Ответ Блауса правильный. Хотя вы можете захотеть вычесть смещение холста влево и вверх, чтобы сделать ваш элемент холста доступным для динамического позиционирования, а не относительно отступа в 10 пикселей.

function mouseCheck(e) {
    var x = e.pageX - canvas.offsetLeft;
    var y = e.pageY - canvas.offsetTop;
    mouseX = Math.floor(x / 16);
    mouseY = Math.floor(y / 16);
}