Javascript 随机挑色猜谜游戏中的逻辑错误

我想制作一个程序，显示一个代表颜色的

RGB值

，并要求用户从9个方块中猜出哪个颜色与所述RGB值匹配

到目前为止，我的问题是我的代码中有一个逻辑错误，我无法修复。大多数情况下，会生成9个随机着色的方块，我可以点击它们，直到猜出相应的着色方块，游戏结束。然而，偶尔，我点击所有的方块，什么也没有发生

我已经阅读了我的代码几十次，不确定错误来自何处，因为有时它的工作原理与逻辑上应该的一样，而另一些则根本不一样

//Array that contains 9 randomly generated colors. Values in the array will be generated by colorListGeneratior()

var colors =[];
var numOfColors= 9;
colorListGenerator();

var h1 = document.querySelector("h1");
var pickedColor = pickedColor(colors);
var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
colorDisplay.textContent = pickedColor;
var resetButton = document.querySelector("#reset");

for(var i=0;i<squares.length;i++)
{

    //Add initial colors to squares
    squares[i].style.backgroundColor= colors[i];

    //Change color of each square on click
    squares[i].addEventListener("click",function()
    {

        var clickedColor = this.style.backgroundColor;
        if(clickedColor==pickedColor){
            messageDisplay.textContent ="Correct!";
            changeColors(clickedColor)
            h1.style.color=clickedColor;
         }

         else{
             messageDisplay.textContent = "Try Again!";
             this.style.backgroundColor = "#232323";
         }
    });
}

//Changes all color of all the squares to the correctly picked color.

function changeColors(color){

    for(var i=0;i<squares.length;i++){
        squares[i].style.backgroundColor = color;
    }
}

//Assigns variables r,g,b each a random value from 0 to 255. Returns a //string representing an rgb color in the form "rgb(r_value,g_value,b_value)".

function colorGenerator(){

    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var color = "rgb("+ r +", " + g + ", " + b + ")";

    return color

}

//Creates a list of 9 colors each in the form of "rgb(r_value,g_value,b_value)"

function colorListGenerator()
{
    for(var j=0;j<numOfColors;j++){
    colors.push(colorGenerator());}
}


//Chooses a random color from the list of randomly generated colors, to be the goal color.

function pickedColor(colorsList)
{
    randomIndexPosition = Math.floor(Math.random() * numOfColors);
    pickedColor = colorsList[randomIndexPosition];

    return pickedColor
}

//包含9种随机生成的颜色的数组。数组中的值将由ColorListGenerator（）生成
var颜色=[]；
var-numOfColors=9；
colorListGenerator（）；
var h1=document.querySelector（“h1”）；
var pickedColor=pickedColor（颜色）；
var squares=document.queryselectoral（“.squares”）；
var colorDisplay=document.getElementById（“colorDisplay”）；
var messageDisplay=document.querySelector（“消息”）；
colorDisplay.textContent=pickedColor；
var resetButton=document.querySelector（“重置”）；
对于（var i=0；iOK），我觉得很无聊，有一段时间没有写太多HTML/JS，所以决定玩一玩

您有一些与变量和函数命名相关的小JS问题，以及一些可能导致您描述的行为的范围界定问题

更新的JS代码片段就在这里


//包含9种随机生成颜色的数组。数组中的值将由ColorListGenerator（）生成
var颜色=[]；
var-numOfColors=9；
colorListGenerator（）；
var h1=document.querySelector（“h1”）；
var pickedColor=pickColor（颜色）；
var squares=document.queryselectoral（“.squares”）；
var colorDisplay=document.getElementById（“colorDisplay”）；
var messageDisplay=document.querySelector（“消息”）；
colorDisplay.textContent=pickedColor；
var resetButton=document.querySelector（“重置”）；
对于（变量i=0；i


方格
.广场{
宽度：33%；
高度：50px；
浮动：左
}
方格
您好，您应该详细描述一下您想要实现的目标。我打赌这里很少有人知道什么是“Colt Steele Web Developer训练营彩色游戏项目”。并格式化您的代码。嗨，安德鲁，欢迎使用StackOverflow！使用此功能时，您在浏览器控制台中是否看到任何错误？此外，如果您提供所有HTML&JS，它可能会帮助人们调试和回答您的问题。HTML中有多少个
square
单击所有方块后，您仍然无法完成游戏。感谢您的帮助，所有人…结果显示，我的变量存储了我拥有的方块数，当我只有6个方块时，值为9。因此，每当我的颜色列表中有一个中奖颜色从索引位置6-8存储，它们都将超出我的代码范围这检查了所选的一个方块是否被正确拾取，因为我在本例中的代码只包含从0到5的元素。您正确指出的一个非常简单的错误是Hp93，谢谢。