如何使用另一个 function 的返回生成一个新数组？ Javascript

Question

所以我想做一个颜色猜谜游戏 所以我创建了一个 function 生成颜色并返回它，它工作正常但是因为我有 3 个带有#hex 代码的按钮 1 个按钮必须是正确的答案并且正确的#hex 有显示在彩盒中

所以我试图在每个按钮中放置 3 个#hex 代码并随机选择哪个#hex 代码是正确的并将其显示在 HTML

我知道代码很糟糕，但我还有很长的路要走 go...

function randomColor(){
    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    return randomColor
}

function arrayOfColors(){
    let randColorArr = []
}
function generateColors(){    
    colorBox.style.backgroundColor = `#${correctColor}`
    btn.forEach(button => button.innerHTML = `#${randomColor()}`)
}
generateColors()

Answer 1

randomColor - 我对您的 function 进行了更正，它将始终返回有效的颜色编号，

arrayOfColors - 我回答了你关于 function 的问题，它现在为你的三个按钮返回一个包含三个 colors 的数组，

randomIntFromInterval - 旨在生成您确定的特定范围内的数字，

generateColors -

1. 我画了三个colors的数组，
2. 我为数组中的 position 抽了一张彩票，这将是正确的颜色，
3. 我给了 div 正确的颜色，所有三个按钮 colors 包括一个检查用户是否获胜的点击事件，
4. 单击后立即开始新游戏。

 const colorBox = document.querySelector('div'); const btns = document.querySelectorAll('button'); function randomColor(){ let randomColor = `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0')}`; return randomColor } function arrayOfColors(){ const arrayOfColors = [...Array(3).keys()].map(() => randomColor()); return arrayOfColors; } function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min) }; function generateColors(){ const arr = arrayOfColors(); const correctIndexColor = randomIntFromInterval(0, 2); colorBox.style.backgroundColor = `${arr[correctIndexColor]}`; btns.forEach((button, index) => { button.innerHTML = `${arr[index]}`; button.onclick = () => { if(index === correctIndexColor) alert('win'); else alert('faild'); generateColors(); } }); } generateColors()

 div { height: 100px; width: 100px; }

 <button></button> <button></button> <button></button> <div></div>

Answer 2

我不认为需要声明arrayOfColors function，当您可以生成 1 到 3 之间的随机数并将correctColor分配给相关按钮时：

 const btn = document.querySelectorAll('button') const colorBox = document.getElementById('cbox') function randomColor(){ let randomColor = Math.floor(Math.random()*16777215).toString(16); return randomColor } function generateColors(correctColor){ colorBox.style.backgroundColor = `#${correctColor}` btn.forEach(button => button.innerHTML = `#${randomColor()}`) // GET RANDOM NUMBER BETWEEN 1 AND 3 const rndBtnIndex = Math.floor(Math.random() * (3 - 1 + 1) + 1) // ASSIGN THE CORRECT COLOR TO RANDOM BUTTON document.querySelector('#btn' + rndBtnIndex).innerHTML = `#${correctColor}` } generateColors('ff0000')

 <button id="btn1"></button> <button id="btn2"></button> <button id="btn3"></button> <div id="cbox"> <p>colorBox</p> </div>