如何将事件侦听器（click）添加到画布对象？

Question

我正在用canvas构建一个新的Javascript游戏，我想为每个对象添加一个事件监听器。我想画一个有用的操纵杆（箭头），当游戏从智能手机/平板电脑打开。所以，玩家可以通过点击每个箭头来移动角色。

这就是我所拥有的：

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

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

Answer 1

它运行click如此多次的原因是您要在draw函数中html" target="_blank">添加事件监听器，每个帧都会调用该事件监听器，每个按钮只调用一次。如果游戏是60fps并且只运行了一秒，那么240个事件监听器都在做同样的事情！

事件侦听器不会消失，所以您只需要添加一个。而且，只要使用addeVentListener()就可以将事件侦听器添加到document对象中。这不是问题，因为您的画布占用了整个屏幕，但是您可以使用This.canvas.AddEventListener()（在game类内部）将事件监听器附加到画布。我认为在initialize函数中使用效果最好。

现在，关于只在按钮上注册click：不幸的是，您不能向不是HTML节点的对象添加事件侦听器。我找到的唯一解决方法是添加一个事件监听器，它在每次单击画布时都运行，然后循环所有按钮，检查单击是否在按钮的范围内。

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();
                }
            }
        });
        //...
    }
    //...
}