javascript - 范围内的随机数，没有唯一性(宾果游戏)

Question

我正在尝试创建一种宾果数字生成器，在其中生成一个唯一的数字并单独显示它。

我还希望该数字+我生成的所有下一个数字显示在一行的底部。

我的问题是，每当它遇到重复项时，它都会循环，直到找到唯一的数字，但显示该数字的次数与在底行中循环的次数相同。因此，如果我生成数字 [4, 6, 2]，然后生成另一个 4，它将继续循环，直到找到数组中尚未存在的另一个数字。

如果它命中数组中的数字两次然后找到 5，则会显示为 [4, 6, 2, 5, 5, 5,]。有什么办法可以让它不显示前 2 个 5？

window.onload = startup;

function startup() {
  document.getElementById("button").onclick = newNumber1;
}

var number = 0;
var bingoNumber = [];
var i;

function newNumber1() {
  number = Math.floor((Math.random() * 9) + 1);
  clickME();
}


function clickME() {
  for (i = 0; i < bingoNumber.length; i++) {
    if (number === bingoNumber[i]) {
      newNumber1();
    }
  }
  bingoNumber.splice(0, 0, number);
  document.getElementById("display").innerHTML = bingoNumber[0];
  document.getElementById("row").innerHTML = bingoNumber;
}

<button type="button" id="button">Click</button>
<div id="display"></div>
<div id="row"></div>

Answer 1

您的 clickMe 在执行完成之前调用 newNumber1，这不是问题所在。问题是 newNumber1 调用 clickMe 的另一个实例，并且循环继续。因此，当 newNumber1 生成唯一编号时，clickMe 的当前实例和先前实例每次都会完成插入相同的新编号。

另一个问题是，即使你让这个工作正常，如果 bingoNumber 包含 newNumber1 的所有可能的唯一数字，clickMe 中的循环也会继续下去。 可以生成。

试试这个:

window.onload = startup;

var bingoNumber = []; // contains all generated numbers

function startup(){ 
    document.getElementById("button").onclick = clickMe;
}

function newNumber(){
    // generate a new number
    return Math.floor((Math.random() * 9) + 1);
}

function clickMe(){

    // if bingoNumber contains all possible values, don't run the rest
    // change this to however you want to terminate it
    if(bingoNumber.length==9){ return false; }

    var num; // number to add to the array

    // generate a new number until it is unique
    for(num=newNumber();bingoNumber.indexOf(num)>=0;num=newNumber());

    // add the unique number in the beginning of the array
    bingoNumber.unshift(num);

    // display last generated value
    document.getElementById("display").innerHTML = bingoNumber[0];

    // display all generated value
    document.getElementById("row").innerHTML = bingoNumber;
}