0

我有一个用于测试的 HTML5 网络游戏的事件侦听器，但我很难让事件侦听器获得预期的实际坐标。

使用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 回答