比较 JavaScript 中的 RGB 颜色

Question

我正在尝试在猜谜游戏中比较两种 RGB 颜色。有 6 个正方形，有 6 种不同的颜色。当用户单击与pickedColor 匹配的颜色时，结果应为“正确！”。但我从来没有得到那个结果。

这是我的代码：

var colors = [
    "rgb(255,0,0)",
    "rgb(255,255,0)",
    "rgb(0,255,0)",
    "rgb(0,255,255)",
    "rgb(0,0,255)",
    "rgb(255,0,255)"
];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[3];
var colorDisplay = document.getElementById("colorDisplay");

colorDisplay.textContent = pickedColor;

for (var i = 0; i < squares.length; i++) {
    //add initinal colors to squares
    squares[i].style.background = colors[i];

    //add the click listener to the squares
    squares[i].addEventListener("click", function () {
        var clickedColor = this.style.background;

        if (clickedColor === pickedColor) alert("Correct!");
        else alert("Incorrect!");
    });
}

Answer 1

好的，所以我设置了一个示例 here，看起来问题是您的初始颜色集在逗号之间没有空格：

var colors = [
  "rgb(255,0,0)",
  "rgb(255,255,0)",
  "rgb(0,255,0)",
  "rgb(0,255,255)",
  "rgb(0,0,255)",
  "rgb(255,0,255)"
];

clickedColor 没有空格，pickedColor 有，因此将其更改为：

var colors = [
  "rgb(255, 0, 0)",
  "rgb(255, 255, 0)",
  "rgb(0, 255, 0)",
  "rgb(0, 255, 255)",
  "rgb(0, 0, 255)",
  "rgb(255, 0, 255)"
];

应该做的伎俩。

Answer 2

问题在于颜色表达式'rgb(0,255,255)' 的浏览器格式不同。在测试clickedColor === pickedColor 中，您正在比较两个看起来不再相同的字符串，即使它们代表相同的颜色。

不同的浏览器可以用不同的方式表示 RGB 颜色，因此选择特定格式是不安全的。更好的方法是从字符串中提取颜色分量，并逐个比较分量值，如下代码所示。

function rgbExtract(s) {
  var match = /^\s*rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)\s*$/.exec(s);
  if (match === null) {
    return null;
  }
  return { r: parseInt(match[1], 10),
           g: parseInt(match[2], 10),
           b: parseInt(match[3], 10) };
}

function rgbMatches(sText, tText) {
  var sColor = rgbExtract(sText),
      tColor = rgbExtract(tText);
  if (sColor === null || tColor === null) {
    return false;
  }
  var componentNames = [ 'r', 'g', 'b' ];
  for (var i = 0; i < componentNames.length; ++i) {
    var name = componentNames[i];
    if (sColor[name] != tColor[name]) {
      return false;
    }
  } 
  return true;
}

rgbMatches 函数在下面的 sn-p 中演示。您会看到，您现在可以单击颜色正确的方块，即使底层 RGB 字符串的格式不同，您也会收到相应的消息。

var colors = [
  "rgb(255,0,0)",
  "rgb(255,255,0)",
  "rgb(0,255,0)",
  "rgb(0,255,255)",
  "rgb(0,0,255)",
  "rgb(255,0,255)"
];

var squares = document.querySelectorAll(".square");
var pickedColor = colors[3];
var colorDisplay = document.getElementById("colorDisplay");
colorDisplay.textContent = pickedColor;

function message(s) {
  document.getElementById('messageContainer').innerHTML = s;
}

function rgbExtract(s) {
  var match = /^\s*rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)\s*$/.exec(s);
  if (match === null) {
    return null;
  }
  return { r: parseInt(match[1], 10),
           g: parseInt(match[2], 10),
           b: parseInt(match[3], 10) };
}

function rgbMatches(sText, tText) {
  var sColor = rgbExtract(sText),
      tColor = rgbExtract(tText);
  if (sColor === null || tColor === null) {
    return false;
  }
  var componentNames = [ 'r', 'g', 'b' ];
  for (var i = 0; i < componentNames.length; ++i) {
    var name = componentNames[i];
    if (sColor[name] != tColor[name]) {
      return false;
    }
  } 
  return true;
}

for (var i = 0; i < squares.length; ++i) {
  var square = squares[i];
  square.style.background = colors[i];
  square.addEventListener("click", function () {
    var clickedColor = this.style.background;
    if (rgbMatches(clickedColor, pickedColor)) {
        message('Correct! ' + clickedColor + ' matches ' + pickedColor);
    } else {
        message('Incorrect. ' + clickedColor + ' doesn\'t match ' + pickedColor);
    }
  });
}

body {
  font-family: sans-serif;
}
.square {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  border: 1px solid #888;
  cursor: pointer;
}
.output {
  margin: 10px 5px;
}

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

<div class="output" id="colorDisplay"></div>

<div class="output" id="messageContainer"></div>

Answer 3

我会小心比较像这样的两个 rgb 字符串。不同的浏览器可能以不同的方式存储样式背景颜色（正如您已经发现的那样）。

我建议编写一个自定义比较函数来解析两个 rgb 字符串并进行比较。

或者您可以将它们转换为十六进制颜色值并进行比较。

Answer 4

不要相信浏览器返回的颜色。不同的浏览器会使用不同的格式。

改为使用类或data-* 属性来设置颜色，并检查：

var colors = ["red", "yellow", "lime", "cyan", "blue", "fuchsia"],
    squares = document.querySelectorAll(".square"),
    pickedColor = colors[Math.floor(Math.random()*colors.length)],
    message = document.getElementById("messageContainer");
document.getElementById("colorDisplay").textContent = pickedColor;
for (var i = 0; i < squares.length; ++i) {
  squares[i].setAttribute('data-color', colors[i]);
  squares[i].addEventListener("click", function () {
    var clickedColor = this.getAttribute('data-color');
    message.textContent = clickedColor === pickedColor
      ? "Correct!" : "Incorrect!";
  });
}

.square {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  border: 1px solid #888;
  cursor: pointer;
}
.output {
  margin: 10px 5px;
}
[data-color=red] { background: rgb(255,0,0) }
[data-color=yellow] { background: rgb(255,255,0) }
[data-color=lime] { background: rgb(0,255,0) }
[data-color=cyan] { background: rgb(0,255,255) }
[data-color=blue] { background: rgb(0,0,255) }
[data-color=fuchsia] { background: rgb(255,0,255) }

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="output" id="colorDisplay"></div>
<div class="output" id="messageContainer"></div>