我無法在我的HTML5遊戲中獲得鼠標輸入

Question

我試圖在我的遊戲中獲取鼠標輸入;任何幫助，將不勝感激。

我在我的init（）函數中調用事件偵聽器，並且同時擁有我的mouseMoved（）和mouseClicked（）函數。但我一直無法得到任何迴應。

（我被要求爲這個項目製作一個jsFiddle，所以here就是這樣，它不會渲染圖片，但是一旦有輸入，左上角應該有文本顯示鼠標的座標。此外，當您單擊畫布上，你應該得到一個警告。）

var canvasBg = document.getElementById('canvasBg'); 
var ctxBg = canvasBg.getContext('2d'); 
var canvasEntities = document.getElementById('entities'); 
var entitiesCtx = canvasEntities.getContext('2d'); 

var isPlaying = false; 

var player; 
var enemy; 

var mouseX, mouseY; 

var playerImg = new Image(); 
playerImg.src = 'http://placekitten.com/g/50/50'; 
var enemyImg = new Image(); 
enemyImg.src = 'http://placehold.it/50x50'; 

window.onload = init; 
var requestAnimFrame = window.requestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.oRequestAnimationFrame || 
         window.msRequestAnimationFrame || 
         function(callback) { 
          window.setTimeout(callback, 1000/60); 
         }; 






// main functions 
function init() { 

    console.debug('init()'); 

    player = new Entity(250,  // xpos 
         225,   // ypos 
         0,   // xd 
         0,   // yd 
         3,   // speed 
         50,   // width 
         50,   // height 
         playerImg, // imgSrc 
         true);  // player? 


    enemy = new Entity(500,225,0,0,1,25,25,enemyImg,false); 

    canvasBg.addEventListener('mousemove', mouseMoved, false); 
    canvasBg.addEventListener('click', mouseClicked, false); 

    startLoop(); 
} 

function loop() { 
    // console.debug('game loop'); 
    if(isPlaying){ 
     update(); 
     draw(); 
     requestAnimFrame(loop); 
    } 
} 

function startLoop() { 
    isPlaying = true; 
    loop(); 
} 

function stopLoop() { 
    isPlaying = false; 
} 

function clearAllCtx() { 
    ctxBg.clearRect(0, 0, canvasBg.width, canvasBg.height); 
    Entity.clearCtx(); 
} 

function draw(){ 
    clearAllCtx(); 
    player.draw(); 
    enemy.draw(); 
} 

function update(){ 
    player.update(); 
} 
// end of main functions 





// input handling 
function mouseMoved(e) { 
    mouseX = e.layerX - canvasBg.offsetLeft; 
    mouseY = e.layerY - canvasBg.offsetTop; 
    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY; 
} 

function mouseClicked(e) { 
    alert('You clicked the mouse!'); 
} 
// end of input handling 





// Entity functions 
function Entity(xpos, ypos, xd, yd, speed, width, height, imagesrc, player) { 
    this.xpos = xpos; 
    this.ypos = ypos; 
    this.xd = xd; 
    this.yd = yd; 
    this.speed = speed; 
    this.width = width; 
    this.height = height; 
    this.imagesrc = imagesrc; 
    this.player = player; 
} 

Entity.clearCtx = function(){ 
    entitiesCtx.clearRect(0,0,canvasBg.width,canvasBg.height); 
}; 

Entity.prototype.draw = function() { 
    entitiesCtx.drawImage(this.imagesrc, this.xpos, this.ypos); 
}; 

Entity.prototype.update = function() { 
    this.xpos += this.xd; 
    this.ypos -= this.yd; 
}; 
// end of Entity functions 

Answer 1

所以那裏有幾件事情正在進行，第一小提琴加載設置不正確，有一次我在身體一切正常將其改爲不包。

您遇到的實際問題是由於背景畫布下的實體畫布，所以它不能得到任何鼠標事件。

一個解決方案是使用pointer-events並將它設置爲none，如pointer-events: none在實體畫布上。

Live Demo

#entities { 
    margin: -500px auto; 
    pointer-events: none; 
} 

，如果你需要更廣泛的瀏覽器支持是有entities畫布捕捉鼠標事件，而不是另一種選擇。

Live Demo of Option 2