Question

我正在尝试使用HTML，CSS和JavaScript（学习）制作一个简单的rgb游戏。

我想要发生的是当你点击一种颜色时，它显示“正确”或“错误”，静态值colors[3]是正确的。我测试了多个东西，我认为它与数字与字符串或相关有关，但我不知道。当你点击颜色时，它们都是警告“错误”而不是当你点击正确的颜色时，在这种情况下颜色[3]（青色），它应该显示“正确”。

感谢。

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];
console.log(pickedColor);
var colorDisplay = document.querySelector("#colorDisplay");

colorDisplay.textContent = pickedColor;

for (var i = 0; i < squares.length; i++){
    squares[i].style.background = colors[i];

    squares[i].addEventListener("click", function(){
      var clickedColor = this.style.background;

      if(clickedColor === pickedColor){
        alert("correct");
      } else {
        alert("wrong");
      }
    });
}

body {
    background-color: #232323;
}
.square {
    width: 30%;
    background: purple;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}
#container {
    margin: 0 auto;
    max-width: 600px;
}
h1 {
    color: white;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Color Game</title>
    <link rel="stylesheet" href="colorGame.css">
</head>

<body>
    <h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
    <div id="container">

        <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>
    <script type="text/javascript" src="colorGame.js"></script>
</body>

</html>

Answer 1

据我所知，这只是值字符串格式化的问题。 pickedColor在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)"
]

Answer 2

你正在比较2个字符串，其中clickedColor有空格而pickColor不。或者在pickedColor中添加空格或删除clickedColor中的空格，如：

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];
console.log(pickedColor);
var colorDisplay = document.querySelector("#colorDisplay");

colorDisplay.textContent = pickedColor;

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

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

      if(clickedColor.replace(/ /g,'') === pickedColor){
        alert("correct");
      } else {
        alert("wrong");
      }
    });
}

Answer 3

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)"
]

使用它，你会很高兴。输出中有额外的空格来自this.background.style。

Answer 4

由于您的比较方式，此游戏无法正常运行。浏览器有许多怪癖，其中之一就是它们如何解释属性。

例如，您可以假设这两个属性相同：
current_dates_challenged
this.style.background

但是，根据浏览器的不同，你可能是错的或正确的。 IE尤其是不一致的，并且经常更改为this.style.background-color根本不会影响this.style.background，因此设置background-color并不意味着background:red;是红色的。这并不意味着background-color等于background-color，rgb(255,0,0)或red。它非常不可预测。

为了让这个游戏有效，你需要做一些叫做规范化的事情。这意味着您将编写一个能够处理#ff0000，red，#ff0000，#f00，rgba(255,0,0)和rgba(255,0,0,1)的函数并将其转换为一个函数然后可以正确比较的特定格式。

Answer 5

你需要在颜色的数组中使用逗号后写空格!!

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)"]

我需要帮助弄清楚为什么这个'if'声明不起作用

5 个答案: