JS52张卡牌发牌问题：玩家1仅显示单张卡牌而非13张

问题根源 #

• HTML错误：多个<img>标签使用了重复的id="Karten"，但HTML中id必须唯一，document.getElementById()只会返回第一个匹配的元素，导致只有第一张图片能被赋值。
• JS逻辑缺陷：代码仅随机选取单张牌，未循环处理13张牌的发牌需求；也没有对牌组进行洗牌，更未移除已发卡牌，会出现重复发牌或逻辑错误。

修正后的代码 #

HTML部分（修复重复id问题）

<div id="alles">
  <div id="Spieler1">
    spieler1
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
    <img class="player-card">
  </div>
  <div id="Spieler2">
    spieler2
  </div>
  <div id="Spieler3">
    spieler3
  </div>
  <div id="Spieler4">
    spieler4
  </div>
</div>

JavaScript部分（实现洗牌+批量发牌）

function Start() {
  // 生成完整52张牌组（优化写法，替代手动逐个赋值）
  const suits = ['h', 'k', 'ka', 'p'];
  const ranks = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'soldat', 'queen', 'king'];
  let Karten = [];

  for (let suit of suits) {
    for (let rank of ranks) {
      // 兼容原代码中黑桃king的特殊命名
      if (rank === 'king' && suit === 'p') {
        Karten.push('king.png');
      } else {
        Karten.push(`${rank}${suit}.png`);
      }
    }
  }

  // Fisher-Yates标准洗牌算法，公平打乱牌组
  function shuffleDeck(deck) {
    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]];
    }
    return deck;
  }

  const shuffledDeck = shuffleDeck(Karten);

  // 获取玩家1的所有卡牌元素
  const player1Cards = document.querySelectorAll('#Spieler1 .player-card');

  // 批量给玩家1发13张牌
  for (let i = 0; i < player1Cards.length; i++) {
    // 从洗牌后的牌组取出顶部卡牌，避免重复发牌
    const card = shuffledDeck.shift();
    player1Cards[i].src = card;
  }
}

关键改进点 #

1. 牌组生成优化：通过循环遍历花色和牌面，替代手动添加52张牌，代码更简洁易维护。
2. 公平洗牌：使用Fisher-Yates算法确保牌组被随机打乱，符合真实纸牌游戏逻辑。
3. 批量元素操作：用class替代重复id，通过querySelectorAll()批量获取玩家卡牌，实现一次性赋值。
4. 避免重复发牌：使用shift()从牌组头部取出已发卡牌，剩余牌组可继续用于其他玩家发牌。

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