Javascript 如何从事件函数调用模块模式中的函数

我正在尝试Javascript模块模式和html5画布，制作了一个简单的基于html5的游戏，遇到了第一个障碍。我正在画布上收听mousemove事件

init: function () {
    var gameCanvas = document.getElementById("gameCanvas");
    gameCanvas.addEventListener("mousemove", this.redrawAvatar);
}

我所做的是让我的化身跟随鼠标指针在画布上的移动

然后问题是，我的模块中有几个函数，我希望从

重画化身

函数内部调用这些函数，如下所示：

redrawAvatar: function (mouseEvent) {
    var gameCanvas = document.getElementById("gameCanvas"),
    avatarCoord = {x: mouseEvent.offsetX, y: mouseEvent.offsetY},
    enemyCoord = {x: 100, y: 100};

    this.clear(gameCanvas);
    this.drawAvatar(avatarCoord);
    this.drawEnemy(enemyCoord);

    if (that.isCollision({coord: avatarCoord, size: 30}, {coord: enemyCoord, size: 30})) {
       alert("Avatar died, collided with enemy");
    }
}

在

重画头像
的内部，这个对象不再是我的模块，而是事件的来源（在本例中是画布）

以下是我的模块的要点：

var MyGame = (function () {

    var Game = {

        draw: function (image, coord) {},

        drawAvatar: function (coord) {},

        clear: function (canvas) { canvas.width = canvas.width + 1 - 1;},

        drawEnemy: function (xPos, yPos) {},

        isCollision: function (a, b) {},

        redrawAvatar: function (mouseEvent) {
            var gameCanvas = document.getElementById("gameCanvas"),
                avatarCoord = {x: mouseEvent.offsetX, y: mouseEvent.offsetY},
                enemyCoord = {x: 100, y: 100};

            this.clear(gameCanvas);
            this.drawAvatar(avatarCoord);
            this.drawEnemy(enemyCoord);
            if (that.isCollision({coord: avatarCoord, size: 30}, {coord: enemyCoord, size: 30})) {
                alert("Avatar died, collided with enemy");
            }
        },

        init: function () {
            var gameCanvas = document.getElementById("gameCanvas");
            gameCanvas.addEventListener("mousemove", this.redrawAvatar);
        }
    };

    (function () {
        var that = Game;
        that.init();
    }());

}());

如何访问我想调用的模块中的函数？
您可以在函数中使用当前上下文（在您的情况下是游戏模块），而不是事件上下文

gameCanvas.addEventListener("mousemove", this.redrawAvatar.bind(this));

下面是一个基本的演示，再现了绑定效果。它使用单击事件


var MyGame=（函数（）{
var博弈={
范围：5，
重画化身：函数（mouseEvent）{
警报（此范围）；
},
init：函数（）{
var gameCanvas=document.getElementById（“d”）；
gameCanvas.addEventListener（“单击”，this.redrawravatar.bind（this））；
}
};
（功能（）{
var=游戏；
init（）；
}());
}());
点击处理程序的基本元素（点击演示）