Coordonnées de la carte de tuile

Question

J'ai maintenant ce code: http://jsfiddle.net/DK67k/2/ Voici la carte de tuiles en 2D et quand vous cliquez sur la tuile vous obtenez des coordonnées sur l'alerte. Mais pour obtenir des coordonnées précises, vous devez cliquer sur la tuile en haut à gauche (les tuiles sont de 16x16) et si je clique sur la tuile en bas à droite, je reçois les deuxièmes coordonnées de tuiles.

Peut-être que quelqu'un a une idée de comment résoudre ce problème?

Answer 1

La réponse de Blaus est correcte. Bien que vous souhaitiez peut-être soustraire la position de gauche et la position supérieure du canevas pour rendre votre élément de canevas disponible pour le positionnement dynamique, et non par rapport au remplissage de 10px.

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); 
} 

Answer 2

Le point de toile (0,0) est aux coords de souris (10,10), je pense est dû au parent de la toile a une zone de remplissage.

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