所以我最近進入了畫布並決定通過製作一個簡單的遊戲來玩弄它。JavaScript for HTML canvas在Firefox中工作,但不在Chrome中
然而,它不能在Chrome瀏覽器中工作,但它在Firefox中工作。遊戲應該是一個非常簡單的RTS。您選擇一個框,當您右鍵單擊時,您可以將框從一個點移動到另一個點。
這適用於firefox。然而,在Chrome中,它繪製框但不註冊任何點擊(不能選擇/移動框)。在Chrome中也沒有任何東西出現在螢火蟲控制檯中。如果相關,我正在使用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');
});
上述代碼處理鼠標功能收窄。這是問題可能發生的地方。在firebug chrome中,我可以獲取控制檯中顯示的變量,但當光標位於框上時,它無法註冊。這是處理該功能的功能。
/*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');
}
}
我的眼睛開始流血 – ajax333221 2011-12-18 06:18:23
太多的代碼,編輯它歸結爲一個問題領域。 – 2011-12-18 09:14:03
你可以展示一個小例子,只是代碼不起作用嗎?你在Chrome中獲得鼠標點擊的正確座標嗎? – Jonas 2011-12-18 10:49:12