0

JavaScript で次の「敵」クラスを取得しました。

function Enemy(position, rotation) {
    this.name = null;

    this.enemyForm = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 20,
        height: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
    });
    this.setX(position.posX);
    this.setY(position.posY);
    this.setRotation(rotation);
    this.setOffset(10, 10);
    this.add(this.enemyForm);
}

Enemy.prototype = new Kinetic.Group();

ご覧のとおり、Kinetic.Group を拡張します。これは、敵が Rectangle だけでなく、いくつかのキネティック エレメントを持つためです。

次に、その「クラス」のインスタンスをいくつか作成し、それらをゲーム レイヤーに追加します。

 var enemy1 = new Enemy({posX: 50, posY: 50}, 0);
 this.layer.add(enemy1);
 var enemy2 = new Enemy({posX: 100, posY: 100}, 0);
 this.layer.add(enemy2);
 var enemy3 = new Enemy({posX: 200, posY: 200}, 0);
 this.layer.add(enemy3);

問題: すべての敵は、自分自身の位置ではなく、「enemy3」の位置を取得します。したがって、すべての敵は「200, 200」の位置に描画されます。 継承なしでこれを試してみると、うまくいきます：

function Enemy(position, rotation) {
    this.name = null;
    this.enemyForm = new Kinetic.Group();

    var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 20,
        height: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
    });
    this.enemyForm.setX(position.posX);
    this.enemyForm.setY(position.posY);
    this.enemyForm.setRotation(rotation);
    this.enemyForm.setOffset(10, 10);
    this.enemyForm.add(rect);
}

何が欠けているのか、最初の方法で個別のオブジェクトを取得できないのはなぜですか?

4

3 に答える 3

2

Kinetic.Group のサブクラス化に問題はありません。

// a bunch of code from 
// http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js

//optionally a config object can be passed to the constructor
//http://kineticjs.com/docs/Kinetic.Group.html
var Test = function(config){
  Kinetic.Group.call(this,config);
};
Test.prototype=Object.create(Kinetic.Group.prototype);

var test = new Test();

for(s in test){
  console.log(s);
}
于 2013-09-15T08:10:59.897 に答える
1

私は運動群のコードを見たことはありません。ただし、コードがクロージャーを使用して次のようなプライベート変数を作成すると、この問題が発生する可能性があります。

Kinetic.Group = function(){
    var setX, getX;
    (function() {
       var X = 0;
       getX = function(){
          return X ;
       };
       setX = function(v){
          X = v;
       };
     })();

    this.setX = setX;
    this.getX = getX;
}

宣言するEnemy.prototype = new Kinetic.Group();と、Kinetic.Group が 1 つだけ作成されます。this.setX(position.posX);内部で呼び出すと function Enemy(position, rotation)、この関数は現在のインスタンスに存在しないため、プロトタイプ プロパティでその関数を検索します (Kinetic.Groupすべての について同じEnemy)。コンストラクター関数によって作成されたすべてのインスタンスはvar X = 0; 、クロージャーによってキャプチャされた同じ変数を共有します。

Kinetic.Group2 番目のケースでは、新しいfor eachを作成するため、これは発生しませんEnemy。

更新：（のコードを見た後Kinetic.Group

コードでは、ケースが異なることがわかります。それぞれがすべてのプロパティKinetic.Groupの を維持し、は で定義されたメソッドです=> すべての Enemy インスタンスは、使用時に同じインスタンスを共有しますthis.attrs = {};setXgetXKinetic.Group.prototypeattrsKinetic.GroupEnemy.prototype = new Kinetic.Group();

残念ながら、このコードでは継承を使用できません。

于 2013-09-14T13:03:10.523 に答える