代码之家 › 专栏 › 技术社区 › Kuroki Kaze

JavaScript纸牌游戏中玩家手的体系结构

refactoring architecture javascript

Kuroki Kaze · 技术社区 · 15 年前

所以,我在尝试简单的纸牌游戏。我有 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 知道卡在手上的位置,取下卡。我该怎么做?

2 回复 | 直到 15 年前

Breton 15 年前

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函数中立即可用。然后,您可以随时调用remove函数。如果你知道卡片在手上的位置不会改变,你可以通过使索引变为一些变量(比如, cardposition )只需将阵列拼接到那里,或者对阵列执行任何操作。

Kuroki Kaze 15 年前

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