Question

ctx.fillStyle = "#9b958c";
ctx.fillRect(sampleRectX, sampleRectY, sampleRectW, sampleRectH);
ctx.fillStyle = "#fff";
ctx.fillText("Click here to play again.", sampleTextX, sampleTextY);

此矩形必须是可点击的。这种方法https://stackoverflow.com/a/16455006/3677742似乎是我的问题的答案，但鼠标点击的事件监听器不起作用，我不知道为什么。我试图这样做：

canvas.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
    var xPosition = e.clientX;
    var yPosition = e.clientY;
    if ((sampleRectX <= xPosition) && (sampleRectX + sampleRectW >= xPosition) && (sampleRectY <= yPosition) && (sampleRectY + sampleRectH >= yPosition) {
        if (lose===true) {
            playAgain = true;
        };
    };
};

如果知道相关，我的代码组织如下：

//Variables here
...

//Objects (player, enemy...)
...

function main() {
    ...
};

function init() {
    ...
};

function update() {
    ...
};

function draw() {
    ...
    if (gameStarted===true) {
        ...
        if (lose===true) {
            ...
            ctx.fillStyle = "#9b958c";
            ctx.fillRect(sampleRectX, sampleRectY, sampleRectW, sampleRectH);
            ctx.fillStyle = "#fff";
            ctx.fillText("Click here to play again.", sampleTextX, sampleTextY);
};

main();

我是编码的初学者，所以我很抱歉，如果我也要问某些东西＆＃34; noob-level＆＃34;。

Answer 1

((sampleRectX < xPosition) && 
 (sampleRectX + sampleRectW > xPosition) && 
 (sampleRectY < yPosition) && 
 (sampleRectY + sampleRectH > yPosition)
)

你得到的几乎是正确的，你最后错过了一个括号

如果你检查从事件监听器返回的鼠标事件（你应该始终检查它，始终检查从API获得的所有内容并查看它是如何工作的），你会看到有不同的值。

你带了e.clientX，我也是如此，它对我不起作用，因为我的testpage上的画布发生的位置并不是0,0（就像它几乎总是那样）

要获得正确的值，我必须得到e.offsetX和e.offsetY

可耻的我不确切地知道鼠标事件上每个坐标的确切含义，但我会查找并更新我的答案。

我希望这次能解决你的问题。

如果有疑问，请始终使用console.log（）进行调试，以检查实际发生的情况以及API对您的影响。

（如果仍然无法解决您的问题，请将代码中的console.log（）放在您不知道是否执行的地方，并检查它不在哪里。）

我为你做了一个例子http://jsfiddle.net/cxyTV/1/

如何使这个画布矩形可点击？

1 个答案: