How to make three classes out of this big ugly class?

Question

I'm writing a simple javascript game. With an avatar and obstacles. At this moment I simulated a class in javascript "rectangle". The code is here:

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};
}

The problem is that I use the rectangle "class" for both my avatar and obstacle so I type

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

And that's just not how it's done. As far as I understand I need te make 3 classes. One class avatar, one class obstacle and one class rectangle. Since both my obstacle and avatar are represented by a rectangle, I think both my avatar and rectangle "class" needs to have access to the rectangle class.But I have absolutely no idea how to do this :s. Can somebody please help? thanks in advance. I think my future rectangle "class" should look like this:

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};
}

But than I need to create an avatar and obstacle class.

functions I need in the avatar class are:

• setverticalvelocity
• getverticalvelocity
• (+ functionality from rectangle)

And for my obstacle, I need:

• setdangerous
• getdangerous.
• (+ functionality from rectangle)

I hope somebody understands my question. :p

Answer 1

I solved the problem without prototype, I still have a rectangle "class" But my avatar is now defined as follow:

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

And when I need for example the x coordinate of the avatar, I type:

avatar.getRect().getX()

Hope this helps somebody ;)

Answer 2

Inheritance as described in the comments may lead to horrible multiple inheritance - it depends on how complicated the game is going to get.

Take a look at decorator & strategy patterns. http://www.ycit-he.org/files/Resources/PHP%20Objects,%20Patterns,%20and%20Practice.pdf has a section (it's php but that doesn't matter too much).

http://addyosmani.com/blog/decorator-pattern/ has javscript code (I haven't read it through so don't know how relevant it might be.

The php code link has a section that describes decorators in terms of game "tiles" which may be useful.

Ok, while not using decorators in the strict sense here's some code i put together to demonstrate not inheriting everything. It's not meant to be great code - but to show how you use "pseudo decorators" can be used.

// 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();