动态填充Div中数组的值

Question

我正在创建一个函数，它可以根据用户在输入字段中提供的玩家数量来对用户进行扑克牌处理。我已经完成了洗牌功能，但我对处理这张卡有问题。如何根据html中给出的number_of_people值平等地处理整个甲板，例如，如果number_of_people = 3：

Person 1 : S-Q, D-J, D-K, C-7, S-J....
Person 2 : H-6, D-X, D-A, H-2, S-6....
Person 3 : D-Q, H-5, D-8, S-2, S-8....

此外，如果用户插入超过52 number_of_people，它仍将处理和显示，但53岁及以上的玩家将有一个空的手，例如：

Person 53 : 
Person 54 : 
Person 55 : 

下面是我的代码：

HTML：

    <div class="position-ref full-height">

        <div class="content">
            <div class="title m-b-md">
                Let's Play
            </div>

            <div>
                <input id="number_of_people" type="number" max="99" placeholder="No. of People"></input>
                <button onclick="shuffleCards()">Shuffle</button>
            </div>

            <div class="results">
            </div>
        </div>

Javascript：

    // Create a function to distribute card
    function shuffleCards() {
        // Get input value
        var number_of_people = document.getElementById("number_of_people").value

        // Declare card elements
        const card_types = ["S", "D", "C", "H"];
        const card_values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "X", "J", "Q", "K",];

        // Create deck array
        let deck = [];
        
        // Validate the value inserted by user
        if (number_of_people > 0 && number_of_people !== null) {
            // Create a deck of cards
            for (let i = 0; i < card_types.length; i++) {
                for (let x = 0; x < card_values.length; x++) {
                    let card = { cardValue: card_values[x], cardTypes: card_types[i] };
                    deck.push(card);
                }
            }

            // Shuffle the cards
            for (let i = deck.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * i);
                let temp = deck[i];
                deck[i] = deck[j];
                deck[j] = temp;
            }

            // Clear content
            $(".results").html(``);

            // Distribute the card
            for (let i = 0; i < deck.length; i++) {
                console.log(`${deck[i].cardTypes}-${deck[i].cardValue}`)
                $(".results").append( `<p>${deck[i].cardTypes}-${deck[i].cardValue}, </p>` );
            }
        }

        else {
            $(".results").html( `<h3>Input value does not exist or value is invalid</h3>` );
            return;
        }
        
    }
</script>

Answer 1

您可以用以下循环替换“分发卡片”循环：

for (let person = 0; person < number_of_people; person++) {
    $(".results").append(
        $("<p>").append(
            `Person ${person+1}: `,
            deck.splice(-Math.ceil(deck.length / (number_of_people - person))).map(card =>
                `${card.cardTypes}-${card.cardValue}`
            ).join(", ")
        )
    );
}

这实际上是一次从甲板的末端提取出正确数量的卡片，并将它们显示在一行上。因为牌牌是洗牌的，所以你从牌牌的哪个地方拉牌并不重要，所以你最好这样做。

关于您的代码的注释：

if (number_of_people > 0 && number_of_people !== null) {

如果这两个条件中的第一个条件是真的，那么第二个条件也总是正确的，所以没有必要有第二个条件。此外，输入元素的.value属性永远不是null，而是潜在的空字符串。

您确实应该将输入从字符串转换为数字。例如，用一元加：

var number_of_people = +document.getElementById("number_of_people").value;