开发Guess the Color猜色游戏 如何将正确hex色值设为可选答案

问题原因 #

你当前的代码逻辑中，顶部展示的正确色值和下方四个面板的背景色是完全独立生成的两组随机值，所以正确色值自然不会出现在可选答案中。

解决思路 #

• 首先生成顶部展示的正确色值colorCode
• 生成一个0~3的随机整数，作为正确答案对应的面板下标
• 遍历所有面板时，只有下标匹配的面板使用colorCode作为背景色，其余面板照常生成随机色

修改后可运行的JS代码 #

// 生成正确色值
var colorCode = '#' + Math.random().toString(16).slice(2, 8);
hexCode.innerHTML = colorCode;

var divs = document.getElementsByTagName('div');
// 随机生成正确答案的位置（0到3，对应4个面板）
var correctIndex = Math.floor(Math.random() * divs.length);

for (var i = 0; i < divs.length; i++) {
   if (i === correctIndex) {
      // 正确位置的面板使用预设的正确色值
      divs[i].style.backgroundColor = colorCode;
   } else {
      // 其余位置生成随机色
      divs[i].style.backgroundColor =  '#' + Math.random().toString(16).slice(2, 8);
   }
   // 可选拓展：给每个面板存储对应的色值，方便后续开发点击判断对错的逻辑
   divs[i].dataset.color = divs[i].style.backgroundColor;
}

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