如何随机化JS然后重复?

Question

我的代码会随机化套牌，直到它永远不会拉出同一张牌。一旦抽出一张牌，它将从数组中删除它。问题是，一旦所有牌都被抽出，它就会变成"空"，我宁愿它只是重新随机化一副牌并再次重复回到起点。

有没有这样做？

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";
}
}

当最终的国王被抽到时，我会让游戏结束，但我会在不刷新页面的情况下继续下去。

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

Answer 1

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

var currentDeck = [...cards];

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

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

var currentDeck = [...cards];

cards永远不应修改

Answer 2

这是一个使用 rando.js 的randoSequence函数来简化随机洗牌的解决方案。它还使用三元运算符和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());

<script src="https://randojs.com/1.0.0.js"></script>