个人中心
gpt4 book ai didi

JavaScript 颜色游戏默认颜色

转载 作者：行者123 更新时间：2023-12-01 03:38:42 25 4
gpt4 key购买 nike

所以我正在用 JavaScript 做一个颜色选择游戏。我的功能一切正常。但我注意到一个错误。当您第一次加载页面甚至刷新页面时。所有方 block 的值都是紫色的。如果您单击新颜色或硬或简单按钮，则会填充不同的 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 + ")";
}

最佳答案

你的 CSS 硬编码紫色:

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

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

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

关于JavaScript 颜色游戏默认颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44057736/

25 4 0
文章推荐： python - 使用 R 或 Python 从简单的列表颜色中绘制包含国家/地区的世界地图
文章推荐： JSON 到 R 数据帧 : preserve repeated values
文章推荐： angularjs - Angular Material DatePicker date.toLocaleDateString 不是函数
文章推荐： javascript - 更新 anchor 标记点击时的输入标记值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com