Trying to generate & display non-repeating random values for a BINGO game

Question

Trying to generate & display non-repeating random values for a BINGO game

834 Views Asked by p4yner56 At 11 September 2019 at 22:18

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?

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)

Original Q&A

There are 4 best solutions below

**Ian** · Answer 1 · 2019-09-11T23:02:25.987000

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. 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. 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. 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.
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.
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.

**pkay14** · Answer 2 · 2019-09-11T23:12:00.280000

 <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.

**David Augustus** · Answer 3 · 2022-01-12T22:45:04.923000

Forget everything you done .

Start creating an array using range function, set number of numbers as you like . 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) . 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. ;) You can also use slice function and create a for / each loop, incrementing the slice factor, so you loop

slice array 0,1 the the result .. ball 1...
slice array 0.2 ball 2...
slice array 0.3

Thats the logic, i hope you understand, if so .. it ill help you a lot .

**James P** · Answer 4 · 2022-10-25T07:50:45.243000

James P On 25 October 2022 at 07:50

The way I did this was to shuffle an array of numbers from 1-90 and then call those numbers in sequence. They've already been shuffled, so they're already random.

Trying to generate & display non-repeating random values for a BINGO game

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in RANDOM

Related Questions in SHUFFLE

Related Questions in NON-REPETITIVE

Trending Questions

Popular # Hahtags

Popular Questions