Использование Object.create в цикле forEach - PullRequest
Новая
       39

Использование Object.create в цикле forEach

1 голос
/ 11 сентября 2011

Я пишу карточную игру, используя 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);
});

Существует шесть полотенна странице.Один на каждого игрока

Я использую 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;
        });
    }
};

1 Ответ

1 голос
/ 11 сентября 2011

Ваша ручная переменная не выводится из цикла. Переменные Javascript имеют область действия функции, и вам уже удобно использовать функцию внутри цикла forEach.

Что такое Hand? Обычное соглашение гласит, что имена с заглавными буквами представляют функции конструктора, но Players и Object.create делают его похожим на Hand, это просто объект?

Если Hand уже является объектом (а не конструктором, которым вы злоупотребляете), лучше всего было бы, чтобы initializeHand / setPosition устанавливали закрытые переменные вместо доступа к ним через this. (Конечно, это просто дикое предположение, не глядя на код Hand)

Посмотрев на ваш код Hand, я теперь думаю, что проблема в том, что руки делят массивы faceDownCards и т. Д. Базовый прототип должен использоваться только для общих черт, а массивы и другое состояние экземпляра должны быть установлены при инициализации:

Для конкретного примера измените 

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. Но тогда, я думаю, у вас должна быть идея о том, что вы делаете, верно?

...