Question

我已经查看了这个问题的许多其他答案，无法找到答案。

问题似乎是它没有在我的game.js文件中识别World global。

正确订购html文件

<script src="js/world.js"></script>
<script src="js/game.js"></script>

IN world.js - 这个构造函数应该工作，因为它与我的其他构造函数类似

var World = function(){

    var draw = function(ctx) {
        ctx.drawImage(bg1, 100, 100);
    };
};

在game.js中 - 罪魁祸首可能在这里

请注意，以下这两个函数都不嵌套在任何内容中：

var World;

function init() {
    // Declare the canvas and rendering context
    canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");
    localPlayer = new Player(startX, startY); //WORKS CORRECTLY
    World = new World(); //SHOULD ALSO WORK CORRECTLY

......................

在init函数之外

function draw() {
    // Wipe the canvas clean
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    World.draw(ctx);
    // Draw the local player

    // Draw the remote players
    var i;
    for (i = 0; i < remotePlayers.length; i++) {
        remotePlayers[i].draw(ctx);
    };
    localPlayer.draw(ctx);
};

在World.draw（ctx）是我收到错误的地方

未捕获TypeError：对象[object Object]没有方法'draw'game.js：202 draw

如果您需要更多详细信息，我很乐意为您服务。我会发布我的所有代码，除非它非常大。

Answer 1

如果您使用draw()作为实例方法，则应将其定义为：

var World = function(){

    this.draw = function(ctx) {
        ctx.drawImage(bg1, 100, 100);
    };

};

this关键字允许在World对象之外引用该函数。

使用var限制了对World函数内部的可见性。

Answer 2

如果您需要World的多个实例，那么您需要让构造函数将该函数导出为属性（在this上） - 请参阅Javascript: Do I need to put this.var for every variable in an object?以获取与私有的差异变量。并且不要将您的实例写入与构造函数相同的变量。

function World(){
    this.draw = function(ctx) {
        ctx.drawImage(bg1, 100, 100);
    };
}

var world, ctx;
function init() {
    // Declare the canvas and rendering context
    var canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");

    world = new World(ctx);

    …
}

function draw() {

    world.draw(ctx);

    …
}

如果你只需要一个静态模块（单例），忘记初始化，只使用你赋给World的对象文字，然后作为命名空间。这就是@fahadash所建议的：

World = {
    draw: function(ctx) {
        ctx.drawImage(bg1, 100, 100);
    }
};

var ctx;
function init() {
    // Declare the canvas and rendering context
    var canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");

    // no World initialisation here! Do not try to call `new World`!

    …
}

function draw() {

    World.draw(ctx);

    …
}

未捕获的TypeError：对象[object Object]没有方法'draw'game.js：202 draw

2 个答案: