为何记忆卡牌游戏刷新后卡牌无法随机排列？

DevOps 小满

2026-5-26

解决记忆卡牌游戏刷新后不随机排列的问题

嘿，我一眼就看出问题所在啦——你现在只是定义了固定顺序的卡牌数组，但完全没做随机打乱处理！每次刷新页面，cardsArray都会以初始的固定顺序加载，卡牌位置自然不会变。

给你推荐个靠谱的解决方案：用Fisher-Yates洗牌算法（也叫Knuth洗牌）来打乱数组，这个算法能公平高效地随机重排元素，不会出现概率偏倚的问题。

具体实现步骤：

先写一个通用的洗牌函数，专门用来打乱数组：

function shuffleArray(array) {
  // 从数组末尾开始向前遍历
  for (let i = array.length - 1; i > 0; i--) {
    // 随机选取当前元素之前的一个索引
    const j = Math.floor(Math.random() * (i + 1));
    // 交换当前元素和随机选中的元素
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

在页面加载（或者渲染卡牌的逻辑之前）调用这个函数，打乱你的卡牌数组：

// 先补全你的卡牌数组
var cardsArray = [
  { 'name': 'ball', 'img': '../img/ball.png' },
  { 'name': 'building', 'img': '../img/building.png' },
  { 'name': 'fan', 'img': '../img/fan.png' },
  { 'name': 'fish', 'img': '../img/fish.png' },
  { 'name': 'fishball', 'img': '../img/fishball.png' },
  { 'name': 'flower', 'img': '../img/flower.png' }
  // 剩下的卡牌继续补充在这里
];

// 页面加载完成后执行洗牌+渲染逻辑
window.addEventListener('load', function() {
  const shuffledCards = shuffleArray(cardsArray);
  // 用打乱后的数组去渲染卡牌
  renderCards(shuffledCards); // 假设你有一个负责渲染卡牌的函数
});