mouse click events in javascript using the html5 canvas

Question

Looking for some advice with a little game I'm making.

It's an investment simulator. Nothing fancy, just a project to test my ability with javascript so far.

I'm trying to create a buy button, but it's proving very difficult.

From what I can see there are no fancy imports for the implementation of javascript buttons onto an HTML5 canvas.

Please take a look at my js file and see what you think the issue is.

So far, when I execute this code as it is, the program doesn't run. If you remove the if statements from the productDetails function, it will run but there is no functionality as yet, that's where I need support.

thanks, James.

Code as follows:

    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);
};

Tomasz Bubała · Accepted Answer · 2017-07-01 13:53:27Z

1

Your solution seems like a lot of work to do just for handling "buy" button. You are constantly tracking mouse movement and there's a lot hardcoded button positions which is also not good.

One way to do it is with regular <button> style and position it with css on top of your canvas and use javascript only for adding click event listener to it and for hiding/showing it if you need to. This way you avoid doing unnecessary things and the logic will come down to toggle hide/show and "buying" functionality.

answered Jul 1, 2017 at 13:53

Tomasz Bubała

2,1731 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Lewis Over a year ago

Could you possibly cite any guides that may better explain this?

Tomasz Bubała Over a year ago

github.com/tomegz/snake-project You can check out my attempt on html5 canvas snake game. In index.html i made a button, styled it in style.css and you can see how it works in javascript files. Hope it serves you as a guide :)

Collectives™ on Stack Overflow

mouse click events in javascript using the html5 canvas

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related