JavaScript 颜色游戏默认颜色答案

【问题标题】：JavaScript color game default colorsJavaScript 颜色游戏默认颜色
【发布时间】：2017-05-18 21:04:04
【问题描述】：

所以我正在用 JavaScript 做一个颜色选择游戏。我拥有一切正常工作的功能。但我注意到了一个错误。当您第一次加载到页面甚至刷新页面时。所有方块的值都是紫色的。如果您单击新颜色或硬按钮或简单按钮，则会填充不同的 rgb 值。为什么我在启动页面或刷新时会得到默认的紫色值？我正在尝试使用它，因此当页面启动时，它会随机化 rgb 值，而无需我或用户必须点击新颜色来启动游戏。

这是我的代码

~html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
    <title>Color Game!</title>
</head>
<body>

<h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>

<div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>
    <button id="easyBtn">Easy</button>
    <button id="hardBtn" class="selected">Hard</button>
</div>

<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="index.js"></script>
</body>
</html>

~css

body {
    background-color: #232323;
    margin: 0;
    font-family: "Montserrat", "Avenir";
}

.square {
    width: 30%;
    background: purple;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;

}

#container {
    max-width: 600px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-weight: normal;
    color: white;
    background-color: steelblue;
    margin: 0;
}



#stripe {
    background-color: white;
    height: 30px;
    text-align: center;
    color: black;
}

.selected {
    background: blue;
}

~JS

var colors = generateRandomColors(numSquares);
var numSquares = 6;
var squares = document.querySelectorAll(".square");
var h1 = document.querySelector("h1");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var resetButton = document.querySelector("#reset");
var easyBtn = document.getElementById("easyBtn");
var hardBtn = document.getElementById("hardBtn");

easyBtn.addEventListener("click", function(){
    hardBtn.classList.remove("selected");
    easyBtn.classList.add("selected");
    numSquares = 3;
    colors = generateRandomColors(numSquares);
    pickedColor = pickColor();
    colorDisplay.textContent = pickedColor;

    for(var i = 0; i < squares.length; i++) {
        if(colors[i]) {
            squares[i].style.backgroundColor = colors[i];
        } else {
            squares[i].style.display = "none";
        }
    }

})

hardBtn.addEventListener("click", function(){
    hardBtn.classList.add("selected");
    easyBtn.classList.remove("selected");
    numSquares = 6;
    colors = generateRandomColors(numSquares);
    pickedColor = pickColor();
    colorDisplay.textContent = pickedColor;

    for(var i = 0; i < squares.length; i++) {
        squares[i].style.backgroundColor = colors[i];
        squares[i].style.display = "block";
    }
})

resetButton.addEventListener("click", function(){
    // generate all new colors
    colors = generateRandomColors(numSquares);
    // pick a new random color from the array
    pickedColor = pickColor();
    // change colorDisplay to match picked color
    colorDisplay.textContent = pickedColor;
    // change colors of squares
    for(var i = 0; i < squares.length; i++) {
        squares[i].style.backgroundColor = colors[i];
    }
    h1.style.backgroundColor = "steelblue";
})

colorDisplay.textContent = pickedColor;

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

    // add click listeners to squares
    squares[i].addEventListener("click", function(){
    // grab color of clicked square
    var clickedColor = this.style.backgroundColor;
    // compare color to pickedColor
    if(clickedColor === pickedColor){
        messageDisplay.textContent = "Correct!";
        resetButton.textContent = "Play Again?";
    changeColors(clickedColor);
    h1.style.backgroundColor = clickedColor;
    } else {
        this.style.backgroundColor = "#232323";
        messageDisplay.textContent = "Try Again";
    }
    });
}

function changeColors(color) {
    //loop through all squares
    for(var i = 0; i < squares.length; i++) {

    squares[i].style.backgroundColor = color;
    }
}

function pickColor() {
    var random = Math.floor(Math.random() * colors.length);
    return colors[random];
}

function generateRandomColors(num) {
    // make an array
    var arr = [];
    // repeat num times
    for(var i = 0; i < num; i++) {
    arr.push(randomColor());
    }
    return arr;

}

function randomColor() {
    // pick a "red" from 0 - 255
    var r = Math.floor(Math.random() * 256);
    // pick a "green" from 0 - 255
    var g = Math.floor(Math.random() * 256);
    // pick a "blue" from 0 - 255
    var b = Math.floor(Math.random() * 256);

    return "rgb(" + r + ", " + g + ", " + b + ")";
}

【问题讨论】：

切换变量声明顺序（确保 numSquares 在颜色之前）var colors = generateRandomColors(numSquares); var numSquares = 6; 它将按照您的预期填充颜色。
嘿，谢谢兰斯，你绝对正确。我忘了在可变颜色之前切换 numsquares。谢谢大佬！
太棒了，如果你想把它标记为正确的，我会继续做一个答案:)

标签： javascript

【解决方案1】：

你的 CSS 硬编码紫色：

.square {
    width: 30%;
    background: purple;

您需要添加一个事件处理程序，以便在页面加载时调用您的颜色更改代码，如下所示：

window.addEventListener("DOMContentLoaded", function(){
  // Call color changing code here
});

【讨论】：

【解决方案2】：

确保在颜色之前声明 numSquares。

所以

var colors = generateRandomColors(numSquares);
var numSquares = 6;

变成

var numSquares = 6;
var colors = generateRandomColors(numSquares);

【讨论】：