在javascript中使用html5画布点击鼠标事件

Question

寻找一些建议，我正在制作一个小游戏。

这是一个投资模拟器。没有什么奇特的，只是一个项目来测试我的能力，迄今为止。

我试图创建一个购买按钮，但它证明非常困难。

从我可以看到没有任何花哨的进口实施的JavaScript按钮到HTML5画布上。

请看看我的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事件侦听器，并隐藏/显示它，如果你需要。通过这种方式，您可以避免做不必要的事情，并且逻辑会下来切换隐藏/显示和“购买”功能。