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);

}

また、5 フレームごと (更新ごと) に呼び出される「draw」という関数があるので、その中でマウスの位置を確認する必要があると思いますか?

function draw(){
   mouseTarget();
}

しかし、次のエラーが表示されます: Uncaught: TypeError: Cannot read property 'offsetX' of undefined. ここで何が間違っていますか？

ありがとう

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 に答える