Question

我正在写一个简单的JavaScript游戏。带着化身和障碍。此刻我在javascript“矩形”中模拟了一个类。代码在这里：

function rectangle (x,y,width,height,verticalvelocity,dangerous,image)
{
        //returns info
         this.x=x;
         this.y = y;
         this.height= height;
         this.width=width;
         this.verticalvelocity=verticalvelocity
         this.jump= jump;
         this.image=image
         this.dangerous=dangerous


         this.drawImg= function() {
         context.drawImage(this.image,this.x,this.y,this.width,this.height)}

         //getters
         this.ycormdd=function () {return (this.y + (this.height /2));} //returns the y coor of the middlepoint
         this.xcormdd= function () {return (this.x + (this.width /2));} //returns the x coor of the middlepoint
         this.danger= function () {if (this.dangerous == 0) {return true} else {return false}};

         //the setters
         this.setdangerous= function (dangerous) {this.dangerous = dangerous};
         this.setx= function (x) {this.x = x};
         this.sety= function (y) {this.y = y};
         this.setwidth= function (width) {this.width = width};
         this.setheight= function (height) {this.height = height};
         this.setimage= function (image) {this.image = image};
         this.setverticalvelocity= function (verticalvelocity) {this.verticalvelocity=verticalvelocity};
}

问题是我使用矩形“class”来表示我的头像和障碍物，所以我输入

var avatar= new rectangle (....)
var obstacle= new rectangle (...)

而这不是它的完成方式。据我所知，我需要制作3个班级。一类化身，一类障碍和一类矩形。由于我的障碍物和头像都用矩形表示，我认为我的头像和矩形“类”都需要访问矩形类。但我完全不知道如何做到这一点：s。有人可以帮忙吗？提前致谢。我认为我未来的矩形“类”应该是这样的：

function rectangle (x,y,width,height,image)
{
        //returns info
         this.x=x;
         this.y = y;
         this.height= height;
         this.width=width
         this.image=image


         //draws a rectangle
         this.drawImg=function () {
         context.drawImage(this.image,this.x,this.y,this.width,this.height)}

         //getters
         this.ycormdd=function () {return (this.y + (this.height /2));} //returns the y coor of the middlepoint
         this.xcormdd= function () {return (this.x + (this.width /2));} //returns the x coor of the middlepoint


         //the setters

         this.setx= function (x) {this.x = x};
         this.sety= function (y) {this.y = y};
         this.setwidth= function (width) {this.width = width};
         this.setheight= function (height) {this.height = height};
         this.setImage = function (image) {this.image = image};
}

但是我需要创建一个头像和障碍类。

我在avatar类中需要的函数是：

setverticalvelocity
getverticalvelocity
（+矩形的功能）

对于我的障碍，我需要：

setdangerous
getdangerous。
（+矩形的功能）

我希望有人理解我的问题。：p

Answer 1

评论中描述的继承可能会导致可怕的多重继承 - 这取决于游戏的复杂程度。

看看装饰师＆amp;战略模式。 http://www.ycit-he.org/files/Resources/PHP%20Objects,%20Patterns,%20and%20Practice.pdf有一个部分（它是php，但这并不重要）。

http://addyosmani.com/blog/decorator-pattern/有javscript代码（我没有读过它所以不知道它可能有多相关。

php代码链接有一个部分，用游戏“tiles”来描述装饰器，这可能很有用。

好的，虽然严格意义上没有使用装饰器，但是我将一些代码放在一起以证明不会继承所有内容。它并不意味着是伟大的代码 - 但是可以使用“伪装饰器”来展示如何使用它。

// this is your basic game tile - presuming all tiles will have a name, can move or not and will have some attributes

game_tile = function(n, m, atts) {
    this.name = n;
    this.mobile = m;
    this.attributes = atts; 

    this.say = function() {
        message = 'i am ' + this.name + ' and i can ';
        if ( ! this.mobile ) {
            message += 'not';
        }
        message += ' move around the game board\n';
        for (i = 0; i < this.attributes.length; i++) {
            message += this.attributes[i].message();
        }
        alert(message);
    }
}

/* these next objects are 'attribute' objects for a game tile */

// this sets starting postion on game board
position = function(x, y) { 
    this.x = x;
    this.y = y;

    this.message = function() {
        return '\n i am at x = ' + this.x + ', y = ' +this.y;
    }
}

// this will draw the image - once the code to do it is written !
picture = function(src, w, h) { 
    this.image = src;   
    this.width = w;
    this.height = h;
    // code to draw image 

    this.message = function() {
        return '\n my image is ' + this.image + ' at size x = ' + this.width + ' y = ' + this.height;
    }
}

// stats for a character 
stats = function(hp, dmg) {
    this.health = hp;
    this.damage = dmg;

    this.message = function() {
        return '\n i have health = ' + this.health + ' and do damage = ' + this.damage;
    }
}

// a special ability 
ability = function(n, dmg) {
    this.name = n;
    this.damage = dmg;

    this.message = function() {
        return '\n i will ' + this.name + ' you for damage = ' + this.damage;
    }
}

// a player has a name, can move and position, picture & stats attributes
player1 = new game_tile('houdini', true, [
    new position(12, 12),
    new picture('mage.png', 24, 24),
    new stats(120, 120)
]);

// this river only has an image and a position
river = new game_tile('the river thames', false, [
    new position(25, 36),
    new picture('river.png', 240, 12),
]);

// a boss - same as a player but with a special ability
boss = new game_tile('ming the merciless', true, [
    new position(52, 52),
    new picture('boss.png', 24, 24),
    new stats(1200, 1200),
    new ability('crush', 80)
]); 

// they say something !
player1.say();
boss.say();
river.say();

Answer 2

我解决了没有原型的问题，我仍然有一个矩形“类”但我的头像现在定义如下：

function avatar(rectangle,verticalvelocity){
//returns info
this.verticalvelocity=verticalvelocity;
//returnns the rectangle
this.getRect=function () {return rectangle;}
.
.
.
}

当我需要例如化身的x坐标时，我输入：

avatar.getRect().getX()

希望这有助于某人;）

如何从这个丑陋的大班制作三个班级？

2 个答案: