이 거친 클래스에서 3 개의 클래스를 만드는 방법은 무엇입니까?

Question

저는 간단한 자바 스크립트 게임을 작성하고 있습니다. 아바타와 장애물. 이 순간 나는 자바 스크립트 "사각형"에서 클래스를 시뮬레이션했습니다. 코드는 여기에 있습니다 :

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

문제는 내가

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

를 입력하고 어떻게하는지 그건 그냥 그래서 내 아바타와 장애물 모두 직사각형 "클래스"를 사용한다는 것입니다. 내가 아는 한 te는 3 개의 클래스를 만들 필요가있다. 하나의 클래스 아바타, 하나의 클래스 장애물 및 하나의 클래스 사각형. 내 장애물과 아바타 모두 사각형으로 표시되기 때문에 아바타와 사각형 "클래스"모두 사각형 클래스에 액세스 할 필요가 있다고 생각합니다. 그러나 어떻게해야하는지 전혀 알 수 없습니다. 누군가 제발 도와 줄 수 있니? 미리 감사드립니다. 내 미래의 사각형 "클래스"는 다음과 같이 보일 것입니다 :

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

하지만 아바타와 장애물 클래스를 생성해야합니다. 내가 아바타 클래스에 필요한

기능은 다음과 같습니다

• setverticalvelocity
• getverticalvelocity
• (+ 직사각형의 기능)

그리고 내 장애물에 대한, 나는이 필요합니다

• 위험한
• getdangerous.
• (사각형에서 + 기능)

나는 누군가가 내 질문을 이해 바랍니다. : p

Answer 1

나는, 나는 아직도 직사각형 "클래스"가 프로토 타입없이 문제를 해결하지만 내 아바타는 이제 다음과 같이 정의된다 :

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

을 내가 예를 들어 필요한 때 x 아바타의 좌표 내가 입력 :

avatar.getRect().getX() 

희망이 사람을 도움)

Answer 2

설명에 설명 된대로 상속을하면 끔찍한 다중 상속이 발생할 수 있습니다. 게임이 얼마나 복잡한 지에 따라 다릅니다.

데코레이터 & 전략 패턴을 살펴보십시오. http://www.ycit-he.org/files/Resources/PHP%20Objects,%20Patterns,%20and%20Practice.pdf에는 섹션이 있습니다 (PHP이지만 너무 중요하지는 않습니다).

http://addyosmani.com/blog/decorator-pattern/

내가 그렇게 될 수있는 방법을 관련 모르는 통해 그것을 읽지 않은 (에 javscript 코드가 있습니다.

PHP 코드 링크가있는 수도 게임 "타일"의 관점에서 장식을 설명하는 섹션이 유용하다.

괜찮은 데코레이터를 사용하지 않는 것은 엄격한 의미에서 모든 것을 상속받지 않음을 보여주기 위해 모아 놓은 코드입니다. 위대한 코드는 아니지만 "의사 장식"을 사용하는 방법을 보여줄 수 있습니다. .

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