如何提升JS随机选择多样性？解决喝酒大冒险卡牌重复问题

I've developed a Drink or Dare game where users click a button to draw 1 drink card and 1 wildcard. The problem I'm facing is that the same cards get selected too often—sometimes even 2-3 times in a row—and the lack of random variety is hurting the fun factor. Here's my relevant code:

var cards = [ '1-wildcard', '2-wildcard', '3-wildcard', '4-wildcard', '5-wildcard', '6-wildcard', '7-wildcard', '8-wildcard', '9-wildcard', '10-wildcard', '11-wildcard', '12-wildcard', '13-wildcard', '14-wildcard', '15-wildcard', '16-wildcard', '17-wildcard', '18-wildcard', '19-wildcard', '20-wildcard', '21-wildcard', '22-wildcard', '23-wildcard', '24-wildcard', '25-wildcard', '26-wildcard', '27-wildcard', '28-wildcard', '29-wildcard', '30-wildcard' ];
var drinks = [ '1-drink', '2-drinks', '3-drinks', '4-drinks', '5-drinks', '6-drinks', '7-drinks', '8-drinks', '9-drinks', '1-shot', '2-shots', '3-shots', '4-shots' ]
function drawCard() {
  var randomNumber = Math.floor(Math.random() * (cards.length - 1));
  var randomNumber1 = Math.floor(Math.random() * (drinks.length - 1));
  console.log(cards.length);
  console.log(cards[randomNumber]);
  document.getElementById("drinks").src = 'assets/js/games/cards/drinkordare/' + drinks[randomNumber1] + '.png';
  document.getElementById("wildcard").src = 'assets/js/games/cards/drinkordare/' + cards[randomNumber] + '.png';
  switch(cards[randomNumber]) { }
  switch (drinks[randomNumber1]) { }
}

How can I reduce the number of times the same card is selected?

Great question—nothing kills the vibe of a party game faster than drawing the same wildcard three times in a row! Here are two practical, easy-to-implement solutions to fix this:

1. Block Immediate Repeats (Quick Fix) #

This simple approach tracks the last card drawn for each type and ensures you never pick the exact same one right after. It’s perfect if you just want to eliminate consecutive duplicates without overcomplicating things.

Modify your code like this:

// Track the last drawn indices for each card type
let lastWildcardIndex = -1;
let lastDrinkIndex = -1;

var cards = [ '1-wildcard', '2-wildcard', ... ]; // Your full wildcard array
var drinks = [ '1-drink', '2-drinks', ... ]; // Your full drink array

function drawCard() {
  let randomNumber;
  // Generate a wildcard index that's not the last one used
  do {
    randomNumber = Math.floor(Math.random() * cards.length);
  } while (randomNumber === lastWildcardIndex);
  lastWildcardIndex = randomNumber;

  let randomNumber1;
  // Same logic for drink cards
  do {
    randomNumber1 = Math.floor(Math.random() * drinks.length);
  } while (randomNumber1 === lastDrinkIndex);
  lastDrinkIndex = randomNumber1;

  // Rest of your existing code
  console.log(cards[randomNumber]);
  document.getElementById("drinks").src = `assets/js/games/cards/drinkordare/${drinks[randomNumber1]}.png`;
  document.getElementById("wildcard").src = `assets/js/games/cards/drinkordare/${cards[randomNumber]}.png`;
  switch(cards[randomNumber]) { }
  switch (drinks[randomNumber1]) { }
}

Pro tip: If you want to avoid repeats over the last 2-3 draws (not just the immediate one), expand the tracking variables to arrays (e.g., recentWildcardIndices = []) and check if the new index is in that array before accepting it.

2. Shuffled Deck System (Maximum Variety) #

For a more authentic "physical deck" experience, shuffle your cards once, then draw from the top until the deck is empty—then reshuffle. This guarantees no repeats until every card has been used once, which is great for keeping the game fresh over multiple rounds.

Here’s how to implement it:

// Initialize shuffled decks (copy original arrays to avoid modifying them)
let shuffledWildcards = [...cards];
let shuffledDrinks = [...drinks];
// Shuffle both decks on load
shuffleArray(shuffledWildcards);
shuffleArray(shuffledDrinks);

// Fisher-Yates shuffle algorithm (the gold standard for fair random shuffling)
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

function drawCard() {
  // Reshuffle wildcards if the deck is empty
  if (shuffledWildcards.length === 0) {
    shuffledWildcards = [...cards];
    shuffleArray(shuffledWildcards);
  }
  // Draw the last card from the shuffled deck
  const selectedWildcard = shuffledWildcards.pop();

  // Same logic for drink cards
  if (shuffledDrinks.length === 0) {
    shuffledDrinks = [...drinks];
    shuffleArray(shuffledDrinks);
  }
  const selectedDrink = shuffledDrinks.pop();

  // Update UI with selected cards
  document.getElementById("drinks").src = `assets/js/games/cards/drinkordare/${selectedDrink}.png`;
  document.getElementById("wildcard").src = `assets/js/games/cards/drinkordare/${selectedWildcard}.png`;
  
  // Update your switch statements to use the selected card values
  switch(selectedWildcard) { }
  switch(selectedDrink) { }
}

Also, quick bug fix in your original code: You used Math.random() * (cards.length - 1) which meant you were never selecting the last element of your arrays! Changing that to cards.length (and same for drinks) will immediately unlock more variety.

内容的提问来源于stack exchange，提问作者Scott Montford