如何实现相邻单元格无重复颜色的题库分配功能？

你的需求是实现行列布局的题库分配，要求各颜色数量匹配输入值，同时相邻（左右、上下）单元格颜色不重复且具备随机性。当前代码仅通过打乱数组实现随机，无法满足相邻不重复的限制，以下是解决方案：

核心思路 #

1. 放弃预先打乱整个颜色数组的方式，改为逐个单元格选择符合条件的颜色
2. 每个单元格选择时，排除左侧（同行前一格）和上方（同列上一格）的颜色
3. 实时维护各颜色的剩余可用数量，确保最终分配总数符合输入要求
4. 加入异常处理，避免因颜色数量或布局不合理导致无法分配

修改后的完整代码 #

function distributeBooks() {
  const rows = parseInt(document.getElementById("rows").value);
  const cols = parseInt(document.getElementById("cols").value);
  const colorCounts = {
    white: parseInt(document.getElementById("whiteCount").value),
    pink: parseInt(document.getElementById("pinkCount").value),
    green: parseInt(document.getElementById("greenCount").value),
    yellow: parseInt(document.getElementById("yellowCount").value)
  };

  const totalStudents = rows * cols;
  const totalColors = Object.values(colorCounts).reduce((sum, count) => sum + count, 0);

  if (totalColors < totalStudents) {
    alert("颜色数量不足，无法分配给所有单元格！");
    return;
  }

  // 存储表格颜色数据
  const tableData = [];
  let isValid = true;

  for (let row = 0; row < rows; row++) {
    tableData[row] = [];
    for (let col = 0; col < cols; col++) {
      // 收集需要排除的相邻颜色
      const excludedColors = new Set();
      if (col > 0) excludedColors.add(tableData[row][col - 1]);
      if (row > 0) excludedColors.add(tableData[row - 1][col]);

      // 筛选剩余数量>0且不在排除列表中的颜色
      const availableColors = Object.keys(colorCounts).filter(color => {
        return colorCounts[color] > 0 && !excludedColors.has(color);
      });

      if (availableColors.length === 0) {
        isValid = false;
        break;
      }

      // 随机选一个可用颜色
      const selectedColor = availableColors[Math.floor(Math.random() * availableColors.length)];
      colorCounts[selectedColor]--;
      tableData[row][col] = selectedColor;
    }
    if (!isValid) break;
  }

  if (!isValid) {
    alert("当前颜色数量和行列布局无法满足相邻不重复要求，请调整参数后重试！");
    return;
  }

  // 渲染最终表格
  const table = document.getElementById("distributionTable");
  table.innerHTML = "";

  for (let row = 0; row < rows; row++) {
    const tr = document.createElement("tr");
    for (let col = 0; col < cols; col++) {
      const td = document.createElement("td");
      td.className = tableData[row][col];
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
}

关键逻辑说明 #

1. 颜色计数管理：用colorCounts对象实时跟踪各颜色剩余数量，方便快速更新和查询
2. 相邻颜色排除：通过Set存储左侧和上方的颜色，避免重复选择
3. 随机选择机制：从可用颜色列表中随机挑选，保证分配的随机性
4. 异常处理：如果某一步无符合条件的颜色，直接提示用户调整参数（复杂场景可加入回溯算法，基础场景下调整参数即可解决）

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