TechQA.

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

834 views Asked by At

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)

javascript arrays random shuffle non-repetitive
Original Q&A
4

There are 4 answers

0
Ian On

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);
    }

  }
}

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

  2. The number max is declared. It is used to prevent an infinite loop when there are no more random numbers to choose.

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

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

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

5
pkay14 On 
 <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.

0
David Augustus On

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

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

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

1
James P On

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.

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in RANDOM

Related Questions in SHUFFLE

Related Questions in NON-REPETITIVE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions