машинопись: requestAnimationFrame и обработчик событий: keyup / keydown - PullRequest
Новая
       6

машинопись: requestAnimationFrame и обработчик событий: keyup / keydown

0 голосов
/ 31 августа 2018

Это странно? Я не могу заставить requestAnimationFrame работать вместе с keyl / down для EventListeners, когда он находится в классе машинописи - но он работает нормально, если я вне класса? Помогите мне решить эту проблему или просто скажите, почему он никогда не будет работать внутри класса ... 

  class GameEngine
{
    private aKey:boolean
    private canvas:HTMLCanvasElement;
    private ctx:CanvasRenderingContext2D;

    constructor()
    {
        this.canvas = <HTMLCanvasElement> document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");

        document.addEventListener('keyup', this.keyUp, false);
        document.addEventListener('keydown', this.keyDown, false);

        this.loop();
    }

    private keyDown(event:KeyboardEvent): void
    {
        if (event.repeat) {return};
        console.log("KeyDown");
        console.log(this.aKey);
        if (event.key == 'a')
        {
            this.aKey = true;
            console.log(this.aKey);
        }
    }

    private keyUp(event: KeyboardEvent): void
    {
        if (event.key == 'a')
        {
            this.aKey = false;
        }   
    } 


    private loop()
    {
        console.log(this.aKey);
        if (this.aKey == true) this.ctx.fillRect(10,10,10,10);
        window.requestAnimationFrame(this.loop.bind(this));

    }
}

new GameEngine();

когда я нажимаю клавишу 'a', в консоли записывается значение true / false, как и ожидалось но цикл продолжает печатать «неопределенный»?

1 Ответ

0 голосов
/ 31 августа 2018

Если для прикрепления функции обработчика к элементу с помощью addEventListener (), значение этого внутри обработчика является ссылка на элемент. * * +1002

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

В вашем примере this является объектом документа.

Просто используйте метод bind для вашего слушателя, и он должен работать нормально. Вы можете прочитать об этом в ссылке, которую я написал выше. 

document.addEventListener('keyup', this.keyUp.bind(this));
document.addEventListener('keydown', this.keyDown.bind(this));
...