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

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?

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)

score 0 · Answer 1 · answered Sep 11 '19 at 23:02

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-13T13:28:39.940

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

wow man, thank you so much. you've given me the most useful answer I could find so far, and I've been at this for about 2 weeks now, so I really appreciate it. There's one little hiccup though, it seems that every time I run the function, the last element generates as "undefined" instead of its value. Any idea what may be causing that? — p4yner56, Sep 12 '19 at 22:22
oh yeah sorry... My fault.. Just instead of: if (numbers.length === 0) { return message = "There is no more numbers" put: if (numbers.length < 0) { return and let index; if (numbers.length === 0) { index = "No more numbers" I edited all code — pkay14, Sep 13 '19 at 13:27
Of course now you can try to show only once the numbers that are called and don't repeat all of them. If you will stuck just ask and I'll try to help. — pkay14, Sep 13 '19 at 13:31
sounds good. I did try this code, but I seem to be running into the same issue of getting "undefined" instead of the element value when there is only one element left in the original array. I have exactly what I've been working with posted here: [link](https://stackoverflow.com/questions/57931318/trying-to-shuffle-to-generate-a-random-number-from-an-array-and-splice-but-keep) — p4yner56, Sep 13 '19 at 23:26
Oh yeah I see somebody answered it already. Your for loop isn't right — pkay14, Sep 14 '19 at 07:58

score 0 · Answer 3 · answered Jan 12 '22 at 22:45

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 .

score 0 · Answer 4 · answered Oct 25 '22 at 07:50

0

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.

answered Oct 25 '22 at 07:50

James P

1
2

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33023749) – Prateek Varshney Oct 30 '22 at 05:41

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

4 Answers4