Problema script Jquery - Bingo caller

**matteocanini** · 18-06-2020, 01.14.00

Ciao ragazzi!

Spero possiate aiutarmi. Premetto che non ho praticamente esperienza con Javascript e sto iniziando adesso ad avventurarmi in questo mondo.

Ho questo codice che non funziona come dovrebbe. E' un bingo caller e dovrebbe estrarre numeri random fino a 90; a volte termina la conta e chiama tutti i numeri, mentre spesso si blocca prima ed esce un pop-up che dice "Full house". Si blocca in maniera del tutto casuale quando mancano pochi numeri (a volte 5, altre volte 3) e non capisco perché. Vorrei semplicemente che chiamasse tutti i numeri senza mai bloccarsi.

Codice:

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            (function($){
                $.fn.extend({
                    numAnim: function(options) {
                        if ( ! this.length)
                            return false;

                        this.defaults = {
                            endAt: 90,
                            numClass: 'autogen-num',
                            duration: 0.5,   // seconds
                            interval: 25  // ms
                        };
                        var settings = $.extend({}, this.defaults, options);

                        var $num = $('<span/>', {
                            'class': settings.numClass 
                        });

                        return this.each(function() {
                            var $this = $(this);

                            // Wrap each number in a tag.
                            var frag = document.createDocumentFragment(),
                                numLen = settings.endAt.toString().length;
                            for (x = 0; x < numLen; x++) {
                                var rand_num = Math.floor( Math.random() * 10 );
                                frag.appendChild( $num.clone().text(rand_num)[0] )
                            }
                            $this.empty().append(frag);

                            var get_next_num = function(num) {
                                ++num;
                                if (num > 9) return 0;
                                return num;
                            };

                            // Iterate each number.
                            $this.find('.' + settings.numClass).each(function() {
                                var $num = $(this),
                                    num = parseInt( $num.text() );

                                var interval = setInterval( function() {
                                    num = get_next_num(num);
                                    $num.text(num);
                                }, settings.interval);

                                setTimeout( function() {
                                    clearInterval(interval);
                                }, settings.duration * 1000 - settings.interval);
                            });

                            setTimeout( function() {
                                $this.text( settings.endAt.toString() );
                                $("#num-" + settings.endAt).addClass("generated");
                                generated_numbers.push(settings.endAt);
                            }, settings.duration * 1000);
                        });
                    }
                });
            })(jQuery);

            var generated_numbers = [];

            $(function(){
                for(i=1; i<=90; i++){
                    $("<div />").addClass("num").html(i).attr("id","num-" + i).appendTo("#grid-container");
                }

                var cw = $('.num').width();
                $('.num').css({'height':cw+'px','line-height':cw+'px'});
            });

            function generateNum(){
                if(generated_numbers.length == 90){
                     alert("Full House!");
                    return;
                }
                while(true){
                    var i = getRandomInt(1, 90);
                    if($.inArray(i, generated_numbers) == -1){
                        //$("#number").html(i);
                        $("#number").numAnim({
                            endAt: i
                        });
                        //$("#num-" + i).addClass("generated");
                        //generated_numbers.push(i);
                        //setTimeout("generateNum()",200);
                        break;
                    }
                }
            }

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        </script>

Qua il CSS, non so se puó aiutare:

Codice:

<style>
            *{
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            }
            .container{
                text-align: center;
            }
            #grid-container{
            	padding-top: 13px;
                padding-bottom: 13px;
                border-radius: 10px;
                margin-top: 30px;
                margin-bottom: 30px;
                max-width: 900px;
                text-align: center;
                margin-left: 30px;
                margin-right:30px;
                BACKGROUND-COLOR: #bd2a26;
            }
            .num{
                width: 9%;
                margin: 3px;
                border: 0px;
                display: inline-block;
                color: #fff;
                font-size: 40px;
                box-sizing: border-box;
                background-color: #e63935;
                border-radius: 5px;
            }
            .generated{
                background-color: #2d82eb;
                color: #fff;
            }
            #generator-container{
                border:2px solid #bd2a26;
                display: block;
                position: fixed;
                left: 20px;
                top: 0px;
                padding: 20px;
                text-align: center;
                box-sizing: border-box;
                background-color: #ffe400;
            }

            #number{
                font-size: 40px;
                text-align: center;
                color: #000;
                width: 45px;
                margin-top: 20px;
                font-weight: bold;
                display: inline-block;
                background-color: #e63935;
                padding: 60px;
                border-radius: 90px;
                border:0px;
                background-image: url(http://matteocanini.altervista.org/bulldogbingo/biglia.png);
                background-repeat: no-repeat;
 				background-size: 165px 160px;
                
            }

            #btn-generate{
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: #2d82eb;
                color: white;
                margin-bottom: 5px;
                width: 200px;
                font-size: 20px;
                padding: 20px;
                cursor: pointer;
                border:0px solid #2d82eb;
                border-radius: 5px;
                border: none; 
