使用html5 canvas的javascript中的鼠标单击事件

Question

通过我正在制作的小游戏寻找一些建议。

这是一个投资模拟器。 没什么，只是一个项目来测试我到目前为止使用javascript的能力。

我正在尝试创建一个购买按钮，但是事实证明这非常困难。

从我看到的内容来看，在HTML5画布上实现javascript按钮的实现没有花哨的导入。

请查看我的js文件，看看您认为问题出在哪里。

到目前为止，当我按原样执行此代码时，该程序无法运行。 如果从productDetails函数中删除if语句，它将运行，但是目前还没有任何功能，这就是我需要支持的地方。

谢谢，詹姆斯。

代码如下：

    function handleMouseMove(evt) {
    Game.mousePosition = { x : evt.clientX, y : evt.clientY };
}

var Game = {
    canvas : undefined,
    ctx : undefined,
    vendMachCost : undefined,
    vendMachRev : undefined,
    vendMachOwned : undefined,
    fruitMachCost : undefined,
    fruitMachRev : undefined,
    fruitMachOwned : undefined,
    pubCost : undefined,
    pubRev : undefined,
    pubOwned : undefined,
    nightClubCost : undefined,
    nightClubRev : undefined,
    nightClubOwned : undefined,
    carShowCost : undefined,
    carShowRev : undefined,
    carShowOwned : undefined,
    aucHouseCost : undefined,
    aucHouseRev : undefined,
    aucHouseOwned : undefined
};

Game.start = function () {
    Game.canvas = document.getElementById("canvas");
    Game.ctx = canvas.getContext("2d");
    Game.vendMachCost = 2000;
    Game.vendMachRev = 100;
    Game.vendMachOwned = 0;
    Game.fruitMachCost = 3000;
    Game.fruitMachRev = 250;
    Game.fruitMachOwned = 0;
    Game.pubCost = 250000;
    Game.pubRev = 4000;
    Game.pubOwned = 0;
    Game.nightClubCost = 800000;
    Game.nightClubRev = 20000;
    Game.nightClubOwned = 0;
    Game.carShowCost = 10000000;
    Game.carShowRev = 120000;
    Game.carShowOwned = 0;
    Game.aucHouseCost = 25000000;
    Game.aucHouseRev = 750000;
    Game.aucHouseOwned = 0;
    document.onmousemove = handleMouseMove;
    window.setTimeout(Game.run, 500);
};

document.addEventListener('DOMContentLoaded', Game.start);

Game.clearCanvas = function () {
    Game.ctx.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.drawBg = function () {
    Game.ctx.beginPath();
    Game.ctx.fillStyle = "darksalmon";
    Game.ctx.fillRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.productDetails = function (product, cost, revenue, owned, posX, posY) {
  Game.ctx.beginPath();
    Game.ctx.fillStyle = "cyan";
    Game.ctx.fillRect(posX, posY, 125, 100);
    Game.ctx.fillStyle = "black";
    Game.ctx.strokeRect(posX, posY, 125, 100);
    Game.ctx.fillStyle = "darkSlateGrey";
    Game.ctx.font = "10px Arial";
    Game.ctx.textAlign = "left";
    Game.ctx.fillText(product, posX+5, posY+20);
    Game.ctx.fillText("Price: " + cost, posX+5, posY+40);
    Game.ctx.fillText("Weekly Revenue: " + revenue, posX+5, posY+60);
    Game.ctx.fillText("Owned: " + owned, posX+5, posY+80);
    if (Game.mousePosition.y >= posY && Game.mousePosition.y <= posY+100) {
        if (Game.mousePosition.x >= posX && Game.mousePosition.x <= posX+125) {
            document.click(function () {
                owned += 1;
            });
            }
        }
    }
};

Game.buyButton = function (title, x, y) {

}

Game.update = function () {

};

Game.draw = function () {
    Game.clearCanvas();
    Game.drawBg();
    Game.productDetails("Vending Machine", Game.vendMachCost, Game.vendMachRev, Game.vendMachOwned, 25, 100);
    Game.productDetails("Fruit Machine", Game.fruitMachCost, Game.fruitMachRev, Game.fruitMachOwned, 25, 225);
    Game.productDetails("Pub", Game.pubCost, Game.pubRev, Game.pubOwned, 25, 350);
    Game.productDetails("Night Club", Game.nightClubCost, Game.nightClubRev, Game.nightClubOwned, 400, 100);
    Game.productDetails("Car Showroom", Game.carShowCost, Game.carShowRev, Game.carShowOwned, 400, 225);
    Game.productDetails("Auction House", Game.aucHouseCost, Game.aucHouseRev, Game.aucHouseOwned, 400, 350);
};

Game.run = function () {
    Game.update();
    Game.draw();
    window.setTimeout(Game.run, 1000 / 60);
};

Answer 1

您的解决方案似乎只是为了处理“购买”按钮而要做的许多工作。 您一直在跟踪鼠标的移动，并且有很多硬编码的按钮位置也不是很好。

一种方法是使用常规的<button>样式，并使用CSS将其放在画布顶部，并仅使用javascript将click事件监听器添加到它，并在需要时隐藏/显示它。 这样，您可以避免做不必要的事情，并且逻辑将落到切换隐藏/显示和“购买”功能上。