Архитектура руки игрока в карточной игре JavaScript

Question

Итак, я пытаюсь сыграть в простую карточную игру. У меня есть player "класс" с функцией draw, и открытые члены deck и hand, оба являются массивами.

Мне нужно вытащить карту из колоды, положить ее в руку и показать в зоне "руки" игрока. Я обеспокоен тем, как я делаю «переворачивать» и «играть» кнопки (через замыкания).

Вот код:

littlegame.player.prototype.draw = function() {
    if (this.canDrawCard()) {
        var card = this.deck.draw(); // this.deck is Array

        //Create card element on the playfield

        var card_object = $('<div class="card"></div>').append($('<span class="attack">' + card.attack + '</span>')).append($('<span class="defence">' + card.defence + '</span>'));

        // Add controls to card
        if (this.playerid == 1) {
            var flipper = $('<span class="flip">Flip</span>');
            flipper.click(function(){
                card.flip();
            });

            var actuator = $('<span class="play">Play</span>');
            console.log('Loading actuator closure with id ' + this.playerid + ' and name ' + this.playername);
            var player = this;

            var old_hand = this.hand.slice(0); // Store a copy of old hand. Stupid trick, i know. It doesn't work

            actuator.click(function(){
                card.play(player.playerid);
                delete card;
                player.hand = old_hand;
            });

            card_object = card_object.append(flipper).append(actuator);
        }

        this.element.append(card_object);
        card.element = card_object;

        // Put card in hand
        this.hand.push(card);
    }
};

Мне нужен способ вызова card.play() и card.flip() на соответствующих нажатиях кнопок, когда card.play знает положение карты в руке, чтобы извлечь карту. Как я могу это сделать?

Answer 1

littlegame.player.prototype.draw = function() {
        if (this.canDrawCard()) {
                var card = this.deck.draw(); // this.deck is Array

                //Create card element on the playfield

                var card_object = $('<div class="card"></div>').append($('<span class="attack">' + card.attack + '</span>')).append($('<span class="defence">' + card.defence + '</span>'));

                // Add controls to card
                if (this.playerid == 1) {
                        var flipper = $('<span class="flip">Flip</span>');
                        flipper.click(function(){
                                card.flip();
                        });

                        var actuator = $('<span class="play">Play</span>');
                        console.log('Loading actuator closure with id ' + this.playerid + ' and name ' + this.playername);
                        var player = this;

                        var old_hand = this.hand.slice(0); // Store a copy of old hand. Stupid trick, i know. It doesn't work

                        actuator.click(function(){
                                card.play(player.playerid);
                                delete card;
                                player.hand = old_hand;
                        });

                        card_object = card_object.append(flipper).append(actuator);
                }

                this.element.append(card_object);
                card.element = card_object;

                // Put card in hand
                this.hand.push(card);
                var hand = this.hand;
                card.remove = function () {
                     var i;
                     for(i=0;i<hand.length;i++) {
                       if(hand[i]===this) {
                           hand.splice(i,1);
                       }
                     }
                }
        }
};

Ключевым моментом здесь является определение функции удаления в области видимости, которая содержит интересующие вас переменные. Здесь я определяю переменную hand, которая делает ее доступной внутри функции удаления, которую я определяю сразу после. Затем вы можете вызвать функцию удаления в любое время. Если вы знаете, что карта не изменит положение в руке, вы можете сделать ярлык, сделав индекс некоторой переменной (скажем, cardposition), и просто скомбинировать там свой массив, или все, что вы хотите сделать со своим массивом.

Answer 2

Я попробовал следующее. Мне пришлось оставить положение карты в массиве рук в закрытии вместе со ссылками на игрока и саму карту. Это выглядит так:

littlegame.player.prototype.draw = function() {
    if (this.hand.length < this.agility) {
        var card = this.deck.draw();

        // Put card in hand
        this.hand.push(card);

        var card_in_hand = this.hand[this.hand.length - 1];
        var card_position = this.hand.length;

        //Create card element on the playfield
        var card_object = $('<div class="card"></div>').append($('<span class="attack">' + card.attack + '</span>')).append($('<span class="defence">' + card.defence + '</span>'));

        // Add controls to card
        if (this.playerid == 1) {
            var flipper = $('<span class="flip">Flip</span>');
            flipper.click(function(){
                card_in_hand.flip();
            });

            var actuator = $('<span class="play">Play</span>');
            console.log('Loading actuator closure with id ' + this.playerid + ' and name ' + this.playername);
            var player = this;

            actuator.click(function(){
                card_in_hand.play(player.playerid);
                player.hand.remove(card_position);
            });

            card_object = card_object.append(flipper).append(actuator);
        }


        this.element.append(card_object);
        card_in_hand.element = card_object;
    }
};

Я также использовал Array.remove() function от John Resig.