javascript - 运行函数几次后未定义索引

Question

因此，出于学习目的，我尝试用 javascript 创建自己的 Blackjack，尽管代码整体工作正常，但我遇到了一个奇怪的错误。

点击Deal html按钮(调用函数deal())后，我将得到一个playerHand[i] undefined 或 dealerHand[i] 未定义错误，分别位于下面发布的代码的第 114 行或第 118 行。

我注意到，如果我出于某种原因快速单击按钮，也会发生这种情况。我怀疑这与内存优化有关，因此我使用 delete 命令在游戏回合之间重置这些数组，但错误仍然存​​在。

那么，为什么我的数组在使用后会损坏？

谢谢。

JS:

var deck = [];

var dealerHand = [];
var playerHand = [];

var dscore = 0;
var pscore = 0;

var turn = 0;

function Card(suit, src) {
    this.src = src;
    this.suit = getSuit(suit);
    this.value = getValue(src);
};

function getSuit(suit) {
    if (suit == 1) return "Clubs";
    if (suit == 2) return "Diamonds";
    if (suit == 3) return "Hearts";
    if (suit == 4) return "Spades";
};

function getValue(src) {
    if (src == 1) return 11;
    if (src < 10) return src;
    else return 10;
};

function createDeck() {
    for (i=1; i<=4; i++) {
        for(j=1; j<=13; j++) {
            var card = new Card(i, j);
            deck.push(card);
        };
    };
};

function getCard() {
    var rand = Math.floor(Math.random()*deck.length);
    deck.splice(rand,1);
    return deck[rand];
};

function deal() {
    if(turn == 0) {
        dealerHand.push(getCard());
        playerHand.push(getCard());
    };
    dealerHand.push(getCard());
    playerHand.push(getCard());
};

function stand() {
    dealerHand.push(getCard());
};

function clearBoard () {
    $('#player').html("");
    $('#dealer').html("");
};

function resetDeck () {
    delete deck;
    deck = [];
};

function resetHands () {
    delete dealerHand;
    delete playerHand;
    dealerHand = [];
    playerHand = [];
};

function resetScore () {
    pscore = 0;
    dscore = 0;
};

function isAce (arr) {
    for(i=0; i<arr.length; i++) {
        if (arr[i].src == 1) return true;
        else return false;
    };
}

function updateScore() {
    resetScore();

    if (playerHand.length > 0 && dealerHand.length > 0) {
        for(i=0; i<playerHand.length; i++) {
            pscore += playerHand[i].value;
        };

        for(i=0; i<dealerHand.length; i++) {
            dscore += dealerHand[i].value;
        };

        //Regra do Às
        if(pscore > 21 && isAce(playerHand)) {
            pscore -= 10;
        };

        if(dscore > 21 && isAce(dealerHand)) {
            dscore -= 10;
        };
    } else {
        pscore = 0;
        dscore = 0;
    };
};

function showScore () {
    $('#pscore').html("<p>Player Score: " + pscore + "</p>");
    $('#dscore').html("<p>Dealer Score: " + dscore + "</p>");
};

function showCards () {
    for(i=0; i<playerHand.length; i++) {
        var div = $("<div>");
        var img = $("<img>");
        img.attr('src', 'img/cards/' + playerHand[i].suit + '/' + playerHand[i].src + '.png');
        div.append(img);

        $('#player').append(div);
    };

    for(i=0; i<dealerHand.length; i++) {
        var div = $("<div>");
        var img = $("<img>");
        img.attr('src', 'img/cards/' + dealerHand[i].suit + '/' + dealerHand[i].src + '.png');
        div.append(img);

        $('#dealer').append(div);
    };
};

function cleanUp () {
    if (pscore == 21) {
        alert("Blackjack!");
        newGame();
    };

    if (pscore > 21) {
        alert("Bust!");
        newGame();
    };

    if (dscore == 21) {
        alert("You lost!");
        newGame();
    };

    if (dscore > 21) {
        alert("You won!");
        newGame();
    };
};

function newGame () {
    turn = 0;
    clearBoard();
    resetHands();
    resetScore();
    showScore();
    resetDeck();
    createDeck();
};

function gameTurn () {
    clearBoard();
    updateScore();
    showCards();
    showScore();
    cleanUp();
    turn++;
};

$(document).ready(function() {
    newGame();

    $('#deal').on('click', function(){
        deal();
        gameTurn();
    });

    $('#stand').on('click', function(){
        stand();
        gameTurn();
    });
});

CSS:

body {
    background: url(../img/greenbg.png);
}

.holder { 
    width:800px;
    margin:auto;
}

.clearfix { 
    clear:both;
}

#pscore, #dscore {
    color: white;
    margin: 10px;
    display: block;
    font-size: 1.2rem;
    text-shadow: 0 0 5px #000;
}

.container {
    width: 600px;
    height: 300px;
    margin: 10px;
}

div img {
    float: left;
    margin: 10px;
}

div button {
    margin: 10px;
}

HTML:

<html>
    <head>
        <div class="holder clearfix">
            <div id="dscore"><p>Dealer Score: 0</p>
            </div>
            <div id="dealer" class="container">
            </div>
            <div id="pscore"><p>Player Score: 0</p>
            </div>
            <div id="player" class="container">
            </div>
            <div class="">
                <button id="deal">Deal</button>
                <button id="stand">Stand</button>
            </div>
        </div>
    </body>
</html>

Answer 1

您在这个函数中遇到了问题，这可能是罪魁祸首:

function getCard() {
    var rand = Math.floor(Math.random()*deck.length);
    deck.splice(rand,1);
    return deck[rand];
};

正如所写，它会移除一张牌，然后返回牌组中现在处于该位置的牌。如果 rand 是数组中的最后一个元素，则该位置不再有卡片，因此它将返回 undefined。

您应该返回已移除卡本身的值，这是 splice 调用结果的一部分:

function getCard() {
    var rand = Math.floor(Math.random() * deck.length);
    var pick = deck.splice(rand, 1);
    return pick[0];
};

<小时/>

附:现代 ES5 数组实用函数值得学习。例如，您的 isAce 函数可以这样重写，避免在测试第一个元素后总是返回的错误:

function isAce(arr) {
    return arr.some(function(n) {
        return n === 1;
    });
};

或者，更简洁地说:

function isAce(card) {
    return card === 1;        // test a single card
};

function holdsAce(hand) {
    return hand.some(isAce);  // test an array (or hand) of cards
};