如何随机化JS然后重复？答案

【问题标题】：How to randomize JS and then repeat?如何随机化JS然后重复？
【发布时间】：2020-06-07 20:37:40
【问题描述】：

我的代码可以将牌组随机化到永远不会拉出同一张牌的程度。抽出一张牌后，它会将其从阵列中移除。关键是，一旦所有的牌都被抽出来，它就会变成“无效”，我宁愿它只是重新随机化牌组并重新开始。

有没有办法做到这一点？

var cards = [
    'clubs-ace',
    'clubs-2',
    'clubs-3',
    'clubs-4',
    'clubs-5',
    'clubs-6',
    'clubs-7',
    'clubs-8',
    'clubs-9',
    'clubs-10',
    'clubs-jack',
    'clubs-queen',
    'clubs-king',
    'diamonds-ace',
    'diamonds-2',
    'diamonds-3',
    'diamonds-4',
    'diamonds-5',
    'diamonds-6',
    'diamonds-7',
    'diamonds-8',
    'diamonds-9',
    'diamonds-10',
    'diamonds-jack',
    'diamonds-queen',
    'diamonds-king',
    'hearts-ace',
    'hearts-2',
    'hearts-3',
    'hearts-4',
    'hearts-5',
    'hearts-6',
    'hearts-7',
    'hearts-8',
    'hearts-9',
    'hearts-10',
    'hearts-jack',
    'hearts-queen',
    'hearts-king',
    'spades-ace',
    'spades-2',
    'spades-3',
    'spades-4',
    'spades-5',
    'spades-6',
    'spades-7',
    'spades-8',
    'spades-9',
    'spades-10',
    'spades-jack',
    'spades-queen',
    'spades-king'
];
var kingsCup = 0;
var gameComplete = false;

function drawCard() {
    if (gameComplete == false) {
        var randomNumber = Math.floor(Math.random() * (cards.length - 1));
        cards = cards.filter((e, i) => i !== randomNumber);
        console.log(cards.length);
        console.log(cards[randomNumber]);
        document.getElementById("cards").src = 'assets/js/games/cards/' + cards[randomNumber] + '.png';

        switch(cards[randomNumber]) {
            case "clubs-ace":
                document.getElementById("task").innerHTML = "Waterfall!";
            break;
            case "clubs-2":
                document.getElementById("task").innerHTML = "Pick someone to drink."
            break;
            case "clubs-3":
                document.getElementById("task").innerHTML = "Take a drink.";
            break;
            case "clubs-4":
                document.getElementById("task").innerHTML = "Last to touch the floor drinks.";
            break;
            case "clubs-5":
                document.getElementById("task").innerHTML = "All guys drink.";
            break;
            case "clubs-6":
                document.getElementById("task").innerHTML = "All chicks drink.";
            break;
            case "clubs-7":
                document.getElementById("task").innerHTML = "Last to reach for the sky drinks.";
            break;
            case "clubs-8":
                document.getElementById("task").innerHTML = "Pick a mate that will drink anytime you drink.";
            break;
            case "clubs-9":
                document.getElementById("task").innerHTML = "Rhyme";
            break;
            case "clubs-10":
                document.getElementById("task").innerHTML = "Categories";
            break;
            case "clubs-jack":
                document.getElementById("task").innerHTML = "Everyone must drink.";
            break;
            case "clubs-queen":
                document.getElementById("task").innerHTML = "You're now the question master.";
            break;
            case "clubs-king":
                kingsCup = kingsCup + 1;
                if (kingsCup < 4) {
                    document.getElementById("task").innerHTML = "KING! Add a dash of your drink to the kings cup!";
                }
                else {
                    gameComplete = true;
                    document.getElementById("task").innerHTML = "GAME OVER! You must down the kings cup!";
                }
            break;
            case "diamonds-ace":
                document.getElementById("task").innerHTML = "Waterfall!";
            break;
            case "diamonds-2":
                document.getElementById("task").innerHTML = "Pick someone to drink."
            break;
            case "diamonds-3":
                document.getElementById("task").innerHTML = "Take a drink.";
            break;
            case "diamonds-4":
                document.getElementById("task").innerHTML = "Last to touch the floor drinks.";
            break;
            case "diamonds-5":
                document.getElementById("task").innerHTML = "All guys drink.";
            break;
            case "diamonds-6":
                document.getElementById("task").innerHTML = "All chicks drink.";
            break;
            case "diamonds-7":
                document.getElementById("task").innerHTML = "Last to reach for the sky drinks.";
            break;
            case "diamonds-8":
                document.getElementById("task").innerHTML = "Pick a mate that will drink anytime you drink.";
            break;
            case "diamonds-9":
                document.getElementById("task").innerHTML = "Rhyme";
            break;
            case "diamonds-10":
                document.getElementById("task").innerHTML = "Categories";
            break;
            case "diamonds-jack":
                document.getElementById("task").innerHTML = "Everyone must drink.";
            break;
            case "diamonds-queen":
                document.getElementById("task").innerHTML = "You're now the question master.";
            break;
            case "diamonds-king":
                kingsCup = kingsCup + 1;
                if (kingsCup < 4) {
                    document.getElementById("task").innerHTML = "KING! Add a dash of your drink to the kings cup!";
                }
                else {
                    gameComplete = true;
                    document.getElementById("task").innerHTML = "GAME OVER! You must down the kings cup!";
                }
            break;
            case "hearts-ace":
                document.getElementById("task").innerHTML = "Waterfall!";
            break;
            case "hearts-2":
                document.getElementById("task").innerHTML = "Pick someone to drink.";
            break;
            case "hearts-3":
                document.getElementById("task").innerHTML = "Take a drink.";
            break;
            case "hearts-4":
                document.getElementById("task").innerHTML = "Last to touch the floor drinks.";
            break;
            case "hearts-5":
                document.getElementById("task").innerHTML = "All guys drink.";
            break;
            case "hearts-6":
                document.getElementById("task").innerHTML = "All chicks drink.";
            break;
            case "hearts-7":
                document.getElementById("task").innerHTML = "Last to reach for the sky drinks.";
            break;
            case "hearts-8":
                document.getElementById("task").innerHTML = "Pick a mate that will drink anytime you drink.";
            break;
            case "hearts-9":
                document.getElementById("task").innerHTML = "Rhyme";
            break;
            case "hearts-10":
                document.getElementById("task").innerHTML = "Categories";
            break;
            case "hearts-jack":
                document.getElementById("task").innerHTML = "Everyone must drink.";
            break;
            case "hearts-queen":
                document.getElementById("task").innerHTML = "You're now the question master.";
            break;
            case "hearts-king":
                kingsCup = kingsCup + 1;
                if (kingsCup < 4) {
                    document.getElementById("task").innerHTML = "KING! Add a dash of your drink to the kings cup!";
                }
                else {
                    gameComplete = true;
                    document.getElementById("task").innerHTML = "GAME OVER! You must down the kings cup!";
                }
            break;
            case "spades-ace":
                document.getElementById("task").innerHTML = "Waterfall!";
            break;
            case "spades-2":
                document.getElementById("task").innerHTML = "Pick someone to drink.";
            break;
            case "spades-3":
                document.getElementById("task").innerHTML = "Take a drink.";
            break;
            case "spades-4":
                document.getElementById("task").innerHTML = "Last to touch the floor drinks.";
            break;
            case "spades-5":
                document.getElementById("task").innerHTML = "All guys drink.";
            break;
            case "spades-6":
                document.getElementById("task").innerHTML = "All chicks drink.";
            break;
            case "spades-7":
                document.getElementById("task").innerHTML = "Last to reach for the sky drinks.";
            break;
            case "spades-8":
                document.getElementById("task").innerHTML = "Pick a mate that will drink anytime you drink.";
            break;
            case "spades-9":
                document.getElementById("task").innerHTML = "Rhyme";
            break;
            case "spades-10":
                document.getElementById("task").innerHTML = "Categories";
            break;
            case "spades-jack":
                document.getElementById("task").innerHTML = "Everyone must drink.";
            break;
            case "spades-queen":
                document.getElementById("task").innerHTML = "You're now the question master.";
            break;
            case "spades-king":
                kingsCup = kingsCup + 1;
                if (kingsCup < 4) {
                    document.getElementById("task").innerHTML = "KING! Add a dash of your drink to the kings cup!";
                }
                else {
                    gameComplete = true;
                    document.getElementById("task").innerHTML = "GAME OVER! You must down the kings cup!";
                }
            break;
        }
        document.getElementById("kingCount").innerHTML = 4 - kingsCup + " Kings Remaining";
    }

}

