JavaScript Click on instance of image to trigger event

[JLeger91]

Hello I'm trying to make a Point & Click adventure game so I have multiple boxes derived from a PNG image file like so:



When the player clicks on a particular box, a particular event should happen. Being a PNG the image can later be made transparent. In any case, here is the code I have so far:

class Layer {
    constructor(game, width, height, image) {
        this.game = game;
        this.width = width;
        this.height = height;
        this.image = image;
        this.x = 0;
        this.y = 0;
    }
    update() {
    }
    draw(context) {
        context.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
}

export class Background {
    constructor(game) {
        this.game = game;
        this.width = 640;
        this.height = 480;
        this.backgroundImage = document.getElementById('background');
        this.eventRect = document.getElementById('eventRect');


        this.background = new Layer(this.game, this.width, this.height, this.backgroundImage);
        this.ladder = new Layer(this.game, 80, 360, this.eventRect);
        this.ladder.x = 0;
        this.ladder.y = 100;
        this.steering = new Layer(this.game, 120, 200, this.eventRect);
        this.steering.x = 230;
        this.steering.y = 175;
        this.propellor = new Layer(this.game, 200, 200, this.eventRect);
        this.propellor.x = 450;
        this.propellor.y = 300;
        this.outAtSea = new Layer(this.game, 300, 200, this.eventRect);
        this.outAtSea.x = 350;
        this.outAtSea.y = 100;
        this.atTheShip = new Layer(this.game, 275, 175, this.eventRect);
        this.atTheShip.x = 80;
        this.atTheShip.y = 0;


        this.backgroundLayers = [this.background, this.ladder,
            this.steering, this.propellor, this.outAtSea, this.atTheShip];
    }

So far I've tried adding an event listener to click on an individual box like so:

//this.ladder.addEventListener('click', function (e) {
        //console.log("ladder clicked");
        //});

But it doesn't seem to be quite so easy.

 

[OldMan]

I would use maps to the image instead. Read this whole page to see what can help you: HTML Image Maps

 

[cli345]

I think OldMan is right.
But waiting to understand HTML Image Maps, you can just try to fix your code (At least, to understand what goes wrong).

The type of 'this.ladder' is 'Layer' which is not an element of DOM; so it does not have a "addEventListener" method.
But 'this.backgroundImage' is an element of DOM and you put it into 'this.ladder.image'.
So, I think you should be able to do "this.ladder.image.addEventListener(...)"

 

[JLeger91]

I would use maps to the image instead. Read this whole page to see what can help you: HTML Image Maps

thank you, this workmaps codes does what it's supposed to do; the only problem is that I cannot visualize where the coordinates are and another problem is that sometimes when I leftclick, a menu pops up prompting webpage options

 

[JLeger91]

I think OldMan is right.
But waiting to understand HTML Image Maps, you can just try to fix your code (At least, to understand what goes wrong).

The type of 'this.ladder' is 'Layer' which is not an element of DOM; so it does not have a "addEventListener" method.
But 'this.backgroundImage' is an element of DOM and you put it into 'this.ladder.image'.
So, I think you should be able to do "this.ladder.image.addEventListener(...)"

Interesting, the code reads when I put it in the class Background update function but the code reads automatically very quickly, over and over again. I only want the code to read when clicked.

update() {
    this.ladder.image.addEventListener('click', console.log('ladderClick'));
}

furthermore if I try:

update(){
    if(!this.clicked) {
        this.ladder.image.addEventListener('click', function() {
            console.log('ladderClick');
            this.clicked = true;
        });
    }
}

The code doesn't run automatically but the image cannot be clicked; perhaps the image never could be clicked.
What I like about this coding option is that each rectangle can be visualized and each rectangle can be moved up and down with the bogging of the ship.

 

[JLeger91]

Fascinating! Thanks to OldMan with his HTML Image Maps I'm able to attach an event listener for the area rectangle and have it hide the eventRect altogether when clicked, as to not produce a second click or any double click. With this, an area rectangle can be clicked and clicked only once!