1

我是 Javascript 新手，我在 Dreamweaver 编辑器中使用 HTML5 画布。我看过其他关于鼠标事件的帖子，但似乎没有一个能解决我的问题。

我正在创建一个名为“仅单击玉米气泡”的游戏，其中物品掉落并且玩家移动鼠标以单击玉米气泡，但如果他们单击其他任何内容，则游戏结束。

到目前为止，我使用过：

window.addEventListener("keydown",eventKeyDown,false);  
window.addEventListener("keyup",eventKeyUp,false);  
window.addEventListener("mousedown",onDown,false);  
window.addEventListener("mouseup",onUp,false);  
window.addEventListener("mousemove",onMove,false);

我如何称呼这些，以便它们是真实的？另外，如何使它们可点击，以便在图像掉落时可以单击它们？

4

2 回答 2

2

可能这会有帮助。

 document.addEventListener('click',mouseClick,false);
 function mouseClick(e)
 {  
   mouseX = e.pageX - canvas.offsetLeft;
   mouseY = e.pageY - canvas.offsetTop;
   //Now mouseX and mouseY contains the x and y location of mouse click event but w.r.t. your canvas location .
 }
于 2012-10-11T19:46:34.447 回答
0

首先，我们需要以某种方式找到鼠标光标所在的位置。这是一个获取鼠标坐标的函数：

function getMousePosition(e) {
    var x, y;        

    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft;
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop;

    return {
        get x() { return x },
        get y() { return y }
    }
}

HTMLCanvasElement.prototype.getMousePosition = getMousePosition;

然后我们需要测试鼠标是否被点击，如果是，定位鼠标和图像坐标。如果鼠标坐标与图像坐标重叠，则执行某些操作。我们可以通过以下方法测试条件：

var isMouseDown = false;
function onDown(e) {
    var pos = {x:0, y:0 };
    isMouseDown = true;
    var mouseCoordinate = getMousePosition(e);
    for (var i = 0; i < images.length; i++) {
        var bubble = images[i];
        if (( mouseCoordinate.x > image.x && // get the image most left position 
            mouseCoordinate.x < image.x + image.size) && // get image most right position
            ( mouseCoordinate.y > image.y &&
                mouseCoordinate.y < image.y + image.size)) {
            index = image.indexOf(image, 0);
            pos.x = mouseCoordinate.x;
            pos.y = mouseCoordinate.y;
            break;
        }
    }
}


if (isMouseDown &&
    pos.x < image[index].x + image[index].size &&
    pos.x > image[index].x &&
    pos.y < image[index].y + image[index].size &&
    pos.y > image[index].y)
// if the condition is true, then do something        

function onUp(e) {
    isMouseDown = false;
}

您可以在此处查看实时示例：http: //hellopixel.net/experiments/404/404.html

于 2012-10-11T20:13:11.293 回答