尝试为 BINGO 游戏生成和显示非重复随机值

Question

I am working on making a bingo game.我正在制作宾果游戏。 I've gotten as far as being able to get a random number generated and displayed at the click of a button.我已经能够通过单击按钮生成并显示随机数。 My only issue is that some values will end up being generated more than once.我唯一的问题是某些值最终会多次生成。 THAT IS THE PART I'M POSTING THIS QUESTION FOR.这就是我发布这个问题的部分。 EVERY VALUE SHOULD ONLY BE GENERATED & DISPLAYED ONCE UNTIL THE GAME IS RESET.在游戏重置之前，每个值都应该只生成和显示一次。 Does anybody have any example code, preferably for how to use something like the splice() method that I keep hearing brought up?有没有人有任何示例代码，最好是如何使用我一直听到的 splice() 方法之类的东西？

I CAN ALREADY GENERATE THE RANDOM NUMBER FROM THE SET AND DISPLAY IT.我已经可以从集合中生成随机数并显示它。 I'M ONLY LOOKING TO MAKE SURE THAT NUMBERS THAT ARE GENERATED ARE NOT REPEATED.我只是想确保生成的数字不会重复。

    <head>
        <title>BINGO</title>
    </head>

    <body>
        <div id="bingo">
            <script>

                let numbers = new Set()
                        .add("B1")
                        .add("B2")
                        .add("B3")
                        .add("B4")
                        .add("B5")
                        .add("B6")
                        .add("B7")
                        .add("B8")
                        .add("B9")
                        .add("B10");

                let called = Array.from(numbers);

                let display = new Array();


                function getRandomNum()
                {
                    function rando()
                    {
                        for (let i = called.length - 1; i > 0; i++) 
                        {
                            const j = Math.floor(Math.random() * called.length);
                            const number = called[i];
                            called[i] = called[j];
                            called[j] = number;
                            return number;

                            //let show = called[Math.floor(Math.random() * called.length)];
                            //return show;
                        }
                        //document.getElementById('bingo').innerHTML = display[0];
                    }
                    let index = rando();
                    document.getElementById('bingo').innerHTML = index;
                        display.push(index);


                }


                function show()
                {
                    for(let n = 0; n < display.length; n++)
                    {
                        document.getElementById('reveal').innerHTML += "<br/>" + display[n] + "<br/>";
                    }
                } 



            </script>
        </div>

        <div id="button">

            <button onclick="getRandomNum()">Random Number</button>

        </div>

        <br/>
        <br/>
        <br/>

        <div id="reveal">

            <button onclick="show()">Numbers Called</button>
        </div>

    </body>
</html>

Looking for some help to prevent number generated from being repeated (EXAMPLE CODE PREFERRED)寻找一些帮助以防止重复生成的数字（示例代码首选）

Answer 1

You could create an array in which you store all numbers which have already been selected. 您可以创建一个数组，在其中存储所有已选择的数字。 Then, when randomly selecting a new number, continue to randomize until a number has been selected which is not within that array of already-chosen numbers. 然后，当随机选择一个新数字时，继续随机化，直到选择了一个不在已选择数字数组中的数字为止。

Here's a code example which illustrates this idea, picking numbers between 0 and 9, not allowing repeat numbers. 这是一个说明此想法的代码示例，选择0到9之间的数字，不允许重复数字。 The process is broken down below. 该过程在下面细分。

var alreadyPicked = [];
var max = 10;

function random() {
  let unique = false;

  while (!unique && alreadyPicked.length < max) {
    let randNumber = Math.floor(Math.random() * max);

    if (alreadyPicked.includes(randNumber) == false) {
      unique = true;
      alreadyPicked.push(randNumber);
    }

  }
}

