我的随机数生成器没有生成新数字

问题描述 投票：0回答：1

我的项目包括一个函数，可以从篮子中生成三个随机数并将每个数映射到一个按钮。这个想法是，每次按下按钮时，您都会得到三个新数字，并且您按下的数字将从数组中删除。然而，每当调用 startTurn 函数时，它都会输出相同的 3 个数字。

const repeat = (arr, n) => Array(n).fill(arr).flat();
let basket = repeat(["red", "orange", "yellow", "green", "blue", "purple"], 3);

function newGame() {
  basket = repeat(["red", "orange", "yellow", "green", "blue", "purple"], 3);
  console.log(basket);
  startTurn();
}


const button1 = document.querySelector('#button1');
const button2 = document.querySelector('#button2');
const button3 = document.querySelector('#button3');
const button4 = document.querySelector('#new-game');

let turncount = 0;
let choice = [];

function startTurn(){
  while(choice.length <= 3){
    let r = Math.floor(Math.random() * (basket.length)) ;
    if(choice.indexOf(r) === -1) choice.push(r);
  }
  button1.style.backgroundColor = basket[choice[0]];
  button2.style.backgroundColor = basket[choice[1]];
  button3.style.backgroundColor = basket[choice[2]];
  console.log(basket.length);
  console.log(basket[choice])
}
javascript random
1个回答
0
投票

问题就是这样造成的

...
while(choice.length <= 3){
...

由于您的 

choice
数组是在 Global Scope 中声明的，一旦它被填满，就这样了。它将不再能够访问该 
while
循环。

每次调用 

startTurn()
时，具有初始 3 代的相同旧 
choice
数组将继续重复。

如果您希望每次都随机化并且仍然可以在全局范围内访问 

choice
，则每次在循环开始之前清空选择。

function startTurn(){
  // Empty choice, so that it regenerates
  choice = [];

  while(choice.length <= 3){
    let r = Math.floor(Math.random() * (basket.length)) ;
    if(choice.indexOf(r) === -1) choice.push(r);
  }
  button1.style.backgroundColor = basket[choice[0]];
  button2.style.backgroundColor = basket[choice[1]];
  button3.style.backgroundColor = basket[choice[2]];
  console.log(basket.length);
  console.log(basket[choice])
}

这是一个简单的工作示例

const repeat = (arr, n) => Array(n).fill(arr).flat();
let basket = repeat(["red", "orange", "yellow", "green", "blue", "purple"], 3);

function newGame() {
  basket = repeat(["red", "orange", "yellow", "green", "blue", "purple"], 3);
  console.log(basket);
  startTurn();
}


const button1 = document.querySelector('#button1');
const button2 = document.querySelector('#button2');
const button3 = document.querySelector('#button3');
const button4 = document.querySelector('#new-game');

let turncount = 0;
let choice = [];

function startTurn(){
  choice = []
  while(choice.length <= 3){
    let r = Math.floor(Math.random() * (basket.length)) ;
    if(choice.indexOf(r) === -1) choice.push(r);
  }
  button1.style.backgroundColor = basket[choice[0]];
  button2.style.backgroundColor = basket[choice[1]];
  button3.style.backgroundColor = basket[choice[2]];
  console.log(basket.length);
  console.log(basket[choice])
}
.button {
  padding: 8px;
  border: none;
  border-radius: 4px;
  
  color: white;
  background: #555;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<button class="button" id="button1" > Button 1 </button>
<button class="button" id="button2" > Button 2 </button>
<button class="button" id="button3" > Button 3 </button>
<button class="button" id="new-game" onclick="newGame()" > New Game </button>

</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.