Canvas实体构造函数

时间:2017-04-11 14:50:31

标签: javascript canvas

我试图制作一种构造函数,以便将来更容易创建实体。现在我完成了第一个制作播放器的事情,但它没有看到实体功能内部的功能。

我的错误:无法读取属性'更新'未定义的

我的代码:

(function () {
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');

 var entity = function(type,x,y,vx,vy,life) {
    var self = {
        x : canvas.width / 2,
        y : canvas.height / 2,
        vx : 5,
        vy : 5,
        life : 100,
        pressingDown : false,
        pressingUp : false,
        pressingLeft : false,
        pressingRight : false
    };

    if(self.type == 'player') {
        alert('we got a player');
    };

    self.update = function(){
        self.updatePosition();
        self.draw();
    };
    self.updatePosition = function(){
        console.log('position');
    };
    self.draw = function(){
        console.log('drawing');
    };
};

var actor = function(type,x,y,vx,vy,life) {
    var self = entity(type, 25, 25, 5, 5, 100);
    return self;
};

var Player = function() {
    var p = actor('player', 25, 25, 5, 5, 100);
    p.pressingDown = false;
    p.pressingUp = false;
    p.pressingLeft = false;
    p.pressingRight = false;
};

var update = function(){
    player.update();
};

var player = new Player();

setInterval(function(){
    update();
},30)


})();

有谁能发现我在这里做错了什么?谢谢!

1 个答案:

答案 0 :(得分:0)

播放器没有update方法请注意您在thix上下文中使用new

var Player = function() {
    var p = actor('player', 25, 25, 5, 5, 100);
    p.pressingDown = false;
    p.pressingUp = false;
    p.pressingLeft = false;
    p.pressingRight = false;

    this.update = p.update; //<<<<< here
};

var update = function(){
    player.update();
};

var player = new Player();

我想补充一点,你应该坚持一种创建对象的方法

var Entity = function(x, y, z) {
    this.x = x;
    this.y = y;    
    this.z = z; 
}
var e = new Entity(1,2,3);

var entity = function(x, y, z) {
    var obj {
        x: x,
        y: y,
        z: z
    }
    return obj;
}
var e = entity(1,2,3);

否则你的代码将变得越来越难以理解,并且你会更频繁地遇到这样的问题