An array, alreadyPicked , is declared. 声明一个数组alreadyPicked 。 It serves to keep track of which numbers have already been selected, so that they won't be selected twice. 它用于跟踪已选择的号码，这样就不会两次被选中。
The number max is declared. 声明max数。 It is used to prevent an infinite loop when there are no more random numbers to choose. 当没有更多的随机数可供选择时，它用于防止无限循环。
Random numbers are chosen in the while loop, which loops either until the unique boolean is set to true or until the length of the alreadyPicked array has reached the max length, which happens when there are no more unique numbers to select. 在while循环中选择随机数，该循环将循环直到unique布尔值设置为true或直到alreadyPicked数组的长度达到max长度为止，这种情况将在没有更多唯一数字可供选择时发生。
Once a number is obtained, the statement alreadyPicked.includes(randNumber) checks to see whether the randNumber is among those numbers already selected and stored in alreadyPicked . 一旦获得了一些，语句alreadyPicked.includes(randNumber)检查以查看是否randNumber是已经被选择和存储在这些数字中alreadyPicked 。
If this is false, this means a unique number has been selected. 如果为假，则表示已选择唯一编号。 unique is then set to true to break the loop, and the number is pushed to alreadyPicked so that it won't be selected again. unique然后设置为true打破循环，并且这个数字推到alreadyPicked ，这样就不会被再次选择。

Answer 2

 <head>
        <title>BINGO</title>
    </head>

    <body>
        <div id="bingo">
            <script>

let numbers = ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "B10"]
            let display = [];

            function getRandomNum() {

                function rando() {

                    for (var i = 0; i < numbers.length; i++) {
                        const j = Math.floor(Math.random() * numbers.length);
                        const number = numbers[j];

                        if (number) {
                            numbers.splice(j, 1);
                        }
                        if (numbers.length < 0) {
                            return
                        } else {

                            return number;
                        }
                    }
                }

                let index;
                if (numbers.length === 0) {
                    index = "No more numbers"
                } else {
                    index = rando();
                    display.push(index);
                }
                document.getElementById('bingo').innerHTML = index;
            }


                function show()
                {
                    for(let n = 0; n < display.length; n++)
                    {
                        document.getElementById('reveal').innerHTML += "<br/>" + display[n] + "<br/>";
                    }
                } 



            </script>
        </div>

        <div id="button">

            <button onclick="getRandomNum()">Random Number</button>

        </div>

        <br/>
        <br/>
        <br/>

        <div id="reveal">

            <button onclick="show()">Numbers Called</button>
        </div>

    </body>
</html>

Here is the example with splice. 这是带有接头的示例。

Answer 3

Forget everything you done .忘记你所做的一切。

Start creating an array using range function, set number of numbers as you like .开始使用 range 函数创建数组，根据需要设置数字数量。 Than, you need to use a seed to make the pseudo-randomness better .比，你需要使用种子来使伪随机性更好。 So, instead of rand, you gotta use SHUFFLE, so you set array on range as 1 to 90, set the seed, than use shuffle to shuffle the array.. than you got all numbers in a random order (corresponding to the seed) .所以，而不是 rand，你必须使用 SHUFFLE，所以你将数组的范围设置为 1 到 90，设置种子，而不是使用 shuffle 对数组进行洗牌......比你以随机顺序获得所有数字（对应于种子） . You gotta change the seed to have another result .你必须改变种子才能有另一个结果。 The order of the numbers is the result .数字的顺序就是结果。 as .. ball 1 : 42 ... ball 2: 10.... ball 3: 50.... ball 1 is 0 in the array.作为 .. 球 1 : 42 ... 球 2: 10.... 球 3: 50.... 球 1 在数组中为 0。 ;) You can also use slice function and create a for / each loop, incrementing the slice factor, so you loop ;) 您还可以使用切片函数并创建一个 for / each 循环，增加切片因子，因此您循环

slice array 0,1 the the result .. ball 1...切片数组 0,1 结果.. 球 1...
slice array 0.2 ball 2...切片数组 0.2 球 2...
slice array 0.3切片数组 0.3

Thats the logic, i hope you understand, if so .. it ill help you a lot .这就是逻辑，我希望你理解，如果是这样..它会帮助你很多。

尝试为 BINGO 游戏生成和显示非重复随机值

问题描述

3 个解决方案

解决方案1
0 2019-09-11 23:02:25

解决方案2
0 2019-09-11 23:12:00

解决方案3
0 2022-01-12 22:45:04

尝试为 BINGO 游戏生成和显示非重复随机值

问题描述

3 个解决方案

解决方案1 0 2019-09-11 23:02:25

解决方案2 0 2019-09-11 23:12:00

解决方案3 0 2022-01-12 22:45:04

解决方案1
0 2019-09-11 23:02:25

解决方案2
0 2019-09-11 23:12:00

解决方案3
0 2022-01-12 22:45:04