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

我正在做一个小游戏来寻求一些建议

这是一个投资模拟器。没什么特别的，只是一个到目前为止测试我使用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);
};

功能手柄移动（evt）{
Game.mousePosition={x:evt.clientX，y:evt.clientY}；
}
var博弈={
画布：未定义，
ctx：未定义，
成本：未定义，
vendMachRev：未定义，
未定义：未定义，
成本：未定义，
修订版：未定义，
未定义：未定义，
公共成本：未定义，
pubRev:未定义，
公有：未定义，
夜总会成本：未定义，
夜总会：未定义，
夜总会：未定义，
carShowCost:未定义，
carShowRev:未定义，
carShowOwned:未定义，
成本：未定义，
aucHouseRev：未定义，
aucHouseOwned：未定义
};
Game.start=函数（）{
Game.canvas=document.getElementById（“canvas”）；
Game.ctx=canvas.getContext（“2d”）；
Game.vendMachCost=2000；
Game.vendMachRev=100；
Game.1=0；
Game.cost=3000；
Game.groutmachrev=250；
Game.com=0；
Game.pubCost=250000；
Game.pubRev=4000；
Game.publiowed=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=函数（）{
clearRect（0，0，Game.canvas.width，Game.canvas.height）；
};
Game.drawBg=函数（）{
Game.ctx.beginPath（）；
Game.ctx.fillStyle=“darksalmon”；
Game.ctx.fillRect（0，0，Game.canvas.width，Game.canvas.height）；
};
Game.productDetails=功能（产品、成本、收入、拥有、posX、posY）{
Game.ctx.beginPath（）；
Game.ctx.fillStyle=“青色”；
Game.ctx.fillRect（posX，posY，125100）；
Game.ctx.fillStyle=“黑色”；
游戏.ctx.strokeRect（posX，posY，125100）；
Game.ctx.fillStyle=“darkSlateGrey”；
Game.ctx.font=“10px Arial”；
Game.ctx.textAlign=“left”；
fillText（产品，posX+5，posY+20）；
fillText（“价格：+成本，posX+5，posY+40”）；
Game.ctx.fillText（“每周收入：+收入，posX+5，posY+60”）；
Game.ctx.fillText（“拥有：”+拥有，posX+5，posY+80）；
如果（Game.mousePosition.y>=posY&&Game.mousePosition.y=posX&&Game.mousePosition.x您的解决方案似乎有很多工作要做，只是为了处理“购买”按钮。您一直在跟踪鼠标移动，并且有很多硬编码的按钮位置也不好

一种方法是使用常规的
样式，并将其与css一起放置在画布上，仅使用javascript向其添加
单击
事件监听器，并在需要时隐藏/显示它。这种方法可以避免做不必要的事情，逻辑将归结为切换隐藏/显示和“购买”功能性。
您能否引用一些指南来更好地解释这一点？您可以查看我在html5 canvas snake游戏中的尝试。在index.html中，我制作了一个按钮，在style.css中设置了样式，您可以看到它在javascript文件中的工作方式。希望它能为您提供指导：）