如何将事件监听器（点击）添加到 canvas object？

Question

I am building a new Javascript game with canvas and I would like to add an event listener to each object. I want to draw a useful joystick (arrows) when the game is opened from a smartphone/tablet. So, the player will be able to move the character by clicking each arrow.

This is what I have:

Game.js:

class Game {
    constructor() {
        this.touchDevice = false;
        this.joystickDown = new Down();
        this.joystickLeft = new Left();
        this.joystickRight = new Right();
        this.joystickUp = new Up();
        this.imgDownArrow = new Image();
        this.imgLeftArrow = new Image();
        this.imgRightArrow = new Image();
        this.imgUpArrow = new Image();
        this.gameStruct = new Object();
        this.gameLoaded = true;
        this.gameOver = false;
    }
}

    initialize(width = 640, height = 480) {
        console.log("Game initialized");
        this.canvas = document.getElementById("canvas");
        this.canvas.width = width;
        this.canvas.height= height;

        if(this.canvas && this.canvas.getContext) {
            this.ctx = this.canvas.getContext("2d");
            if(this.ctx) {
                this.ctx.strokeStyle="#000";

                this.gameStruct.ctx = this.ctx;
                this.gameStruct.canvas = this.canvas;

                function is_touch_device() {  
                    try {  
                      document.createEvent("TouchEvent");
                      return true;  
                    } catch (e) {  
                      return false;  
                    }  
                  }

                this.touchDevice = is_touch_device();

                if(this.touchDevice) {                  
                    this.imgDownArrow.src = "img/joystick/arrow_down.png";
                    this.imgLeftArrow.src = "img/joystick/arrow_left.png";
                    this.imgRightArrow.src = "img/joystick/arrow_right.png";
                    this.imgUpArrow.src = "img/joystick/arrow_up.png";

                    this.gameStruct.imgDownArrow = this.imgDownArrow;
                    this.gameStruct.imgLeftArrow = this.imgLeftArrow;
                    this.gameStruct.imgRightArrow = this.imgRightArrow;
                    this.gameStruct.imgUpArrow = this.imgUpArrow;

                    this.joystickDown.initialize(this.gameStruct);
                    this.joystickLeft.initialize(this.gameStruct);
                    this.joystickRight.initialize(this.gameStruct);
                    this.joystickUp.initialize(this.gameStruct);                    
                }

            } else 
                alert("error_context");
            }
    }

    animate() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        if(!this.gameOver) {
            this.player.draw();
            if(this.touchDevice) {
                this.joystickDown.draw();
                this.joystickLeft.draw();
                this.joystickRight.draw();
                this.joystickUp.draw();
            }
        }
        window.requestAnimationFrame(this.animate.bind(this));
    }

Down.js:

class Down {
    constructor() {
    }

    initialize(gameStruct) {

        this.gameStruct = gameStruct;
        this.ctx = gameStruct.ctx;
        this.width = gameStruct.canvas.width / 15;
        this.height = gameStruct.canvas.width / 15;
        this.x = (gameStruct.canvas.width) - (this.width*2);
        this.y = gameStruct.canvas.height-this.height;
        this.limitTop = 0;
        this.limitBottom = gameStruct.canvas.height;
        this.limitLeft = 0;
        this.limitRight = gameStruct.canvas.width;
        this.shiftX = this.width / 8;
        this.shiftY = this.height / 8;
        console.log("Joystick initialized");
        return this;
    }

    draw() {
        this.ctx.drawImage(this.gameStruct.imgDownArrow, this.x, this.y, this.width, this.height);
        addEventListener("click", function() {
            console.log("clicked");
        });
        return this.gameStruct;
    }
}

(Code is similar for Left, Right and Up classes. The only difference are their position (X and Y) and their picture in drawImage).

As you can see in my code, I have tried adding addEventListener("click") but when I test it in a web browser, it works when I click anywhere in the screen. However, I only want it to work when I click each object (Down, Left, Right and Up).

I have also tried with this.addEventListener but it did now work either.

This what happens when I click Down:

Also, I do not understand why it prints "click" so many times. I have clicked the down arrow just once! There are like 600 prints like those! It should be just one from Down.js .

Can anyone help?

Answer 1

The reason it is running click so many times is that you are adding the event listener in your draw function, which is being called every single frame, and once for each button. If the game is at 60fps and has been running for just one second, that's 240 event listeners that are all doing the same thing!

Event listeners don't go away, so you only need to add one. Also, just having addEventListener() adds the event listener to the document object. This isn't a problem since your canvas takes up the whole screen, but you can attach an event listener to the canvas specifically with this.canvas.addEventListener() (Inside the game class). I think that would work best in the initialize function.

Now, about having the click only register on the buttons: Unfortunately you can't add event listeners to objects that are not HTML nodes. The only way I've found to get around this is to add an event listener that runs every time you click on the canvas, and then to loop through all the buttons, checking if the click was within the bounds of the buttons.

The function in the event listener can have a parameter

class Game {
    //...
    initialize() {
        //...

        // I put the buttons in an array so that you can loop through them.
        let buttons = [this.joystickDown, this.joystickUp, this.joystickLeft, this.joystickRight];
        this.canvas.addEventListener('mousedown', function(evt) {
            // The X and Y coordinates of the mouse, relative to the top left corner
            let x = evt.clientX;
            let y = evt.clientY;

            for (let button of buttons) {
                // checkClick is a method you'll have to add to the joystick classes. It'll
                // take in X and Y coordinates and tell if they are within the button.
                if (button.checkClick(x, y)) {
                    // This is a method you'll have on the joystick classes to handle the click.
                    button.handleClick();
                }
            }
        });
        //...
    }
    //...
}

Hopefully I didn't make any mistakes in this... You'll notice I replaced the "click" event with "mousedown" because the click event doesn't fire until you let go of the button, but mousedown fires when you press the button.