我无法在HTML5游戏中获得鼠标输入

Question

I'm trying to get mouse input in my game; any help would be appreciated.

I call the event listeners in my init() function, and I have both my mouseMoved() and mouseClicked() functions. But I just haven't been able to get any response.

(I was asked to make a jsFiddle for this project, so here it is. It's not rendering the images, for some reason. But once there's input, there should be text on the top left the shows the mouse coordinates. Also, when you click on the canvas, you should get an alert.)

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

So theres a few things going on, first the fiddle loading was set incorrectly, once I changed it to no wrap in body everything works.

The actual issue you're having is due to the background canvas being under the entities canvas, so it cant get any of the mouse events.

One solution would be to use pointer-events and set it to none like so pointer-events: none on the entities canvas.

Live Demo

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

Another option if you need wider browser support is to have the entities canvas capture the mouse events instead.

Live Demo of Option 2