間違った要素から与えられた座標

Question

キャンバスを使用して掃海艇ゲームを作成する際のガイドに従って、Javascriptを学習しようとしています。オプションバーをクリックすると、それをキャンバス上のクリックとして登録するという事実を除けば、すべてがうまくいっています。 This is a screenshot of the whole game so far.私はまだキャンバスをクリックすることができ、それは必要に応じて機能しますが、オプションバー（スマイリーフェースのある部分）をクリックすると、キャンバスにクリックとして登録され、タイルの1つが削除されます。ここで

は、マウスクリックを登録するコードです：

「

if(e.offsetX) {     //Get's mouse pos relative to the canvas pos 
    mouseX = e.offsetX; 
    mouseY = e.offsetY; 
} 
else if(e.layerX) { 
    mouseX = e.layerX; 
    mouseY = e.layerY; 
} 

//mouseX = e.pageX;    //Gets mouse pos relatiove to page 
//mouseY = e.pageY; 
//console.log("Mouse Pos on screen (x, y) = " + mouseX + "," + mouseY);//Validate that the mouse position is being recorded. 

//Algorithm to tell which cube the click was on. 

if (Math.floor(mouseX/settings.width) < settings.columns && Math.floor(mouseY/settings.height) < settings.rows){ 
    clickX = Math.floor(mouseX/settings.width); 
    clickY = Math.floor(mouseY/settings.height); 
    console.log("Coords of clicked box (x,y)" + clickX + "," + clickY); 
} 

`

私ができるので、うまくいけば、これは、それに問題を発見するために誰かのために十分です」 t。

Answer 1

問題は、1つの関数でウィンドウ全体のクリックイベントをキャプチャしていることです。そのため、キャンバスや新しいゲームdivをクリックしている場合でも、ウィンドウ内の他の場所をクリックしている場合でも、そのクリックをキャンバスに適用します。

あなたが本当にがしたい場合は、より優れたキャンバス自体、および新しいゲームのための別のクリックイベントのクリックイベント持つように助言されるだろう（実際にはボタンではなく、div要素でなければなりませんが、私は話を戻そう）この方法を実行するには、関数を明示的にキャンバスだけを気にするように制限することができます。あなたが作る場合は、グローバルgCanvas（身震い）あなたがあなたのキャンバスから発射ものにイベントとだけアクションのターゲットを確認することができ、あなたのイベント関数に続いて

var gCanvas = null; 

function canvasLoad() { 
    gCanvas = document.getElementById("gameCanvas"); 
    ... 
} 

window.onclick = function(e){ 
... 
//Algorithm to tell which cube the click was on. 
if (
    (e.target === gCanvas) 
) 
    { 
    if (Math.floor(mouseX/settings.width) < settings.columns && 
     Math.floor(mouseY/settings.height) < settings.rows) 
     { 
     clickX = Math.floor(mouseX/settings.width); 
     clickY = Math.floor(mouseY/settings.height); 
     console.log("Coords of clicked box (x,y)" + clickX + "," + clickY); 
     } 
    } 

なお、このISN '私は一緒に行くだろう解決策。それを発生させたオブジェクトへのイベントのより緊密な束縛は、はるかに満足です。

<canvas id = "gameCanvas" width="153" height="153" 
     style="border:1px solid #000000;" # 
     onclick='return myCanvasEventHandler()'></canvas> 

myCanvasEventHandler（）関数は、キャンバス自体のイベントでのみ発生するように明示的に制限します。