1

javascript/html5 を使用してカードゲームを書いています

ゲームステートを ajax リクエストとして取得します。これは、プレイヤーとそのプレイヤーが手に持っているカードをリストする JSON データです。

各プレイヤーをループして、ハンドデータを次のように設定しようとしています

gameState.Players.forEach(function (player, i) {    
    var inx = i + 1;
    var canvas = document.getElementById("player" + inx);
    var ctx = canvas.getContext("2d");

    var hand = Object.create(Hand);
    hand.initialiseHand(player.Hand);
    hand.setPosition(10, 10);
    hand.draw(ctx);
});

ページには 6 つのキャンバスがあります。各プレイヤーに 1 つ

Object.create を使用して、手の新しい「インスタンス」を作成しています。次に draw メソッドを呼び出し、キャンバス上に画像を配置します。

ただし、実際には、各プレイヤーのデータが同じインスタンスに追加されるだけです。

つまり、forEach ループを一周するたびに、hand オブジェクトに割り当てられるカードが増えていきます。

プレイヤーごとに個別のインスタンスを用意したい

では、どうすればこれを達成できますか？

データをループして、ループの反復ごとに新しい手を作成したい

ハンド変数がループから引き上げられたので、毎回同じものを取得していると思いますか?

これが手の外観です

var Hand = {

    faceDownCards: [],
    faceUpCards: [],
    inHandCards: [],

    initialiseHand: function (handData) {
        handData.FaceDownCards.forEach(function (c, i) {
            this.faceDownCards.push(Object.create(Card, pd({ rank: c.Rank, suit: c.Suit })));
        }, this);

        handData.FaceUpCards.forEach(function (c, i) {
            this.faceUpCards.push(Object.create(Card, pd({ rank: c.Rank, suit: c.Suit })));
        }, this);

        handData.InHandCards.forEach(function (c, i) {
            this.inHandCards.push(Object.create(Card, pd({ rank: c.Rank, suit: c.Suit })));
        }, this);

    },

    draw: function (context) {
        this.faceDownCards.forEach(function (c, i) {
            c.draw(context);
        });

        this.faceUpCards.forEach(function (c, i) {
            c.draw(context);
        });

        this.inHandCards.forEach(function (c, i) {
            c.draw(context);
        });
    },

    setPosition: function (x, y) {
        this.x = x;
        this.y = y;
        this.faceDownCards.forEach(function (c, i) {
            c.setPosition(x + i * 70, y);
        });
        this.faceUpCards.forEach(function (c, i) {
            c.setPosition(x + i * 70, y + 60);
        });
        this.inHandCards.forEach(function (c, i) {
            c.setPosition(x + i * 20, y + 80);
            //c.rotation = 3;
        });
    }
};
4

1 に答える 1

1

ハンド変数がループから引き上げられていません。Javascript変数には関数スコープがあり、forEachループ内で関数をすでに便利に使用しています。

何Handですか？Hand通常の規則では、大文字の名前でコンストラクター関数を表しますが、PlayersとObject.createを使用すると、単なるオブジェクトのように見えますか？

がすでにオブジェクトである場合Hand（誤用しているコンストラクターではない場合）、私の最善の策は、initializeHand / setPositionが、を介してアクセスするのではなく、閉じた変数を設定することthisです。（もちろん、これはHandコードを見ずに推測するだけです）

あなたのHandコードを見た後、私は今問題は手がfaceDownCards配列などを共有していることだと思います。基本プロトタイプは共有トレイトにのみ使用する必要があり、配列およびその他のインスタンス-olny状態は初期化時に設定する必要があります：

具体的な例として、

handData.FaceDownCards.forEach(function (c, i) {
    this.faceDownCards.push(Object.create(Card, pd({ rank: c.Rank, suit: c.Suit })));
}, this);

に

 this.faceDownCards = handData.FaceDownCards.map(function (c, i) {
     return Object.create(Card, pd({ rank: c.Rank, suit: c.Suit }));
 });

ps .:周りを回っているすべてのObject.createは、正確に慣用的なJavascriptではありません。しかし、それなら、あなたは自分が何をしているのかについての考えを持っているべきだと思いますよね？

于 2011-09-11T17:47:57.073 に答える