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事件侦听器以及隐藏/显示它需要。这样你就可以避免做不必要的事情，逻辑将转向隐藏/显示和“购买”功能。

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

1 个答案: