JavaScript纸牌游戏无法选择随机纸牌[关闭]答案

【问题标题】：JavaScript Card Game unable to pick a random card [closed]JavaScript纸牌游戏无法选择随机纸牌[关闭]
【发布时间】：2022-06-10 20:42:26
【问题描述】：

我使用 JavaScript 创建的纸牌游戏包含 52 张卡片，分为 2 位玩家。我需要通过单击一个按钮来选择一张随机卡片并将其显示到新的牌组或窗口中。特此附上 HTML、CSS 和 JS 代码供您参考。请帮我写代码，这对理解很有帮助..，

谢谢，

const cards = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]
const suits = ["diamonds", "hearts", "spades", "clubs"]
let player1 = player2 = []
let deck = cards.reduce((res, card) => [...res, ...suits.map(suit => ({Value: card, Suit: suit}))], [])
const deckEle = document.getElementById('deck')
const deckplayer1 = document.getElementById('player1')
const deckplayer2 = document.getElementById('player2')
const shuffle = () => {
  let currentIndex = deck.length,  randomIndex
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex--
    [deck[currentIndex], deck[randomIndex]] = [deck[randomIndex], deck[currentIndex]]
  }
  deckplayer1.innerHTML = ''
  deckplayer2.innerHTML = ''
  renderDeck(deckEle, deck)
}

const renderDeck = (div, arr) => {
    div.innerHTML = ''
    for(let i = 0; i < arr.length; i++)
    {
        let card = document.createElement("div")
        let value = document.createElement("div")
        let suit = document.createElement("div")
        card.className = "card"
        value.className = "value"
        suit.className = "suit " + arr[i].Suit

        value.innerHTML = arr[i].Value
        card.appendChild(value)
        card.appendChild(suit)

        div.appendChild(card)
    }
}
renderDeck(deckEle, deck)
const split = () => {  
  deckEle.innerHTML = ''
  player1 = deck.slice(0, deck.length/2)
  renderDeck(deckplayer1, player1)
  player2 = deck.slice(-deck.length/2)
  renderDeck(deckplayer2, player2)
}

.deck
{
    width:50%;
    margin: 20px auto;
    background:dodgerblue;
    border:solid 10px black;
    padding: 10px;
    border-radius:10px;
    text-align: center;
    color:white;
}

.player {
  width : 50%;
  display: table-cell;
}

.card
{
    padding: 10px;
    border: solid 1px #808080;
    background-color: white;
    display: inline-block;
    border-radius: 10px;
    font-size: 14pt;
    text-align: center;
    color:black;
    margin: 3px;
}

.btn
{
    background:white;
    padding: 10px 20px;
    border-radius:30px;
    margin: 10px;
    display:inline-block;
}

.card .value{
    font-size:15pt;
    font-family: sans-serif;
}

.card .suit
{
    background-image: url('card.png');
    height: 100px;
    width: 90px;
}

.card .diamonds
{
    background-position-y: 100px;
    background-color: green;
    opacity: 0.2;
}

.card .hearts
{
    background-color: red;
    opacity: 0.2;
    background-position-x: 90px;
}

.card .clubs
{
    background-color: yellow;
    opacity: 0.2;
    background-position-x:90px;
    background-position-y:100px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css"/>
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div class="deck">
        <h1>A Deck of Cards</h1>

        <a href="javascript:void(0)" class="btn" onclick="shuffle()">Shuffle</a>
        <a href="javascript:void(0)" class="btn" onclick="split()">split</a>
        <div id="deck"></div>
        <div class="player">
          <p>Player1</p>
          <div id="player1"></div>
        </div>
        <div class="player">
          <p>Player2</p>
          <div id="player2"></div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

您忘记描述您在执行此任务时遇到的问题。
@trincot 我在身体上描述过。，Thanls
我想你误会了。正文中的内容是任务的描述，而不是您在执行该任务时遇到的特定问题的描述。

标签： javascript html css