HTML 캔버스 용 자바 스크립트는 파이어 폭스에서 작동하지만 크롬에서는 작동하지 않습니다.

Question

그래서 저는 최근에 캔버스에 들어가서 간단한 게임을 만들어 놀아보기로했습니다.

그러나 크롬에서는 작동하지 않지만 파이어 폭스에서는 작동합니다. 이 게임은 매우 간단한 RTS로되어 있습니다. 상자를 선택하면 마우스 오른쪽 단추로 클릭 할 때 상자를 한 지점에서 다른 지점으로 이동할 수 있습니다.

이것은 파이어 폭스에서 작동합니다. 그러나 크롬에서는 상자를 그으나 클릭을 등록하지 않습니다 (상자를 선택하거나 이동할 수 없음). 또한 크롬에서는 아무 것도 방화범 콘솔에 나타나지 않습니다. 관련성이있는 경우 xampp에서 스크립트를 실행하고 있습니다.

편집 : 하, 미안 해요. 나는 정직하게 어디에서 전에 시작해야하는지 알지 않았다. 그래서 나는 모든 것을 올렸다. 위의 코드를 가져 와서 아래의 훨씬 더 짧은 버전으로 바 꾸었습니다. 또한 형식을

EDIT2 편집 : 위의 코드는 마우스 기능을 처리

/*Game mouse controls*/ 
_screen.mousemove(function(e){ 
    var playerUnitHover = _game.onUnit(playerUnits, e), 
     enemyUnitHover = _game.onUnit(enemyUnits, e); 

     if(typeof(playerUnitHover)=='number') _screen.css('cursor','pointer'); 
     if(typeof(enemyUnitHover)=='number') _screen.css('cursor','not-allowed'); 
}); 

더 코드 아래 좁혀. 문제가 발생할 수있는 곳입니다. 불 덩어리 크롬에서는 콘솔에 표시 할 변수를 얻을 수 있지만 커서가 상자 위에있을 때 등록하지 못합니다. 아래 함수는이를 처리합니다.

/*If mouse coordinates are ontop of unit, then return index of that unit from supplied array argument*/ 
this.onUnit = function(array,e){ 
var numOfUnits  = array.length, 
    mouseOffsetX = e.pageX - offsetX, 
    mouseOffsetY = e.pageY - offsetY; 

for(var i = 0; i < numOfUnits; i++){ 
    var unit = array[i], 
     xRange = mouseOffsetX > unit.x && (unit.x+unit.width) > mouseOffsetX, 
     yRange = mouseOffsetY > unit.y && (unit.y+unit.height) > mouseOffsetY; 

    if (xRange && yRange){ 
     return i; 
    } 

    if(!xRange || !yRange) _screen.css('cursor','crosshair'); 
} 
} 

Answer 1

문제는

mouseOffsetX = e.pageX - offsetX, 
mouseOffsetY = e.pageY - offsetY; 

일관된 크로스 브라우저 마우스 좌표 충분하지 않은 것입니다.

캔버스에 마우스 좌표를 가져 오는 데는 여러 가지 유효한 방법이있을 수 있습니다. 내가 사용하는 방탄 방법은 overcomplicated 될 수 있지만, 모든 브라우저에서 작업을 수행하고 CSS 테두리 같은 것들을 알고 :

getMouse = function(e, canvas) { 
    var element = canvas, offsetX = 0, offsetY = 0; 
    if (element.offsetParent) { 
    do { 
     offsetX += element.offsetLeft; 
     offsetY += element.offsetTop; 
    } while ((element = element.offsetParent)); 
    } 

    // Add padding and border style widths to offset 
    offsetX += stylePaddingLeft; 
    offsetY += stylePaddingTop; 
    offsetX += styleBorderLeft; 
    offsetY += styleBorderTop; 

    // We return an javascript object with x and y defined 
    return { 
    x: e.pageX - offsetX, 
    y: e.pageY - offsetY 
    }; 
} 

stylePadding하고 패딩/테두리가없는 한 styleBorder 아마 필요하지 않습니다. ,

var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop; 
    if (document.defaultView && document.defaultView.getComputedStyle) { 
    stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)  || 0; 
    stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)  || 0; 
    styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; 
    styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; 
    }