Question

我正在使用TypeScript编写Snake游戏，但无法定义KeyListener（用于更改Snake方向的箭头键）。

我有一个4层架构，关键事件在Gui Class中处理。这可以保存Snake对象，绘制蛇并处理关键事件。

我尝试了正常的方法，但是在handleEvt里面，蛇对象是未定义的。

document.addEventListener("keydown", handleEvt)

所以我尝试了胖箭头方法，但现在根本没有调用该函数。我怀疑关键监听器改变了上下文并且不再在窗口上工作

document.addEventListener("keydown", () => handleEvt)

任何人都可以解释这里的问题是什么吗？非常感谢！

以下是我的Gui课程：

/// <reference path="../model/Snake.ts" />
/// <reference path="../model/Direction.ts" />
/// <reference path="../model/Part.ts" />
/// <reference path="../dao/Dao.ts" />
/// <reference path="../service/Service.ts" />
/// <reference path="../model/IPosObject.ts" />

module gui {

    export class Gui {
        snake:model.Snake;
        canvas:HTMLCanvasElement;
        ctx:CanvasRenderingContext2D;
        loop:any;

        lineWidth:number;
        canvasSize:number;
        loopSpeed:number;
        unitLength:number;

        constructor(snake:model.Snake) {
            // init constants
            this.snake = snake;
            this.lineWidth = 3;
            this.canvasSize = 200;
            this.loopSpeed = 1000/60;
            this.unitLength = 5;

            // init canvas
            this.canvas = document.getElementsByTagName("canvas")[0];
            this.canvas.width = this.canvasSize;
            this.canvas.height = this.canvasSize;
            this.ctx = this.canvas.getContext("2d");

            // Attach key event
//            document.addEventListener("keydown", this.handleEvt);
            document.addEventListener("keydown", () => this.handleEvt);

            // activate game loop
            this.loop = setInterval( () => this.gameLoop(), this.loopSpeed );
        }

        handleEvt(e):void {
            var direction:model.Direction;

            if (e) {
                switch (e.which) {
                    case 37:
                        console.log("left");
                        direction = model.Direction.Left;
                        break;
                    case 38:
                        console.log("up");
                        direction = model.Direction.Up;
                        break;
                    case 39:
                        console.log("right");
                        direction = model.Direction.Right;
                        break;
                    case 40:
                        console.log("down");
                        direction = model.Direction.Down;
                        break;
                }

                this.snake.changeDirection(direction);
            }
        }

        gameLoop():void {
            if (this.snake) {
                this.drawSnake();
            }
        }

        drawSnake() {
          // draw parts
        }
    }

}

Answer 1

此问题有多种解决方案，您可以通过执行与使用setInterval相同的方法在addEventListener端修复它。在keyDown监听器中，您没有调用handleEvt，因此将其更改为 () => this.handleEvt()。

您可以像上面那样使用它的另一个解决方案是： document.addEventListener("keydown", this.handleEvt);

并像这样声明handleEvt：

handleEvt = (e) => {
    var direction:model.Direction;
    ...<snip>
}

或另一种解决方案： document.addEventListener("keydown", this.handleEvt.bind(this));

如您所见，有不同的解决方案，您可以选择自己喜欢的解决方案。 this丢失了，因为函数没有在实例上调用，这是正常的（但有时令人困惑的）JavaScript行为。

TypeScript中的KeyListener和＆＃34;这个＆＃34;上下文

1 个答案: