在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事件偵聽器，並隱藏/顯示它，如果你需要。通過這種方式，您可以避免做不必要的事情，並且邏輯會下來切換隱藏/顯示和「購買」功能。