当最终的国王被抽出时，我已经结束了游戏，但我希望在不刷新页面的情况下继续进行。

[编辑：添加完整源代码]

【问题讨论】：

向我们展示更多代码。
如果还剩 0 张卡片，gameComplete === true?
是的，有没有在不刷新页面的情况下重启卡组？
(1) 只定义 var cards; 而不进行初始化 (2) 将 cards 的初始化放在一个函数中 (3) 每当您想（重新）启动时调用该函数。
将您的定义重命名为const FULL_DECK（或类似名称），然后您可以使用cards = [...FULL_DECK]; 开始游戏，并在牌组空时再次填充。

标签： javascript random playing-cards

【解决方案1】：

首先，让我们在cards 数组下创建一个名为currentDeck 的新数组

var currentDeck = [...cards];

然后在drawCard() 函数中，让我们将cards 数组替换为我们刚刚创建的currentDeck 数组。这将允许我们从牌组中移除卡片，而无需触及我们存储为cards 的所有卡片列表。

当游戏结束时，您可以添加一个 else 语句，其中 gameComplete 为真，它将 currentDeck 数组重置为 = cards 数组，就像我们之前所做的那样。

var currentDeck = [...cards];

cards 不应被修改

【讨论】：

【解决方案2】：

这是一个使用rando.js 的randoSequence 函数来简化随机洗牌的解决方案。它还使用ternary operator 和javascript pop() 方法。它将洗牌cards 并将洗牌的东西存储在shuffled 中。然后它会在抽牌时从shuffled 中一次删除一个，并在shuffled 变量用完时用新的洗牌版本的cards 值重新填充。

var cards = ["a", "b", "c"], shuffled = [];
var drawCard = () => (shuffled = shuffled.length ? shuffled : randoSequence(cards)).pop().value;

//Log the results to show it works...
for(var i = 0; i < 10; i++) console.log(drawCard());

&lt;script src="https://randojs.com/1.0.0.js"&gt;&lt;/script&gt;

【讨论】：