开发JavaScript记忆游戏遇问题：代码片段求助分析

先看你给出的代码片段，能发现几个关键问题，我来逐个拆解并修复：

1. 语法错误：未完成的模板字符串 #

你代码里的cardSymbol[i].setAttribute('class', fa fa-${...)明显没写完，模板字符串的占位符没有提供具体的符号值，也没有闭合反引号，这会直接导致JS报错，代码无法执行。

2. 数组索引使用不当 #

JS数组是0索引的，你从i=1开始循环，会让card[0]和cardSymbol[0]变成undefined，后续如果遍历整个数组的话，会遇到空值问题。

3. DOM元素未添加到页面 #

你创建了<li class="card">和<i>元素，但没有把图标添加到卡片里，也没把卡片添加到.deck列表中，所以这些元素永远不会出现在页面上。

4. 记忆游戏核心逻辑缺失 #

记忆游戏需要成对的卡片符号，你当前的循环只是生成16个卡片，但没有处理符号的配对（比如每个符号出现两次），这是功能上的关键缺失。

修正后的完整示例代码 #

// 初始化卡片数组，用0索引更规范
let cards = []; 
// 定义记忆游戏需要的成对符号（这里用Font Awesome的图标，共8种，每种2张，凑16张）
const cardSymbols = ['diamond', 'paper-plane-o', 'anchor', 'bolt', 'cube', 'leaf', 'bicycle', 'bomb'];

function makeCards() { 
  // 先复制符号数组，确保每个符号有两个
  const pairedSymbols = [...cardSymbols, ...cardSymbols];
  // 打乱数组（Fisher-Yates洗牌算法，保证卡片随机排列）
  shuffleArray(pairedSymbols);

  const scorePan = document.querySelector('section'); 
  // 先检查是否已经存在deck，避免重复创建
  let cardDeck = document.querySelector('.deck');
  if (!cardDeck) {
    scorePan.insertAdjacentHTML('afterend', '<ul class="deck"></ul>');
    cardDeck = document.querySelector('.deck');
  } else {
    // 如果已有deck，清空内容重新生成
    cardDeck.innerHTML = '';
  }

  // 用0索引循环生成16张卡片
  for (let i = 0; i < pairedSymbols.length; i++) { 
    const card = document.createElement('li'); 
    card.classList.add('card'); // 用classList更灵活
    const cardSymbol = document.createElement('i'); 
    // 完成模板字符串，设置对应的Font Awesome类
    cardSymbol.classList.add('fa', `fa-${pairedSymbols[i]}`);
    
    // 将图标添加到卡片，卡片添加到deck
    card.appendChild(cardSymbol);
    cardDeck.appendChild(card);
    
    // 把卡片存入数组，方便后续操作（比如绑定点击事件）
    cards.push(card);
  }
}

// 实现Fisher-Yates洗牌算法，打乱符号数组
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]];
  }
}

// 调用函数生成卡片
makeCards();

额外优化点说明 #

• 使用classList.add()替代setAttribute('class', ...)：这样可以避免覆盖已有的类，后续添加/移除类也更方便。
• 添加了洗牌算法：保证每次生成的卡片顺序都是随机的，符合记忆游戏的需求。
• 增加了deck存在性检查：避免多次调用makeCards()时重复创建多个deck元素。
• 统一使用0索引数组：符合JS的数组使用规范，避免潜在的空值问题。

现在你可以运行这段代码，应该能正常生成16张带成对随机图标的卡片了，接下来就可以添加卡片点击翻转、匹配判断、计分等逻辑啦。

内容的提问来源于stack exchange，提问作者J.Doe