我可以'我在HTML5游戏中没有鼠标输入

我正试图在游戏中获得鼠标输入；任何帮助都将不胜感激。

我在init（）函数中调用事件侦听器，并且我有mouseMoved（）和mouseClicked（）函数。但我一直没有得到任何回应。

（我被要求为这个项目制作一个jsFiddle，所以它就在这里。出于某种原因，它没有渲染图像。但一旦有输入，左上角应该有文本显示鼠标坐标。此外，当你点击画布时，你应该会收到警报。）

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