JavaScript卡牌配对游戏洗牌函数失效问题求助

问题根源分析 #

你的洗牌功能失效主要有以下几个原因：

• HTML结构错误：每张卡牌被独立包裹在main-card-container中，而CSS的order属性仅对flex容器的直接子元素生效，单独容器下无法通过order调整卡牌顺序。
• 随机数范围不匹配：你有16张卡牌，但代码只生成0-11的随机数，范围覆盖不全，会导致大量卡牌顺序重复。
• DOM加载时机问题：立即执行函数可能在DOM未完全加载时运行，导致无法获取到卡牌元素。
• 洗牌算法缺陷：直接给每张卡牌分配随机order，会出现多个卡牌使用同一个order值的情况，导致排列混乱。

修复步骤 #

1. 修正HTML结构

将所有卡牌放入同一个flex容器中，删除多余的独立容器：

<!-- 统一的flex容器 -->
<div class="card-grid">
  <!-- 第1张卡牌 -->
  <div class="the-card" data-framework="twoofhearts">
    <div class="the-back card-face">
      <img src="./images/cardback.png" class="flipped-card" />
    </div>
    <div class="the-front card-face">
      <img src="./images/img-1.png" class="unflipped-card" />
    </div>
  </div>

  <!-- 剩下15张卡牌都放在这个card-grid容器内 -->
  <div class="the-card" data-framework="xxx">...</div>
  ...
</div>

给flex容器添加CSS样式，确保order属性生效：

.card-grid {
  display: flex;
  flex-wrap: wrap; /* 让卡牌自动换行 */
  gap: 10px; /* 可选：设置卡牌间距 */
  /* 按需添加宽度、对齐方式等样式 */
}

2. 优化洗牌JavaScript代码

确保DOM加载完成后执行洗牌，同时生成无重复的随机顺序：

document.addEventListener('DOMContentLoaded', function() {
  const cards = document.querySelectorAll(".the-card");
  const totalCards = cards.length;

  // 生成0到totalCards-1的随机排序数组，确保每个order唯一
  const randomOrderArray = Array.from({ length: totalCards }, (_, i) => i)
    .sort(() => Math.random() - 0.5);

  // 为每张卡牌分配唯一的随机order
  cards.forEach((card, index) => {
    card.style.order = randomOrderArray[index];
  });
});

额外注意事项 #

• 确保所有<img>标签都正确闭合（添加/>），避免DOM解析异常。
• 如果需要在游戏重启时重新洗牌，可将洗牌逻辑封装成函数，调用即可：

function shuffleCards() {
  const cards = document.querySelectorAll(".the-card");
  const totalCards = cards.length;
  const randomOrderArray = Array.from({ length: totalCards }, (_, i) => i)
    .sort(() => Math.random() - 0.5);
  
  cards.forEach((card, index) => {
    card.style.order = randomOrderArray[index];
  });
}

// 游戏重启时调用
// shuffleCards();

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