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没有空格而且selectedColor没有空格，因此将其更改为：

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功能在以下代码段中进行了演示。您将看到现在可以使用正确的颜色单击正方形，即使底层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>

比较JavaScript中的RGB颜色

4 个答案: