问更改JavaScript对象定义样式将使画布保持空白。
EN

Stack Overflow用户

提问于 2014-08-11 15:15:52

回答 1查看 123关注 0票数 0

我正在使用画布标记制作一个HTML5游戏，我试图改变我在JavaScript中创建的类的定义方式，我让它使用一种定义样式，而当我试图用另一种风格定义它时，它就停止工作了。我不知道我做错了什么，因为我刚刚开始熟悉JavaScript。当我尝试另一种定义风格时，我的画布不起作用，屏幕上什么也没有出现。

本质上，在不起作用的版本中，我尝试创建对象Player()，然后用它创建一个新的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类时做错了什么，请告诉我。

javascript

html

class

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-11 15:25:45

问题是您正在使用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.
}