border-width: 0; 
box-shadow: none;
            }
            #btn-generate:active{
                position: relative;
                border:0px solid #e63935;
                left: 0;
                top: 0;
                }
            #btn-generate:hover{
                position: relative;
                border:0px solid #e63935;
                left: 0;
                top: 0;
            }

            #banner-container{
                border:0px solid #888;
                display: block;
                position: fixed;
                right: 20px;
                top: 80px;
                padding: 0px;
                text-align: center;
                box-sizing: border-box;
                background-color: #FFF;
            }

            #footer{
                font-size: 12px;
                text-align: center;
                margin-top: 20px;
                margin-bottom: 20px;
                color: #888;
            }

            a:link, a:visited{
                color: #2d82eb;
                text-decoration: none;
                border: none;
                border: none; 
border-width: 0; 
box-shadow: none;
            }
input {border:0;outline:0;}
input:focus {outline:none!important;}
            a:hover{
                color: red;
                border: none;
            }

            #um-banner{
                margin-top: 15px;
                border-top: 0px; 
                padding-top: 15px;
            }
        </style>

**GraphOGLRisorse** · 18-06-2020, 02.22.54

Salve,
quel + 1 dentro a floor() in getRandomInt(), non serve.

Col + 1, si ha nel suo caso floor(random*90-1+1)+1 ovvero, floor(random*90)+1. Ciò significa, che quando random restituisce 89 il risultato nella funzione sarà 90, mentre qunado random restuisce 90 il risultato funzione sarà 91.

Cordiali saluti.

**mzanella** · 18-06-2020, 12.12.58

Col + 1, si ha nel suo caso floor(random*90-1+1)+1 ovvero, floor(random*90)+1. Ciò significa, che quando random restituisce 89 il risultato nella funzione sarà 90, mentre qunado random restuisce 90 il risultato funzione sarà 91.

Math.random restituisce numeri nell'intervallo [0; 1) (1 escluso). Math.floor(Math.random * 90) restituirebbe numeri naturali tra 0 e 89, il "+1" è necessario a traslare la distribuzione in [1; 90].

Si blocca in maniera del tutto casuale quando mancano pochi numeri (a volte 5, altre volte 3) e non capisco perché. Vorrei semplicemente che chiamasse tutti i numeri senza mai bloccarsi.

Il codice scritto così è un po' complicato da decifrare, forse un refactoring aiuterebbe.
Comunque Full house viene mostrato quando il vettore generated_numbers contiene 90 elementi. Immagino che in teoria solo i numeri estratti (senza ripetizione) possano finire nel vettore, eppure in una delle funzioni di callback compare:

Codice:

generated_numbers.push(settings.endAt);

Cosa rappresenta settings.endAt? È normale che venga inserito nel vettore dei numeri generati?

**darbula** · 18-06-2020, 14.44.53

Modificato non inerente.

**GraphOGLRisorse** · 18-06-2020, 16.51.20

Tralasciando quanto esposto nel mio primo messaggio, che è stato poi giustamente corretto da mzanella.

Ho fatto delle prove aggiungendo sun un file il codice html minimo al resto per visualizzare la tabella, il pulsante e numero estratto.

Il codice così modificato funziona:

Codice:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            (function($){
                $.fn.extend({
                    numAnim: function(options) {
                        if ( ! this.length)
                            return false;

                        this.defaults = {
                            endAt: 90,
                            numClass: 'autogen-num',
                            duration: 0.5,   // seconds
                            interval: 25  // ms
                        };
                        var settings = $.extend({}, this.defaults, options);

                        var $num = $('<span/>', {
                            'class': settings.numClass 
                        });

                        return this.each(function() {
                            var $this = $(this);

                            // Wrap each number in a tag.
                            var frag = document.createDocumentFragment(),
                                numLen = settings.endAt.toString().length;
                            for (x = 0; x < numLen; x++) {
                                var rand_num = Math.floor( Math.random() * 10 );
                                frag.appendChild( $num.clone().text(rand_num)[0] )
                            }
                            $this.empty().append(frag);

                            var get_next_num = function(num) {
                                ++num;
                                if (num > 9) return 0;
                                return num;
                            };

                            // Iterate each number.
                            $this.find('.' + settings.numClass).each(function() {
                                var $num = $(this),
                                    num = parseInt( $num.text() );

                                var interval = setInterval( function() {
                                    num = get_next_num(num);
                                    $num.text(num);
                                }, settings.interval);

                                setTimeout( function() {
                                    clearInterval(interval);
                                }, settings.duration * 1000 - settings.interval);
                            });

                            setTimeout( function() {
                                $this.text( settings.endAt.toString() );
                                //$("#num-" + settings.endAt).addClass("generated");
                                //generated_numbers.push(settings.endAt);
                            }, settings.duration * 1000);
                        });
                    }
                });
            })(jQuery);

            var generated_numbers = [];

            $(function(){
                for(i=1; i<=90; i++){
                    $("<div />").addClass("num").html(i).attr("id","num-" + i).appendTo("#grid-container");
                }

                var cw = $('.num').width();
                $('.num').css({'height':cw+'px','line-height':cw+'px'});
            });

            function generateNum(){
                if(generated_numbers.length == 90){
                     alert("Full House!");
                    return;
                }
                while(true){
                    var i = getRandomInt(1, 90);
                    if($.inArray(i, generated_numbers) == -1){
                        //$("#number").html(i);
                        $("#number").numAnim({
                            endAt: i
                        });
                        $("#num-" + i).addClass("generated");
                        generated_numbers.push(i);
                        setTimeout("generateNum()",duration * 1000);
                        break;
                    }
                }
            }

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        </script>

Ho testato la modifica per 10 volte consegutive e non mi ha dato errori.

Cordiali saluti.

**matteocanini** · 18-06-2020, 21.28.05

Originalmente inviato da GraphOGLRisorse

Tralasciando quanto esposto nel mio primo messaggio, che è stato poi giustamente corretto da mzanella.

Ho fatto delle prove aggiungendo sun un file il codice html minimo al resto per visualizzare la tabella, il pulsante e numero estratto.

Il codice così modificato funziona:

Codice:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            (function($){
                $.fn.extend({
                    numAnim: function(options) {
                        if ( ! this.length)
                            return false;

                        this.defaults = {
                            endAt: 90,
                            numClass: 'autogen-num',
                            duration: 0.5,   // seconds
                            interval: 25  // ms
                        };
                        var settings = $.extend({}, this.defaults, options);

                        var $num = $('<span/>', {
                            'class': settings.numClass 
                        });

                        return this.each(function() {
                            var $this = $(this);

                            // Wrap each number in a tag.
                            var frag = document.createDocumentFragment(),
                                numLen = settings.endAt.toString().length;
                            for (x = 0; x < numLen; x++) {
                                var rand_num = Math.floor( Math.random() * 10 );
                                frag.appendChild( $num.clone().text(rand_num)[0] )
                            }
                            $this.empty().append(frag);

                            var get_next_num = function(num) {
                                ++num;
                                if (num > 9) return 0;
                                return num;
                            };

                            // Iterate each number.
                            $this.find('.' + settings.numClass).each(function() {
                                var $num = $(this),
                                    num = parseInt( $num.text() );

                                var interval = setInterval( function() {
                                    num = get_next_num(num);
                                    $num.text(num);
                                }, settings.interval);

                                setTimeout( function() {
                                    clearInterval(interval);
                                }, settings.duration * 1000 - settings.interval);
                            });

                            setTimeout( function() {
                                $this.text( settings.endAt.toString() );
                                //$("#num-" + settings.endAt).addClass("generated");
                                //generated_numbers.push(settings.endAt);
                            }, settings.duration * 1000);
                        });
                    }
                });
            })(jQuery);

            var generated_numbers = [];

            $(function(){
                for(i=1; i<=90; i++){
                    $("<div />").addClass("num").html(i).attr("id","num-" + i).appendTo("#grid-container");
                }

                var cw = $('.num').width();
                $('.num').css({'height':cw+'px','line-height':cw+'px'});
            });

            function generateNum(){
                if(generated_numbers.length == 90){
                     alert("Full House!");
                    return;
                }
                while(true){
                    var i = getRandomInt(1, 90);
                    if($.inArray(i, generated_numbers) == -1){
                        //$("#number").html(i);
                        $("#number").numAnim({
                            endAt: i
                        });
                        $("#num-" + i).addClass("generated");
                        generated_numbers.push(i);
                        setTimeout("generateNum()",duration * 1000);
                        break;
                    }
                }
            }

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        </script>

Ho testato la modifica per 10 volte consegutive e non mi ha dato errori.

Cordiali saluti.

Grazie mille! Ho testato il codice almeno 5 volte e sembra che ora funzioni senza problemi.

Restituisce la scritta "Full house" solo quando vengono chiamati tutti 90 i numeri.

Discussione: Problema script Jquery - Bingo caller

LinkBack

Strumenti discussione

Display

Problema script Jquery - Bingo caller

Regole di scrittura