ctx.fillStyle = "#9b958c";
ctx.fillRect(sampleRectX, sampleRectY, sampleRectW, sampleRectH);
ctx.fillStyle = "#fff";
ctx.fillText("Click here to play again.", sampleTextX, sampleTextY);
This clickable rectangle has been giving me some trouble. While I found a potential solution here, the event listener for the mouse click isn't working as expected. Here is the code snippet I'm using:
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;
}
}
}
In case it helps, my code structure is like this:
//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();
As a beginner in coding, I apologize if my question seems too basic.