Question

所以，我正在尝试简单的纸牌游戏。我有player“class”和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);
                       }
                     }
                }
        }
};

这里的关键是在包含你感兴趣的变量的作用域中定义remove函数。在这里，我定义变量hand，这使得它在我之后立即定义的remove函数中可用。然后，您可以随时调用删除功能。如果您知道卡片不会改变手中的位置，您可以通过使索引变为某个变量（例如，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;
    }
};

我还使用了John Resig的Array.remove() function。

球员手建筑学在JavaScript纸牌游戏的

2 个答案: