タイルマップ座標

Question

私は今このコードを持っています：http://jsfiddle.net/DK67k/2/ ここでは2Dタイルマップです。タイルをクリックすると、アラート時に座標が表示されます。 しかし、あなたが左上のタイル（タイルは16x16です）をクリックする必要があります座標を取得するために右下のタイルをクリックすると、私は2番目のタイルの座標を取得しています。

誰でもこの問題を解決する方法がありますか？

Answer 1

Blaus '答えが正しい。 キャンバスオフセットを左と上の位置から差し引いて、キャンバス要素を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

キャンバスポイント（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); 
}