我正在尝试创造一款游戏，你必须在屏幕上猜测随机生成的RGB，并在屏幕上从3个可能的选择中随机生成视觉对应物。出于某种原因，即使屏幕上的RGB值和匹配的颜色都被分配给同一个变量，2/10次我得到的颜色的RGB值不同，不匹配输入的RGB值。问题发生在'DOMContentLoaded'事件监听器中。
const easyBtn = document.querySelector('.easy'),
hardBtn = document.querySelector('.hard'),
rgb = document.querySelector('.rgb'),
rand1 = Math.round(Math.random()*300),
rand2 = Math.round(Math.random()*300),
rand3 = Math.round(Math.random()*300),
rand = `rgb(${rand1}, ${rand2}, ${rand3})`,
color1 = document.querySelector('.color1'),
color2 = document.querySelector('.color2'),
color3 = document.querySelector('.color3'),
colorsDiv = document.querySelector('.colors'),
newGame = document.querySelector('.new'),
rand4 = Math.round(Math.random()*301),
rand5 = Math.round(Math.random()*301),
rand6 = Math.round(Math.random()*301),
randd = `rgb(${rand4}, ${rand5}, ${rand6})`,
rand7 = Math.round(Math.random()*302),
rand8 = Math.round(Math.random()*302),
rand9 = Math.round(Math.random()*302),
randdd = `rgb(${rand7}, ${rand8}, ${rand9})`,
// Easy Random Colors
easyRand1 = Math.round(Math.random()*100),
easyRand2 = Math.round(Math.random()*100),
easyRand3 = Math.round(Math.random()*100),
easyRand = `rgb(${easyRand1}, ${easyRand2}, ${easyRand3})`;
easyRand4 = Math.round(Math.random()*101),
easyRand5 = Math.round(Math.random()*101),
easyRand6 = Math.round(Math.random()*101),
easyRandd = `rgb(${easyRand4}, ${easyRand5}, ${easyRand6})`;
easyRand7 = Math.round(Math.random()*102),
easyRand8 = Math.round(Math.random()*102),
easyRand9 = Math.round(Math.random()*103),
easyRanddd = `rgb(${easyRand7}, ${easyRand8}, ${easyRand9})`,
// Hard Random Colors
hardRand1 = Math.round(Math.random()*100),
hardRand2 = Math.round(Math.random()*130),
hardRand3 = Math.round(Math.random()*190),
hardRand = `rgb(${hardRand1}, ${hardRand2}, ${hardRand3})`;
hardRand4 = Math.round(Math.random()*87),
hardRand5 = Math.round(Math.random()*77),
hardRand6 = Math.round(Math.random()*158),
hardRandd = `rgb(${hardRand4}, ${hardRand5}, ${hardRand6})`;
hardRand7 = Math.round(Math.random()*89),
hardRand8 = Math.round(Math.random()*199),
hardRand9 = Math.round(Math.random()*121),
hardRanddd = `rgb(${hardRand7}, ${hardRand8}, ${hardRand9})`,
// Colors styling
colors = document.querySelector('.colors'),
allColors = document.querySelectorAll('.color');
let guessesLeft = 3
easyBtn.addEventListener('click', function() {
easyBtn.style.background = 'rgb(233, 150, 333)';
hardBtn.style.background = 'rgb(233, 230, 333)';
addNewColors();
})
hardBtn.addEventListener('click', function() {
hardBtn.style.background = 'rgb(233, 150, 333)';
easyBtn.style.background = 'rgb(233, 230, 333)';
addHardColors();
})
document.addEventListener('DOMContentLoaded', function() {
rgb.innerHTML = `<h1>${randd}</h1>`;
color1.style.backgroundColor = `${rand}`;
color2.style.backgroundColor = `${randd}`
color3.style.backgroundColor = `${randdd}`
for (var i = colorsDiv.children.length; i >= 0; i--) {
colorsDiv.appendChild(colorsDiv.children[[Math.random() * i | 0]]);
}
})
newGame.addEventListener('click', function() {
window.location.reload();
})
function addHardColors() {
rgb.innerHTML = `<h1>${easyRand}</h1>`;
color1.innerHTML = `<h1 class="color color1" style="background-color: ${easyRand};">`;
color2.innerHTML = `
<h1 class="color color2" style="background-color: ${easyRandd};">`;
color3.innerHTML = `<h1 class="color color3" style="background-color: ${easyRanddd};">`;
}
function addNewColors() {
rgb.innerHTML = `<h1>${hardRandd}</h1>`;
color1.innerHTML = `<h1 class="color color1" style="background-color: ${hardRand};">`;
color2.innerHTML = `
<h1 class="color color2" style="background-color: ${hardRandd};">`;
color3.innerHTML = `<h1 class="color color3" style="background-color: ${hardRanddd};">`;
}
allColors.forEach(function(color) {
color.addEventListener('click', function(e) {
let guess = e.target.style.backgroundColor;
let winningColor = document.querySelector('.rgb').textContent;
console.log(guess)
})
})* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Varela Round', sans-serif;
}
.header {
background: rgb(233, 150, 333);
height: 30vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 7rem;
font-size: 40px;
}
.title {
color: white;
}
.buttons {
background:rgb(233, 230, 333);
height: 5vh;
display: flex;
justify-content: space-between;
}
.difficulty {
display: flex;
position: relative;
right: 190px;
}
.btn {
width: 100px;
background:rgb(233, 230, 333);
border: none;
font-family: 'Varela Round', sans-serif;
}
.colors {
display: flex;
justify-content: space-around;
align-items: center;
background: rgb(233, 230, 200);
height: 65vh;
}
.color {
height: 250px;
border-radius: 15px;
width: 400px;
}
.rgb {
font-size: 20px;
color: white;
}
.new {
position: relative;
left: 30px;
}
@media (max-width: 761px) {
.color {
width: 230px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="rgb.css">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<div class="header">
<h1 class="title">RGB Guesser</h1>
<h1 class="rgb"></h1>
</div>
</header>
<section class="buttons">
<button class="btn new">NEW GAME</button>
<div class="difficulty">
<button class="easy btn">EASY</button>
<button class="hard btn">HARD</button>
</div>
</section>
<div class="colors-container">
<section class="colors">
<h1 class="color color1" style="background-color: red;"></h1>
<h1 class="color color2" style="background-color: purple"></h1>
<h1 class="color color3" style="background-color: blue;"></h1>
</section>
</div>
<script src="rgb.js"></script>
</body>
</html>RGB颜色中R、G或B的最大值为255。
然而，在像 这样的行中，rand1 = Math.round(Math.random()*300),
rand2 = Math.round(Math.random()*300),
rand3 = Math.round(Math.random()*300),
rand = `rgb(${rand1}, ${rand2}, ${rand3})`,
您可能最终得到rand1,rand2或rand3的值大于255。
您的浏览器将限制R, G和B值为255，因此如果rand1到rand3中的任何一个大于此值，则浏览器显示的颜色将与代码中设置的颜色不同。
解决方法很简单:不要生成R, G或B值大于255的颜色。