HTML5 + JavaScript -鼠标定位

Question

我对HTML5相当陌生，但我正在学习，现在我正在制作一款非常简单的游戏。

我想做的是让鼠标的X和Y位置与画布相关，并有一个图像跟随鼠标(像一个十字准星，瞄准)。

但是现在，我只想拉鼠标值。

我有一个叫做init的函数，它初始化一切。当加载图像精灵时调用:

function init(){
    drawBg();
    startDrawing();
    document.addEventListener('keydown', checkKeyDown, false);
    document.addEventListener('keyup', checkKeyUp, false);
    document.addEventListener('ommousemove', mouseTarget, false);
}

我不是100%如果' ommousmove '是正确的，不确定我应该把他们的。然后是mouseTarget函数:

function mouseTarget(e){
    var mouseX;
    var mouseY;
    if(e.offsetX){
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX){
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
    console.debug("Mouse X: " +  mouseX + " Mouse Y: " + mouseY);
}

我还有一个名为"绘制"的函数，它每5帧(每次更新)调用一次，所以我假设我需要检查鼠标的位置在其中?

function draw(){
   mouseTarget();
}

但是我得到一个错误:Uncaught: TypeError: Cannot read property 'offsetX' of undefined。我哪里做错了?

谢谢

Answer 1

问题(如您所料)出在这一行

document.addEventListener('ommousemove', mouseTarget, false);

应该是

document.addEventListener('mousemove', mouseTarget, false);

mouseTarget函数中的e参数仅在通过事件调用时包含事件信息。在您的情况下，它永远不会通过事件调用，而只能通过draw函数调用。

这就是为什么你得到Cannot read property 'offsetX' of undefined.错误，因为在现实中你试图访问undefined.offsetX

你应该做的是将鼠标位置保存在单独的变量中，然后在'draw'函数中引用它们。