0

クイズであるHTML5Webゲームのイベントリスナーがありますが、イベントリスナーに期待される実際の座標を取得させるのに問題があります。

javascriptコンソールを使用して、取得する座標が間違っていることがよくあることがわかりました。

編集：私は問題が発生している理由を知っていると思いますが、それを修正する方法がわかりません。y軸が長いキャンバスを使用していますが、いくつかの質問に答えるために下にスクロールする必要があります。私がスクロールするときは、座標がうまくいかなくなるときです。これに対処する方法はありますか？

これは私のイベントリスナーです。この問題を解決するのを手伝ってください。

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
    my=ev.y-canvas.offsetTop;
    if(ev.y == undefined){
        my = ev.pageY - canvas.offsetTop; 
        }

座標の使い方の例-

if(eventstate == 'texta6get'){
            console.log(my);
            if(my>300 && my<390){GetAnswer(1);console.log("Answer1 clicked:");}
            if(my>400 && my<490){GetAnswer(2);console.log("Answer2 clicked:");}
            if(my>500 && my<590){GetAnswer(3);console.log("Answer3 clicked:");}
            if(my>600 && my<690){GetAnswer(4);console.log("Answer4 clicked:");}
            if(my>700 && my<790){GetAnswer(5);console.log("Answer5 clicked:");}
            if(my>800 && my<890){GetAnswer(6);console.log("Answer6 clicked:");}
            }
4

1 に答える 1

0

jQueryを使用できる場合、以下のコードは一貫した結果を提供します。

// set up a handler for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});


// get the position of the canvas on the page since it doesn't change
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


// handle mousedown events
function handleMouseDown(e){
    mx=parseInt(e.clientX-offsetX);
    my=parseInt(e.clientY-offsetY);

    // Put your mousedown stuff here
    if(my>300 && my<390){GetAnswer(1);console.log("Answer1 clicked:");}
    if(my>400 && my<490){GetAnswer(2);console.log("Answer2 clicked:");}
    if(my>500 && my<590){GetAnswer(3);console.log("Answer3 clicked:");}
    if(my>600 && my<690){GetAnswer(4);console.log("Answer4 clicked:");}
    if(my>700 && my<790){GetAnswer(5);console.log("Answer5 clicked:");}
    if(my>800 && my<890){GetAnswer(6);console.log("Answer6 clicked:");}
}
于 2013-03-24T22:28:15.893 に答える