JavaScript如何将52张扑克牌拆分为各26张的两个玩家牌堆

你现有分牌逻辑的核心错误有3个：

• split()函数里调用了不存在的cards()方法，你代码中cards只是存储牌面值的数组，已经洗好的整副牌存在全局变量deck里
• 52张牌是偶数，平分不需要用Math.ceil()做向上取整，直接取长度一半即可精准拆分
• 拆分完成后没有存储两个玩家的独立牌堆，也没有对应渲染逻辑，页面始终展示整副未拆分的牌

具体修改步骤 #

1. 新增全局变量存储两个玩家的牌堆 #

在JS顶部原有全局变量声明的位置加两行：

var player1Deck = [];
var player2Deck = [];

2. 重写split()分牌函数 #

这里提供两种分牌逻辑，按需选择即可：

直接对半切分（洗牌后前26张给玩家1，后26张给玩家2）

function split() {
  const half = deck.length / 2;
  player1Deck = deck.slice(0, half);
  player2Deck = deck.slice(half);
  // 分完渲染两个玩家的手牌
  renderPlayerHands();
}

交替发牌（模拟现实发牌逻辑，逐张分给两个玩家）

function split() {
  player1Deck = [];
  player2Deck = [];
  deck.forEach((card, idx) => {
    idx % 2 === 0 ? player1Deck.push(card) : player2Deck.push(card);
  });
  renderPlayerHands();
}

3. 新增玩家手牌渲染函数 #

function renderPlayerHands() {
  // 清空原有整副牌的渲染区域
  const container = document.getElementById('deck');
  container.innerHTML = '';

  // 渲染玩家1手牌区域
  const p1Wrap = document.createElement('div');
  p1Wrap.className = 'player-area';
  const p1Title = document.createElement('h3');
  p1Title.textContent = '玩家1 手牌（共26张）';
  p1Wrap.appendChild(p1Title);
  player1Deck.forEach(card => {
    const cardEl = document.createElement("div");
    const valueEl = document.createElement("div");
    const suitEl = document.createElement("div");
    cardEl.className = "card";
    valueEl.className = "value";
    suitEl.className = "suit " + card.Suit;
    valueEl.textContent = card.Value;
    cardEl.append(valueEl, suitEl);
    p1Wrap.appendChild(cardEl);
  });

  // 渲染玩家2手牌区域
  const p2Wrap = document.createElement('div');
  p2Wrap.className = 'player-area';
  const p2Title = document.createElement('h3');
  p2Title.textContent = '玩家2 手牌（共26张）';
  p2Wrap.appendChild(p2Title);
  player2Deck.forEach(card => {
    const cardEl = document.createElement("div");
    const valueEl = document.createElement("div");
    const suitEl = document.createElement("div");
    cardEl.className = "card";
    valueEl.className = "value";
    suitEl.className = "suit " + card.Suit;
    valueEl.textContent = card.Value;
    cardEl.append(valueEl, suitEl);
    p2Wrap.appendChild(cardEl);
  });

  container.append(p1Wrap, p2Wrap);
}

4. 页面新增分牌按钮+补充样式 #

在HTML的洗牌按钮后面加一个分牌按钮：

<a href="javascript:void(0)" class="btn" onclick="split()">平分牌堆</a>

在CSS里加玩家区域的样式，避免排版混乱：

.player-area {
  margin: 25px 0;
  padding-top: 15px;
  border-top: 2px dashed rgba(255,255,255,0.6);
}

效果说明 #

页面加载完成后会自动生成并打乱52张牌，点击「重新洗牌」可以重置牌堆顺序，点击「平分牌堆」就会自动把牌分成两个26张的独立牌堆，分别展示在两个玩家的手牌区域，两个牌堆的牌不会重复，总和刚好是完整的52张扑克牌。

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