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

Question

我正在尝试在游戏中获取鼠标输入； 任何帮助，将不胜感激。

我在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

Answer 1

因此，发生了一些事情，首先，提琴加载的设置不正确，一旦我将其更改为不包裹体内，一切正常。

您遇到的实际问题是由于背景画布位于实体画布下方 ，因此它无法获取任何鼠标事件。

一种解决方案是使用指针事件 ，并将其设置为none，就像pointer-events: none在实体画布上pointer-events: none 。

现场演示

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

如果需要更广泛的浏览器支持，另一种选择是让entities画布代替鼠标事件。

选项2的现场演示