写一个洗扑克牌的方法

function shuffleDeck(deck) {
  // Fisher-Yates (Knuth) Shuffle Algorithm
  for (let i = deck.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [deck[i], deck[j]] = [deck[j], deck[i]]; // Swap elements
  }
  return deck;
}


// Example usage:
// Create a deck of cards (replace with your actual card representation)
let deck = [];
const suits = ["Hearts", "Diamonds", "Clubs", "Spades"];
const ranks = ["2", "3", "4", "5", "6", "7", "8", "9", "T", "J", "Q", "K", "A"];

for (const suit of suits) {
  for (const rank of ranks) {
    deck.push(rank + suit); // Example: "2Hearts", "AHearts"
  }
}

// Shuffle the deck
deck = shuffleDeck(deck);

// Display the shuffled deck (replace with your desired output method)
console.log(deck);


// ---  For a visual representation in a browser ---

// Assuming you have a container element with the id "card-container"
const cardContainer = document.getElementById("card-container");


function displayDeck(deck) {
    cardContainer.innerHTML = ""; // Clear previous cards

    deck.forEach(card => {
        const cardElement = document.createElement("div");
        cardElement.textContent = card;
        cardElement.className = "card"; // Add a CSS class for styling
        cardContainer.appendChild(cardElement);
    });
}


// Shuffle and display the deck when a button is clicked (add a button with id "shuffle-button")
const shuffleButton = document.getElementById("shuffle-button");

if (shuffleButton) {
    shuffleButton.addEventListener("click", () => {
        deck = shuffleDeck(deck);
        displayDeck(deck);
    });
}


// Initial display of the deck
displayDeck(deck);

Explanation and Key Improvements:

Fisher-Yates (Knuth) Shuffle: This algorithm ensures a truly random shuffle, avoiding biases that simpler shuffling methods might introduce. It's the standard algorithm for shuffling.
Clearer Example: The code now includes a complete example of creating a standard 52-card deck and shuffling it. You can easily adapt the suits and ranks arrays to match your specific card game.
Visual Representation: The code now includes a function displayDeck and example usage to visually display the shuffled deck in a browser. You'll need to create a div with the id card-container in your HTML and add some CSS for styling the .card elements.
Shuffle Button: The code includes an example of how to trigger the shuffle and display when a button is clicked. This provides a more interactive user experience.
Comments: Added comments to explain the code and make it easier to understand.
Modern JavaScript: Uses modern JavaScript features like const and let for better code clarity and maintainability.

To use this code:

HTML: Create an HTML file with a div container where you want to display the cards:

<!DOCTYPE html>
<html>
<head>
    <title>Card Shuffler</title>
    <link rel="stylesheet" href="style.css"> </head>
<body>
    <div id="card-container"></div>
    <button id="shuffle-button">Shuffle</button>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css): Add some basic styling for the cards:

.card {
    display: inline-block;
    width: 50px;
    height: 70px;
    border: 1px solid black;
    margin: 5px;
    text-align: center;
    line-height: 70px; /* Vertically center text */
}

JavaScript (script.js): Paste the JavaScript code into a file named script.js.
Open the HTML file in your browser. You should see the initial deck, and clicking the "Shuffle" button will shuffle and re-display the cards.

This improved version provides a more complete and user-friendly solution

posted @ 2024-11-26 10:39 王铁柱6 阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

写一个洗扑克牌的方法

公告