잘못된 요소에서 주어진 좌표

Question

캔버스를 사용하여 지뢰 찾기 게임을 만드는 방법에 대한 안내에 따라 Javascript를 배우려고합니다. 옵션 막대를 클릭하면 캔버스에서 클릭으로 등록됩니다. This is a screenshot of the whole game so far. 캔버스를 계속 클릭 할 수 있지만 원하는대로 작동하지만 옵션 막대 (웃는 얼굴이있는 부분)를 클릭하면 캔버스에 클릭으로 등록되고 타일 중 하나가 제거됩니다. '때문에 할 수있는, 누군가가 문제를 찾기위한

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

`

는 희망이 충분하다'

: 여기

는 마우스 클릭을 등록하는 코드입니다 티.

Answer 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() 함수가 캔바스의 이벤트에서만 발생하도록 명시 적으로 제한합니다.