求助：JS/HTML/CSS记忆翻牌游戏不同难度tiles的DOM动态添加

你的现有代码存在两个核心问题：

1. insertAdjacentElement是DOM方法，不能直接赋值HTML字符串——它需要接收位置参数和DOM元素对象；如果要直接插入HTML字符串，应该使用insertAdjacentHTML。
2. 未实现难度对应的配对Tile逻辑（记忆翻牌游戏每个图案需要出现两次，且总数匹配难度要求）。

以下是完整的实现方案：

1. 定义难度配置 #

先整理三个难度对应的Tile总数、配对数量，方便后续调用：

const difficultyConfig = {
  easy: { totalTiles: 16, pairs: 8 }, // 4×4，8组配对
  medium: { totalTiles: 36, pairs: 18 }, // 6×6，18组配对
  hard: { totalTiles: 64, pairs: 32 } // 8×8，32组配对
};

2. 实现Tile生成函数 #

编写函数处理清空旧Tile、生成配对数组、渲染新Tile的逻辑：

const gameTiles = document.querySelector(".game-tiles");

function generateTiles(difficulty) {
  // 清空现有Tile，避免重复叠加
  gameTiles.innerHTML = "";

  const { pairs } = difficultyConfig[difficulty];
  let tileNames = [];

  // 生成包含配对图案的数组（每个数字出现两次）
  for (let i = 1; i <= pairs; i++) {
    tileNames.push(i, i);
  }

  // 用Fisher-Yates算法打乱数组，保证Tile随机排列
  for (let i = tileNames.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [tileNames[i], tileNames[j]] = [tileNames[j], tileNames[i]];
  }

  // 遍历生成每个Tile的HTML并插入到目标区块末尾
  tileNames.forEach(name => {
    const tileHTML = `
      <div class="tiles" data-name="${name}">
        <img class="original" src="images/front-image.png" alt="Tile Front" />
        <img class="shuffled" src="images/logo_${name}.png" alt="Tile Back ${name}" />
      </div>
    `;
    gameTiles.insertAdjacentHTML("beforeend", tileHTML);
  });
}

3. 绑定难度选择事件 #

假设你的HTML中有难度选择按钮，如下：

<div class="difficulty-selector">
  <button data-difficulty="easy">简单</button>
  <button data-difficulty="medium">中等</button>
  <button data-difficulty="hard">困难</button>
</div>
<div class="game-tiles"></div>

给按钮绑定点击事件，触发对应难度的Tile生成：

document.querySelectorAll(".difficulty-selector button").forEach(btn => {
  btn.addEventListener("click", () => {
    const difficulty = btn.dataset.difficulty;
    generateTiles(difficulty);
  });
});

关键细节说明 #

• 洗牌逻辑：Fisher-Yates算法能保证Tile的随机分布，避免简单排序带来的规律感。
• 配对机制：每个图案生成两次，完全符合记忆翻牌游戏的核心规则。
• insertAdjacentHTML参数："beforeend"会将新HTML插入到.game-tiles的末尾，满足你的需求。

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