0

我对 HTML5 很陌生，但我正在学习，而且现在 - 我正在开发一个非常简单的游戏。

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

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

所以，我有一个名为 init 的函数，它初始化所有内容。加载图像精灵时调用它：

function init(){
    drawBg();
    startDrawing();

    document.addEventListener('keydown', checkKeyDown, false);
    document.addEventListener('keyup', checkKeyUp, false);

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

}

如果 'ommousemove' 是正确的，我不是 100%，不确定我应该放什么。然后我有 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);

}

我还有一个名为“draw”的函数，每 5 帧（每次更新）调用一次，所以我假设我需要检查其中的鼠标位置？

function draw(){
   mouseTarget();
}

但后来我收到一个错误：未捕获：TypeError：无法读取未定义的属性“offsetX”。我在这里做错了什么？

谢谢

4

1 回答 1

0

问题（正如您所怀疑的）出在这条线上

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

它应该是

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

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

这就是您收到Cannot read property 'offsetX' of undefined.错误的原因，因为实际上您正在尝试访问undefined.offsetX

您应该做的是将鼠标位置保留在单独的变量中，然后在“绘制”函数中引用它们。

于 2013-01-21T21:30:46.433 回答