javascript - 更改 JavaScript 对象定义样式会导致 Canvas 保持空白

Question

我正在使用canvas标签制作一个HTML5游戏，我正在尝试改变我在JavaScript中创建的类的定义方式，并且我让它使用一种定义样式，而当我尝试在另一种定义样式中定义它时样式它停止工作了。我不确定我做错了什么，因为我刚刚熟悉 JavaScript。当我尝试其他定义方式时，我的 Canvas 不起作用，屏幕上什么也没有出现。

本质上，在不起作用的版本中，我尝试创建对象 Player()，然后创建一个新的玩家对象，以便我可以使用我在其余过程中进行的其余的player.doThis() 调用脚本的内容。

var player = new Player();

工作声明

var player = {
    color: "#00A",
    x: 10,
    y: playerLocation,
    width: 32,
    height: 32,
    speed: (10/1830) * CANVAS_WIDTH,
    zone: [0, 0],
    //sprite: Sprite("player.png"),
    //spriteImage: new Image(),
    //spriteImage.src =  "player.png",

    draw: function() {
        canvas.fillStyle = this.color;
        canvas.fillRect(this.x, this.y, this.width, this.height);
    },

    drawDebug: function() {
        canvas.font = "normal 7pt Arial";
        //canvas.fillText("Cosine: " + transition , this.x, (this.y-55));
        canvas.fillText("In Zone " + this.zone[0] + " of " + this.zone[1], this.x, (this.y-45));
        //canvas.fillText("Zones " + this.zone[1], this.x, (this.y-55));
        canvas.fillText("X: " + this.x , this.x, (this.y-35));
        canvas.fillText("Y: " + this.y , this.x, (this.y-25));
    },


    determineZones: function(numberOfZones) {
        //this sets the boundaries of the zones
        zoneLocations[0] = 0;
        var gap = CANVAS_WIDTH - (infoBoundaries * 2) - infoWidth;
        for (var i = 1; i < numberOfZones; i++)
        { 
            zoneLocations[i] = (gap / (numberOfZones - 1)) * i;
        }
    },

    update: function() { //all of the controls are placed in here
        if ((keydown.left) || (keydown.a))
        {
            this.x -= this.speed;
        }
        if ((keydown.right) || (keydown.d))
        {
            this.x += this.speed;
        }
        this.x = this.x.clamp(0, CANVAS_WIDTH - this.width);

        if(scene == SCENES.length)//this would added controls for perhaps that last boss levels
        {                       
        }
    },

};

不工作声明(我正在努力工作)

function Player()
{
    this.color = "#00A";
    this.x = 10;
    this.y = playerLocation;
    this.width = 32;
    this.height = 32;
    this.speed = (10/1830) * CANVAS_WIDTH;
    this.zone = [0, 0];
    //sprite: Sprite("player.png"),
    //spriteImage: new Image(),
    //spriteImage.src =  "player.png",

    function draw()
    {
        canvas.fillStyle = this.color;
        canvas.fillRect(this.x, this.y, this.width, this.height);
    }

    function drawDebug()
    {
        canvas.font = "normal 7pt Arial";
        //canvas.fillText("Cosine: " + transition , this.x, (this.y-55));
        canvas.fillText("In Zone " + this.zone[0] + " of " + this.zone[1], this.x, (this.y-45));
        //canvas.fillText("Zones " + this.zone[1], this.x, (this.y-55));
        canvas.fillText("X: " + this.x , this.x, (this.y-35));
        canvas.fillText("Y: " + this.y , this.x, (this.y-25));
    }


    function determineZones(numberOfZones)
    {
        //this sets the boundaries of the zones
        zoneLocations[0] = 0;
        var gap = CANVAS_WIDTH - (infoBoundaries * 2) - infoWidth;
        for (var i = 1; i < numberOfZones; i++)
        { 
            zoneLocations[i] = (gap / (numberOfZones - 1)) * i;
        }
    }

    function update()
    { //all of the controls are placed in here
        if ((keydown.left) || (keydown.a))
        {
            this.x -= this.speed;
        }
        if ((keydown.right) || (keydown.d))
        {
            this.x += this.speed;
        }
        this.x = this.x.clamp(0, CANVAS_WIDTH - this.width);

        if(scene == SCENES.length)//this would added controls for perhaps that last boss levels
        {                       
        }
    }
}
var player = new Player();

无论如何，如果我在定义这个 javascript 类时做错了什么，请告诉我。

Answer 1

问题是您正在使用 function functionName() {} 创建方法而不是this.functionName = function() {} (注意 this 部分，它很重要)。不幸的是，你不能这样做function this.functionName() {}因为这是一个语法错误。

您可以通过console.log(player.update)看到这一点，您会看到它是未定义的。

解决方案:在创建函数时使用它。

this.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
}

this.drawDebug = function() {
    canvas.font = "normal 7pt Arial";
    //canvas.fillText("Cosine: " + transition , this.x, (this.y-55));
    canvas.fillText("In Zone " + this.zone[0] + " of " + this.zone[1], this.x, (this.y - 45));
    //canvas.fillText("Zones " + this.zone[1], this.x, (this.y-55));
    canvas.fillText("X: " + this.x, this.x, (this.y - 35));
    canvas.fillText("Y: " + this.y, this.x, (this.y - 25));
}


// So on

this.update = function() { //all of the controls are placed in here
    if ((keydown.left) || (keydown.a)) {
        this.x -= this.speed;
    }
    if ((keydown.right) || (keydown.d)) {
        this.x += this.speed;
    }
    this.x = this.x.clamp(0, CANVAS_WIDTH - this.width);

    if (scene == SCENES.length) //this would added controls for perhaps that last boss levels
    {}
}

或者，您可以将函数附加到 prototype目的。例如:

function Player() {
  // Non function declarations here
}
Player.prototype.draw = function() {
  // Whatever
}
Player.prototype.drawDebug = function() { // etc.
}

这样做的好处是可以节省内存，特别是因为您可能不会重新分配给这些属性(也就是说，您不会写 player.draw = function() { /* New function here */ } 吗？如果您这样做，即使使用原型(prototype)方法，也没关系，它只是不会节省内存。

(可能的)缺点是 player.hasOwnProperty("draw")或player.hasOwnProperty("drawDebug")将返回 false (即使 player 具有该属性)。另一个缺点是这些函数无法直接访问任何 var构造函数中的声明。